Template literals en JavaScript: sintaxis y uso práctico

Aprende a dominar los strings en JavaScript con técnicas modernas y claras. Aquí verás por qué son primitivos inmutables, cómo evitar errores comunes al concatenar y cómo los template literals de ECMAScript 6 simplifican la interpolación, las expresiones y el texto multilínea. Todo con ejemplos prácticos y directos.

¿Qué son los strings y por qué son primitivos inmutables?

Los strings son primitivos inmutables: cada operación que aparenta “modificar” un string crea uno nuevo. El valor original no cambia. Esto es clave para razonar sobre memoria y evitar efectos inesperados.

También puedes usar comillas simples o dobles para definir strings. No hay una regla estricta, elige la que prefieras.

Ejemplo básico y salida en consola con varios parámetros.

// Variables y comillas simples.
const nombre = 'JavaScript';
const version = '6';

// Imprimir varios valores en una sola línea.
console.log(nombre, version); // JavaScript 6

Ideas clave:

• Inmutabilidad: cada cambio genera un nuevo string.
• Comillas simples o dobles: elige la que te acomode.
• console.log con coma: imprime varios valores sin concatenar.

¿Cómo concatenar y por qué usar template literals en ECMAScript 6?

La concatenación con + funciona, pero es propensa a errores y dificulta la lectura. Con template literals (las comillas invertidas) puedes interpolar variables con ${}, reducir fallos y escribir frases más limpias.

¿Qué problemas causa la concatenación con '+'?

• Fácil olvidar un espacio o un operador +.
• Frases largas se vuelven difíciles de leer.
• Aumenta la posibilidad de errores por edición.

// Concatenación tradicional con +.
const mensaje = 'Bienvenido a ' + nombre + ', versión ' + version + '.';
console.log(mensaje);

¿Cómo simplifican los template literals la interpolación?

• Interpolas variables con ${variable} de forma clara.
• Mejor legibilidad en frases largas.
• Puedes comentar líneas que no quieras ejecutar usando //.

// Template literals con interpolación.
const mensaje2 = `Bienvenido y bienvenida al curso de ${nombre} en su versión: ${version}.`;
console.log(mensaje2);

// Comentar líneas que no se ejecutan.
// console.log('Línea desactivada');

¿Cómo evaluar expresiones, typeof y multilínea con template literals?

Los template literals permiten evaluar expresiones dentro de ${}. También facilitan crear texto multilínea para formatos como Markdown. Ojo con dos detalles frecuentes: errores por typo en nombres de variables y olvidar imprimir valores en consola.

// Expresiones dentro de template literals.
const precio = 100;
const cantidad = 3;
const total = `${precio * cantidad}`; // El resultado queda como string.

console.log(total);        // 300
console.log(typeof total); // 'string'

• El operador typeof muestra que total es un string, aunque uses números dentro de ${}. Más adelante se profundiza en la coerción de tipos.
• Un typo como escribir una variable inexistente genera ReferenceError.
• Si no usas console.log, no verás el resultado en la consola.

Texto multilínea con formato tipo Markdown usando saltos de línea nativos.

// Multilínea con template literals.
const nota = `
Mi nota
Este es el contenido
- nota uno
- nota dos
`;
console.log(nota);

Habilidades y conceptos reforzados:

• Primitivos inmutables y creación de nuevos strings al “modificar”.
• Interpolación con ${} y mejor legibilidad con template literals.
• Concatenación con + y sus riesgos al escalar.
• Expresiones evaluadas dentro de template literals.
• Multilínea nativo para estructurar contenido tipo Markdown.
• Console.log, comentarios con // y diagnóstico con typeof.
• Atención a errores por variables mal escritas y a ejecutar el bloque completo.

¿Te quedaron dudas o quieres compartir tus propios ejemplos con template literals y multilínea? Deja tu comentario y cuéntanos cómo lo aplicarías en tu proyecto.