Wat zijn template literals?

Question

Accepted Answer

**Template literals** gebruiken backticks (`` ` ``) en voegen twee dingen toe die normale string-aanhalingstekens niet hebben: **interpolatie** van expressies en **multi-line** strings. ```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}

`; ``` Voor template literals moest je `"Hi " + name + ", " + count + ...` schrijven — omslachtig en foutgevoelig. Interpolatie leest veel beter. ## Tagged templates (advanced) Een functie die voor de backticks staat, ontvangt de string-onderdelen en de geïnterpoleerde waarden, zodat het deze kan verwerken: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Dit geeft kracht aan bibliotheken zoals **styled-components** en veilige SQL/HTML escaping-helpers. ## Waarom het belangrijk is Template literals zijn de standaardmanier om vandaag de dag strings te bouwen — leesbare interpolatie, gemakkelijke multi-line tekst en een hook (tagged templates) voor DSL's.