Co jsou template literals?

Question

Accepted Answer

**Template literals** používají zpětné lomítko (`` ` ``) a přidávají dvě věci, které zwyklejné uvozovky postrádají: **interpolaci** výrazů a **víceřádkové** řetězce. ```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}

`; ``` Před template literals jste psali `"Hi " + name + ", " + count + ...` — podrobné a náchylné k chybám. Interpolace se čte mnohem lépe. ## Tagged templates (advanced) Funkce umístěná před zpětnými lomítky obdrží části řetězce a interpolované hodnoty, což jí umožňuje je zpracovat: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` To poskytuje energii knihovnám jako **styled-components** a pomocníkům pro bezpečné SQL/HTML escaping. ## Proč je to důležité Template literals jsou dnes standardní způsob, jak vytvářet řetězce — čitelná interpolace, snadné víceřádkové texty a háček (tagged templates) pro DSLs.