HOWTO · JavaScript
Escribir nueva línea en JavaScript
Este tutorial enseña cómo escribir una nueva línea en JavaScript.
En esta página
Para escribir una nueva línea en JavaScript, incluye la secuencia de escape \n en una cadena o usa un literal de plantilla con un salto de línea real. Ambos métodos sirven para cadenas y para mostrar texto en la consola. Para el texto que se muestra en un navegador, crea un elemento HTML <br> o usa elementos de bloque separados; un carácter de salto de línea en una cadena no se convierte automáticamente en un salto visible en HTML.
Insertar una nueva línea con una secuencia de escape
La secuencia de escape \n representa un salto de línea dentro de una cadena de JavaScript. Añádela donde deba comenzar la línea siguiente y, después, pasa la cadena al método de salida que necesites. Por ejemplo, console.log() escribe el salto de línea en la consola, por lo que el mensaje aparece en dos líneas.
Ejecuta este ejemplo:
El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.
const message = "Hello, World!\nWelcome to JavaScript.";
console.log(message);
El bloque de salida muestra el mensaje en dos líneas y conserva en inglés el texto del ejemplo. La misma cadena se puede guardar, concatenar o pasar a otra función. El salto de línea forma parte del valor de la cadena; no depende de console.log(). Si el destino no representa visualmente los saltos de línea, como ocurre con el texto HTML normal, elige un método de representación adecuado para ese destino.
Usar literales de plantilla para cadenas multilínea
Los literales de plantilla usan acentos graves y permiten que una cadena ocupe varias líneas del código fuente. Los saltos de línea escritos entre los acentos graves pasan a formar parte de la cadena, lo que facilita la lectura de textos fijos más largos. También admiten interpolación con ${expression}, para incluir un valor sin concatenar cadenas manualmente.
Ejecuta este ejemplo:
El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.
const name = "JavaScript";
const message = `Hello, World!
Welcome to ${name}.`;
console.log(message);
El bloque de salida conserva en inglés el texto del ejemplo. Usa un literal de plantilla cuando convenga distribuir el texto en varias líneas en el código fuente o cuando la cadena incluya valores interpolados. Usa \n si el texto es corto o si quieres indicar claramente el punto exacto del salto de línea en una cadena escrita en una sola línea. Ambos métodos producen una cadena que contiene un salto de línea; ninguno determina cómo la mostrará el navegador.
Mostrar saltos de línea en HTML
En el contenido de una página web, <br> crea un salto de línea visible dentro del texto. Para contenido fijo, escribe el salto directamente en el HTML. Para contenido dinámico, crea el elemento con document.createElement("br") y añádelo entre nodos de texto; así, los valores se mantienen como texto, sin pedirle al navegador que interprete una cadena como marcado.
El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.
<p>Hello, World!<br>Welcome to JavaScript.</p>
Este es un ejemplo de una página web estática, no un ejemplo de consola ni una salida de ejecución. Si hay valores dinámicos, es preferible usar textContent o nodos de texto. Asignar contenido no confiable a innerHTML puede hacer que el navegador lo interprete como marcado y crear un riesgo de secuencias de comandos entre sitios. Usa innerHTML solo cuando el marcado sea confiable y sea necesario analizarlo.
Los márgenes y el relleno de CSS pueden añadir espacio visual entre elementos separados, pero no insertan un carácter de salto de línea en una cadena de JavaScript ni crean un salto dentro de un nodo de texto. Elige \n o un literal de plantilla multilínea para el contenido de una cadena, <br> para separar líneas del texto en el navegador y el espaciado CSS cuando quieras ajustar la distribución entre elementos.
