Mi az a sablon literál?

Question

Accepted Answer

A **sablon literálok** backtickeket (`` ` ``) használnak, és két dolgot adnak hozzá, amelyek az egyszerű karakterlánc-idézőjelek nem tartalmaznak: a kifejezések **interpolációját** és a **többsoros** karakterláncokat. ```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}

`; ``` A sablon literálok előtt a `"Hi " + name + ", " + count + ...` karakterláncot kellett írni – részletező és hibára hajlamos. Az interpoláció sokkal jobban olvasható. ## Címkézett sablonok (haladó) A backtickek előtt elhelyezett függvény megkapja a karakterláncrészeket és az interpolált értékeket, amely lehetővé teszi számára azok feldolgozását: ```js function highlight(strings, ...values) { return strings.reduce((out, s, i) => out + s + (values[i] ? `${values[i]}` : ""), ""); } highlight`Hello ${name}!`; // "Hello Ann!" ``` Ez felhatalmazza az olyan könyvtárakat, mint a **styled-components** és a biztonságos SQL/HTML szöktetési segédprogramok. ## Miért fontos A sablon literálok napjainkban a karakterláncok összeállításának szabványos módja – olvasható interpoláció, könnyed többsoros szöveg, valamint a DSL-ekhez szükséges hook (címkézett sablonok).