Was sind template literals?

Question

Accepted Answer

**Template literals** verwenden Backticks (`` ` ``) und fügen zwei Dinge hinzu, die gewöhnliche Anführungszeichen nicht haben: **Interpolation** von Ausdrücken und **mehrzeilige** 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}

`; ``` Vor template literals schriebst du `"Hi " + name + ", " + count + ...` — wortreich und fehleranfällig. Interpolation liest sich viel besser. ## Tagged templates (advanced) Eine Funktion, die vor den Backticks platziert wird, empfängt die Stringteile und die interpolierten Werte, was ihr erlaubt, diese zu verarbeiten: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Dies ermöglicht Bibliotheken wie **styled-components** und sichere SQL/HTML-Escaping-Helfer. ## Warum es wichtig ist Template literals sind heute die Standardmethode zum Erstellen von Strings — lesbare Interpolation, einfache mehrzeilige Texte und ein Hook (tagged templates) für DSLs.