Cosa sono i template literals?

Question

Accepted Answer

I **template literals** utilizzano backtick (`` ` ``) e aggiungono due cose che le virgolette stringa semplici non hanno: **interpolazione** di espressioni e stringhe **multi-line**. ```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}

`; ``` Prima dei template literals dovevi scrivere `"Hi " + name + ", " + count + ...` — verboso e soggetto a errori. L'interpolazione si legge molto meglio. ## Tagged templates (avanzato) Una funzione posizionata prima dei backtick riceve le parti di stringa e i valori interpolati, permettendole di elaborarli: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Questo potenzia librerie come **styled-components** e helper per l'escape sicuro di SQL/HTML. ## Perché è importante I template literals sono il modo standard per costruire stringhe oggi — interpolazione leggibile, testo multi-line facile e un hook (tagged templates) per i DSL.