Cómo crear cadenas de varias líneas en JavaScript

En este tutorial vamos a ver cómo crear cadenas que ocupen varias líneas tanto en el texto de salida como en el propio código.

Cadenas de varias líneas en el texto de salida

En JavaScript puedes crear cadenas de más de una línea usando los grupos de caracteres \n o \r. Esto agregará una nueva línea en el texto de salida cuando el texto sea representado, tal y como puedes ver en este ejemplo:

const cadena = 'Esta es la primera línea,\nesta la segunda\ny esta la tercera.';

El texto anterior se representará así en la terminal:

Esta es la primera línea,
esta la segunda
y esta la tercera.

Si vas a representar la cadena en un documento HTML, puedes usar la etiqueta <br> de salto de línea o la etiqueta <p> para iniciar un nuevo párrafo:

const cadena = '<p>Esta es la primera línea del párrafo<br> y esta es la segunda.</p>';

El código anterior se representará así:

Esta es la línea del primer párrafo
y esta es la segunda.

Estos métodos funcionarán perfectamente, pero son un problema cuando las cadenas son demasiado largas, ya que en teoría solamente podrás ocupar una línea en el código.

Cadenas de varias líneas en el código

El hecho de escribir cadenas demasiado largas en el código puede provocar que el código sea difícil de leer. Para solucionar este problema puedes valerte de diferentes soluciones. Por ejemplo, podrías concatenar las cadenas, tal y como ves en el siguiente ejemplo:

const cadena = 'Esta es la primera línea,\n' + 'esta la segunda\n' + 'y esta la tercera.';

Sin embargo, en lugar de concatenar las cadenas tal y como harías en otros lenguajes de programación, con JavaScript también puedes usar el carácter de escape \ a solas para escapar una nueva línea, tal y como ves en este ejemplo:

const cadena = 'Esta es la primera línea,\n\
esta la segunda\n\
y esta la tercera.';

Sin embargo, este método no es el mejor de todos, ya que todavía da problemas con algunos navegadores y scripts de minificación de código.

Para hacer el código más legible, la mejor opción consiste en usar plantillas literales, que eliminan la necesidad de concatenar las cadenas o de escapar los saltos de línea. Las cadenas se mostrarán tal y como las redactes en el código, conservando los saltos de línea:

const cadena = `Esta es la primera línea,
esta la segunda
y esta la tercera.`;

El texto anterior se representará de este modo cuando se muestre por pantalla:

Esta es la primera línea,
esta la segunda
y esta la tercera.

Ahora ya conoces todos los métodos que se suelen usar para crear nuevas líneas. Es también importante que seas consistente con el método que uses para crearlas, al menos en el contexto de un mismo script o aplicación.

Esto ha sido todo.

---