Co to są template literals?

Question

Accepted Answer

**Template literals** używają backticks (`` ` ``) i dodają dwie rzeczy, których brakuje zwykłym cudzysłowom: **interpolacja** wyrażeń i **wielowierszowe** ciągi znaków. ```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}

`; ``` Przed template literals pisałbyś `"Hi " + name + ", " + count + ...` — gadatliwe i podatne na błędy. Interpolacja jest znacznie bardziej czytelna. ## Tagged templates (zaawansowane) Funkcja umieszczona przed backticks otrzymuje części ciągu i interpolowane wartości, pozwalając jej je przetworzyć: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` To napędza biblioteki takie jak **styled-components** oraz pomocniki bezpiecznego escapowania SQL/HTML. ## Dlaczego to ważne Template literals to dzisiaj standardowy sposób na budowanie ciągów znaków — czytelna interpolacja, łatwy tekst wielowierszowy i hook (tagged templates) dla DSL-ów.