Que sont les template literals?

Question

Accepted Answer

Les **template literals** utilisent des backticks (`` ` ``) et ajoutent deux choses que les guillemets ordinaires n'ont pas : **l'interpolation** d'expressions et les chaînes **multi-lignes**. ```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}

`; ``` Avant les template literals, vous écriviez `"Hi " + name + ", " + count + ...` — verbeux et sujet aux erreurs. L'interpolation se lit beaucoup mieux. ## Tagged templates (advanced) Une fonction placée avant les backticks reçoit les parties de la chaîne et les valeurs interpolées, ce qui lui permet de les traiter : ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Ceci alimente des bibliothèques comme **styled-components** et des assistants d'échappement sûrs pour SQL/HTML. ## Pourquoi c'est important Les template literals sont le moyen standard de construire des chaînes aujourd'hui — interpolation lisible, textes multi-lignes faciles et un hook (tagged templates) pour les DSL.