Cadenas multilínea en JavaScript: 3 formas que simplificarán tu vida

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Cómo asignar una cadena multilínea a una variable en JavaScript: análisis para principiantes

\n\n

¿Alguna vez has escrito un texto largo en el código y has pensado: «¿No puedo simplemente presionar Enter y continuar en una nueva línea?» Si eres nuevo en JavaScript, lo más probable es que ya te hayas encontrado con esto. Intentas guardar un texto multilínea en una variable y obtienes un error de sintaxis. ¿Te suena?

\n\n

La pregunta «How can I assign a multiline string literal to a variable?» es una de las más populares en Stack Overflow. Miles de desarrolladores buscan la respuesta. Y no es de extrañar: trabajar con cadenas multilínea es una base que todo aquel que escribe en JavaScript debe dominar.

\n\n

En este artículo no solo daremos una respuesta seca. Analizaremos tres formas prácticas, mostraremos ejemplos de la vida real y te indicaremos qué método elegir para que tu código sea limpio, legible y no cause dolores de cabeza.

\n\n

¿Por qué JavaScript no acepta saltos de línea entre comillas?

\n\n

Aclaremos de inmediato el problema principal. Si intentas escribir así:

\n\n

let message = "¡Hola!\n¿Cómo estás?\n¿Todo bien?";\nconsole.log(message);

\n\n

… obtendrás un error SyntaxError: unterminated string literal. ¿Por qué? Porque en las cadenas normales (entre comillas dobles o simples), JavaScript considera que la cadena termina en la misma línea donde comenzó. El salto de línea rompe físicamente la cadena.

\n\n

Pero no te preocupes. Tenemos al menos tres formas de sortear esta limitación. Y la primera es la más moderna y cómoda.

\n\n

Forma 1: Literales de plantilla (Template Literals) — tu nuevo mejor amigo

\n\n

A partir de ES6 (ECMAScript 2015), JavaScript incorporó los literales de plantilla. Son cadenas que se encierran entre comillas invertidas (` `). Y resuelven el problema de las cadenas multilínea de una vez por todas.

\n\n

Mira lo sencillo que es:

\n\n

let multilineString = `Esta es la primera línea.\nEsta es la segunda línea.\nY esta es la tercera línea.`;\n\nconsole.log(multilineString);\n// Salida:\n// Esta es la primera línea.\n// Esta es la segunda línea.\n// Y esta es la tercera línea.

\n\n

Funciona de inmediato. Simplemente escribes el texto con saltos de línea y JavaScript los conserva tal cual. Sin caracteres adicionales, sin magia.

\n\n

¿Por qué es la mejor opción para principiantes?

Legibilidad: El código se ve exactamente como lo imaginaste.
Soporte de interpolación: Puedes insertar variables directamente en la cadena con ${...}.
Estándar: Todos los navegadores modernos y Node.js admiten literales de plantilla.

\n\n

Ejemplo con interpolación:

\n\n

let name = "Ana";\nlet greeting = `¡Hola, ${name}!\nBienvenido a PythonLib.\nHoy es un gran día para aprender código.`;\n\nconsole.log(greeting);\n// Salida:\n// ¡Hola, Ana!\n// Bienvenido a PythonLib.\n// Hoy es un gran día para aprender código.

\n\n

Esta forma es tan cómoda que en el desarrollo moderno se usa en el 90% de los casos. Si estás empezando, recuerda esta.

\n\n

Forma 2: Concatenación de cadenas (método antiguo pero fiable)

\n\n

Antes de la llegada de los literales de plantilla, los desarrolladores usaban la concatenación: unir cadenas con el operador +. Este método sigue siendo relevante, especialmente si trabajas con código muy antiguo o no puedes usar ES6 por alguna razón.

\n\n

Así se ve:

\n\n

let multilineString = "Esta es la primera línea.\\n" +\n                     "Esta es la segunda línea.\\n" +\n                     "Y esta es la tercera línea.";\n\nconsole.log(multilineString);\n// Salida:\n// Esta es la primera línea.\n// Esta es la segunda línea.\n// Y esta es la tercera línea.

\n\n

Observa el \\n — es una secuencia de escape