Vad är template literals?

Question

Accepted Answer

**Template literals** använder backticks (`` ` ``) och lägger till två saker som vanliga strängcitattecken saknar: **interpolation** av uttryck och **flerraders** strängar. ```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}

`; ``` Innan template literals skrev du `"Hi " + name + ", " + count + ...` — verbosit och felbenäget. Interpolation är mycket läsbar. ## Taggade templates (avancerat) En funktion placerad före backticks tar emot strängdelarna och de interpolerade värdena, vilket låter den bearbeta dem: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Detta driver bibliotek som **styled-components** och säkra SQL/HTML-escaping-hjälpare. ## Varför det spelar roll Template literals är dagens standardsätt att bygga strängar — läsbar interpolation, enkel flerradstext och en hook (taggade templates) för DSL:er.