Ce sunt literalurile de șablon și pentru ce sunt…

Literalele de șablon, cunoscute și sub denumirea de șiruri de șablon, sunt un zahăr sintactic în JavaScript care permite încorporarea expresiilor în șiruri folosind backticks (``).

Ele sunt utilizate pentru:

Interpolarea mai convenabilă a variabilelor și expresiilor în șiruri:

const name = "Lume";
const greeting = `Salut, ${name}!`; // Încorporarea variabilei
console.log(greeting); // Salut, Lume!

const sum = 2 + 3;
const result = `Sumă: ${sum}.`; // Încorporarea expresiei
console.log(result); // Sumă: 5.

Crearea de șiruri multilini fără a folosi caracterul de salt de linie (\n):

const multilineString = `
Acesta
este
un
șir
multiliniar.
`;
console.log(multilineString);

Construirea de expresii de șiruri complexe, precum căi către fișiere sau interogări SQL, cu o mai mare lizibilitate:
```
const userId = 123;
const query = `SELECT * FROM users WHERE id = ${userId}`;
console.log(query);
```

Utilizarea șabloanelor etichetate (tagged templates) pentru funcționalitate extinsă: Șabloanele etichetate permit apelarea unei funcții cu un literal de șablon. Primul argument al funcției este un array de părți de șiruri, iar argumentele următoare sunt valorile expresiilor interpolate.

function highlight(strings, ...values) {
  let str = '';
  strings.forEach((string, i) => {
    str += string;
    if (values[i]) {
      str += `<b>${values[i]}</b>`; // De exemplu, evidențiere în bold
    }
  });
  return str;
}

const user = "Frontend";
const role = "dezvoltator";
const message = highlight`Salut, ${user}! Ești un ${role}.`;
console.log(message); // Salut, <b>Frontend</b>! Ești un <b>dezvoltator</b>.

Astfel, literalurile de șablon fac ca lucrul cu șirurile în JavaScript să fie mai flexibil, mai ușor de înțeles și evită complexitățile legate de concatenarea șirurilor cu simbolul +.

Ce sunt literalurile de șablon și pentru ce sunt folosite?