Lección 12: Template Literals (Plantillas de Cadenas)

🧠 Concepto

Los template literals (template strings o plantillas de cadenas) son una forma moderna y poderosa de trabajar con strings en JavaScript. Se introdujeron en ES6 (2015) y desde entonces se han convertido en el estándar.

Sintaxis básica

En lugar de comillas simples o dobles, usamos backticks (acento grave) ` (la tecla junto a la Ñ en teclado español).

let saludo = `Hola Mundo`;  // template literal básico

Interpolación de variables

La gran ventaja: podemos insertar variables directamente dentro del string usando ${}.

let nombre = 'Ana';
let edad = 25;

// Sin template literals (incómodo)
console.log('Hola, me llamo ' + nombre + ' y tengo ' + edad + ' años.');

// Con template literals (limpio)
console.log(`Hola, me llamo ${nombre} y tengo ${edad} años.`);

Strings multilínea

Con template literals podemos escribir strings de varias líneas sin usar \n:

// Sin template literals
let texto1 = 'Línea 1\n' +
             'Línea 2\n' +
             'Línea 3';

// Con template literals
let texto2 = `Línea 1
Línea 2
Línea 3`;

console.log(texto2);

Expresiones dentro de ${}

No solo puedes poner variables, sino cualquier expresión de JavaScript:

let a = 10;
let b = 5;

console.log(`La suma de ${a} y ${b} es ${a + b}`);
console.log(`¿Es ${a} mayor que ${b}? ${a > b}`);

// Llamar funciones
function saludar(nombre) {
  return `Hola ${nombre}`;
}
console.log(`${saludar('Carlos')}, bienvenido`);

💻 Ejemplo

// Datos del usuario
let usuario = 'María';
let rol = 'administradora';
let mensajesNoLeidos = 3;
let conexion = true;

// Mensaje personalizado
let mensaje = `
  ───────────────────────────
  Bienvenida, ${usuario} 👋
  Rol: ${rol.toUpperCase()}
  Mensajes: ${mensajesNoLeidos > 0 ? mensajesNoLeidos : 'ninguno'}
  Estado: ${conexion ? '🟢 En línea' : '🔴 Desconectada'}
  ───────────────────────────
`;

console.log(mensaje);

// HTML con template literals
let titulo = 'Mi Página';
let contenido = '<p>Hola mundo</p>';
let html = `
  <!DOCTYPE html>
  <html>
  <head>
    <title>${titulo}</title>
  </head>
  <body>
    ${contenido}
  </body>
  </html>
`;
console.log(html);

📝 Ejercicio

Crea un archivo template-literals.js.
Declara variables: nombre, edad, ciudad, profesion.
Usa un template literal para crear una presentación como: “Hola, soy [nombre], tengo [edad] años, vivo en [ciudad] y soy [profesion].”
Crea un template literal multilínea con un horario de clases usando ${}.
Incluye una expresión matemática dentro de ${}.

let nombre = 'Luis';
let edad = 28;
let ciudad = 'Monterrey';
let profesion = 'diseñador';

let presentacion = `Hola, soy ${nombre}, tengo ${edad} años,
vivo en ${ciudad} y soy ${profesion}.`;

console.log(presentacion);

// Edad en meses
console.log(`${nombre} tiene ${edad * 12} meses de vida.`);

⚠️ Nota

No puedes mezclar backticks con comillas dentro de la interpolación. Si necesitas comillas dentro del string, simplemente escríbelas normalmente:

let texto = `Ella dijo: "Hola" y él respondió: '¿Qué tal?'`; // ✅ válido

🎯 Tip

Los template literals también permiten template tags (etiquetado), una característica avanzada que permite procesar el template con una función. Frameworks como styled-components en React lo usan. Pero eso lo veremos más adelante. Por ahora, domina la interpolación y strings multilínea.