What are template literals?

Question

Accepted Answer

**Template literals** use backticks (`` ` ``) and add two things plain string quotes lack: **interpolation** of expressions and **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}

`; ``` Before template literals you'd write `"Hi " + name + ", " + count + ...` — verbose and error-prone. Interpolation reads far better. ## Tagged templates (advanced) A function placed before the backticks receives the string parts and the interpolated values, letting it process them: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` This powers libraries like **styled-components** and safe SQL/HTML escaping helpers. ## Why it matters Template literals are the standard way to build strings today — readable interpolation, easy multi-line text, and a hook (tagged templates) for DSLs.