Mitä ovat template literals?

Question

Accepted Answer

**Template literals** käyttävät backtick-merkkejä (`` ` ``) ja lisäävät kaksi asiaa, joita tavallisilla lainausmerkeillä ei ole: lausekkeiden **interpolointi** ja **moniriviset** merkkijonot. ```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}

`; ``` Ennen template literaleja kirjoitit `"Hi " + name + ", " + count + ...` — pitkäveteinen ja virheille altis. Interpolointi lukee paljon paremmin. ## Tagged templates (advanced) Backtick-merkkien edelle sijoitettu funktio vastaanottaa merkkijonon osat ja interpoloidut arvot, jolloin se voi käsitellä niitä: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Tämä antaa voimaa kirjastoille kuten **styled-components** ja turvallisille SQL/HTML-poistamisen apuohjelmille. ## Miksi sillä on merkitystä Template literals ovat nykyään vakiomuotoinen tapa rakentaa merkkijonoja — luettava interpolointi, helppo moniriviset tekstit ja koukku (tagged templates) DSL:ille.