Template Literals

Template Literals

I template literals (o template strings) sono una funzionalità introdotta con ES6 che rende il lavoro con le stringhe molto più leggibile e potente.

Sintassi base

Si usano i backtick invece delle virgolette:

const nome = "Giulia";
const messaggio = \`Ciao, \${nome}! Benvenuta.\`;
// "Ciao, Giulia! Benvenuta."

Interpolazione di espressioni

Dentro \${} puoi inserire qualsiasi espressione JavaScript valida:

const prezzo = 49.99;
const quantita = 3;
const totale = \`Totale: €\${(prezzo * quantita).toFixed(2)}\`;
// "Totale: €149.97"

Stringhe multi-riga

Con i template literals non servono più i caratteri di escape per andare a capo:

const html = \`
  <div class="card">
    <h2>\${titolo}</h2>
    <p>\${descrizione}</p>
  </div>
\`;

Questo è particolarmente utile per generare HTML dinamico o comporre query.

Tagged templates

Una funzionalità avanzata: puoi "taggare" un template literal con una funzione che ne elabora i pezzi:

function evidenzia(stringhe, ...valori) {
  return stringhe.reduce((risultato, str, i) => {
    const valore = valori[i] ? \`<strong>\${valori[i]}</strong>\` : "";
    return risultato + str + valore;
  }, "");
}

const output = evidenzia\`Ordine di \${nome}: \${quantita} pezzi\`;

I tagged templates sono usati da librerie come styled-components e GraphQL.