CAP 02 · LEC 05·Sintaxis
Template literals: strings dinámicos con `backticks`
Los template literals (plantillas de string) reemplazaron la concatenación con + para siempre. Interpolación, multilínea y tagged templates — todo en una sola sintaxis.
¿Encontraste un error o algo que mejorar?Editá esta lección en GitHub →
Sintaxis básica
Los template literals usan backtick ` (acento grave) en lugar de comillas. Permiten incrustar expresiones con ${...}.
const nombre = "Ana";
const edad = 25;
// Concatenación clásica (tedioso)
const msg1 = "Hola, " + nombre + ". Tienes " + edad + " años.";
// Template literal (limpio)
const msg2 = `Hola, ${nombre}. Tienes ${edad} años.`;
console.log(msg1); // Hola, Ana. Tienes 25 años.
console.log(msg2); // Hola, Ana. Tienes 25 años.const nombre: string = "Ana";
const edad: number = 25;
// Concatenación clásica (tedioso)
const msg1 = "Hola, " + nombre + ". Tienes " + edad + " años.";
// Template literal — TypeScript verifica los tipos dentro de ${}
const msg2: string = `Hola, ${nombre}. Tienes ${edad} años.`;
console.log(msg1); // Hola, Ana. Tienes 25 años.
console.log(msg2); // Hola, Ana. Tienes 25 años.Salida
Hola, Ana. Tienes 25 años.Expresiones dentro de ${}
Dentro de ${} va cualquier expresión JavaScript:
const x = 10;
const y = 5;
console.log(`Suma: ${x + y}`); // 15
console.log(`Mayor: ${Math.max(x, y)}`); // 10
console.log(`Par: ${x % 2 === 0 ? "sí" : "no"}`); // sí
// Llamada a función
const upper = (s) => s.toUpperCase();
console.log(`Nombre: ${upper("ana")}`); // ANA
// Incluso templates anidados
const items = ["a", "b", "c"];
console.log(`Items: ${items.map(i => `[${i}]`).join("")}`); // Items: [a][b][c]Strings multilínea
// Con concatenación (feo)
const html1 = "<div>
" +
" <p>Hola</p>
" +
"</div>";
// Con template literal (limpio)
const html2 = `
<div>
<p>Hola</p>
</div>
`.trim(); // .trim() elimina el salto de línea inicial
console.log(html2);Salida
<div>
<p>Hola</p>
</div>Tagged templates (avanzado)
Un tagged template es una función que recibe el template como partes separadas. Lo usan librerías como styled-components, sql, gql:
// Ejemplo: escapar HTML automáticamente
function safe(strings, ...values) {
return strings.reduce((acc, str, i) => {
const val = String(values[i - 1] || "")
.replace(/</g, "<")
.replace(/>/g, ">");
return acc + val + str;
});
}
const entrada = '<script>alert("xss")</script>';
console.log(safe`Entrada del usuario: ${entrada}`);
// Entrada del usuario: <script>alert("xss")</script>¿Cuándo usar tagged templates?
En el día a día no los escribirás, pero sí los usarás al trabajar con styled-components (CSS-in-JS), graphql-tag (consultas GraphQL) o ORMs como Prisma y Drizzle. Reconocerlos te ayuda a entender código de librerías.