¿Qué son las template literals?

Question

Accepted Answer

Las **template literals** usan backticks (`` ` ``) y añaden dos cosas que les faltan a las comillas de cadena normales: la **interpolación** de expresiones y las cadenas **multilínea**. ```js const name = "Ann"; const count = 3; // interpolation: ${expression} const msg = `Hi ${name}, you have ${count} new messages`; // any expression works, not just variables const total = `Total: ${(count * 1.1).toFixed(2)}`; // multi-line — preserves the line breaks const html = `

${name}

`; ``` Antes de las template literals escribirías `"Hi " + name + ", " + count + ...` — verboso y propenso a errores. La interpolación se lee mucho mejor. ## Tagged templates (avanzado) Una función colocada antes de los backticks recibe las partes de la cadena y los valores interpolados, lo que le permite procesarlos: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Esto impulsa librerías como **styled-components** y helpers de escape seguro de SQL/HTML. ## Por qué es importante Las template literals son la forma estándar de construir cadenas hoy en día — interpolación legible, texto multilínea sencillo y un gancho (tagged templates) para DSLs.