Mi azok a sablon literálok és mire használják őket…

A sablon literálok (template literals), más néven sablon sztringek, szintaktikus cukorként működnek JavaScript-ben, lehetővé téve kifejezések beágyazását a backtick (``) használatával.

Ezeket a következőkre használják:

Kényelmesebb változók és kifejezések interpolálása sztringekbe:

const name = "Világ";
const greeting = `Szia, ${name}!`; // Változó beágyazása
console.log(greeting); // Szia, Világ!

const sum = 2 + 3;
const result = `Összeg: ${sum}.`; // Kifejezés beágyazása
console.log(result); // Összeg: 5.

Többsoros sztringek létrehozása anélkül, hogy a sortörés karaktert (\n) használnánk:
```
const multilineString = `
Ez
egy
többsoros
szöveg.
`;
console.log(multilineString);
```
Összetett szövegkifejezések, például fájlútvonalak vagy SQL-lekérdezések, könnyebb olvashatósággal való összeállítása:
```
const userId = 123;
const query = `SELECT * FROM users WHERE id = ${userId}`;
console.log(query);
```

Címkézett sablonok (tagged templates) használata a kiterjesztett funkcionalitásért: A címkézett sablonok lehetővé teszik, hogy egy függvényt hívjunk meg egy sablon literál segítségével. A függvény első argumentuma egy string részekből álló tömb, a további argumentumok pedig az interpolált kifejezések értékei.

function highlight(strings, ...values) {
  let str = '';
  strings.forEach((string, i) => {
    str += string;
    if (values[i]) {
      str += `<b>${values[i]}</b>`; // Például félkövér kiemelés
    }
  });
  return str;
}

const user = "Frontend";
const role = "fejlesztő";
const message = highlight`Szia, ${user}! Te vagy egy ${role}.`;
console.log(message); // Szia, <b>Frontend</b>! Te vagy egy <b>fejlesztő</b>.

Így a sablon literálok rugalmasabbá teszik a szövegekkel való munkát JavaScript-ben, könnyebben érthetővé és elkerülik a bonyolultságokat, amelyek a sztringek összefűzésével kapcsolatosak a + szimbólummal.

Mi azok a sablon literálok és mire használják őket?