Plantillas literales en JavaScript

Las plantillas literales (template literals) son una forma moderna y potente de trabajar con cadenas de texto.

Se delimitan usando backticks:

¿Qué son?

Ejemplo básico:

let saludo = `Hola mundo`;

Ventajas

1️⃣ Insertar variables fácilmente

❌ Forma antigua:

let nombre = "Pepe";
console.log("Hola " + nombre);

✅ Con plantillas literales:

let nombre = "Guy";
console.log(`Hola ${nombre}`);

2️⃣ Insertar expresiones

let a = 5;
let b = 10;

console.log(`Resultado: ${a + b}`);

Salida:

Resultado: 15

3️⃣ Texto multilínea sin trucos

❌ Antes:

let texto = "Linea 1\nLinea 2";

✅ Ahora:

let texto = `Linea 1
Linea 2`;

4️⃣ Crear HTML dinámico

let usuario = "Guy";

let html = `
    <h1>Bienvenido ${usuario}</h1>
    <p>Disfruta tu estancia</p>
`;

document.body.innerHTML = html;

Cuándo usarlas

• ✔ Mostrar mensajes dinámicos
• ✔ Crear HTML desde JavaScript
• ✔ Depuración con console.log()
• ✔ Generar textos largos

Truco mental

👉 ${} = aquí puedes meter JavaScript