Introduzione
Quando un programma deve costruire messaggi, riepiloghi o frammenti di interfaccia a partire da dati variabili, concatenare stringhe con l’operatore + può diventare poco leggibile. JavaScript offre una soluzione più chiara attraverso i template literal, stringhe delimitate dal carattere backtick (`) che permettono di inserire espressioni direttamente nel testo.
I template literal sono utili, per esempio, per generare il riepilogo di un ordine, comporre messaggi personalizzati o costruire query testuali. Inoltre supportano i testi su più righe senza dover inserire manualmente caratteri di ritorno a capo.
Un livello più avanzato è rappresentato dalle tagged template, funzioni speciali che ricevono separatamente il testo statico e i valori dinamici. Questa tecnica consente di creare formattatori riutilizzabili, applicare trasformazioni e, soprattutto, gestire correttamente l’escape dei dati quando si produce HTML.
Codice completo
Il seguente esempio costruisce un riepilogo di un ordine usando un template literal e una funzione tagged template per rendere sicuri i valori inseriti in un frammento HTML.
const ordine = {
cliente: "Luca & Figli",
prodotto: "Tastiera meccanica",
quantita: 2,
prezzo: 79.90
};
// Template literal tradizionale
const riepilogo = `
Ordine di: ${ordine.cliente}
Prodotto: ${ordine.prodotto}
Quantità: ${ordine.quantita}
Totale: ${(ordine.quantita * ordine.prezzo).toFixed(2)} €
`;
console.log(riepilogo);
// Escape dei caratteri potenzialmente problematici
function escapeHtml(valore) {
return String(valore)
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll(´"´, """)
.replaceAll("´", "'");
}
// Tagged template per creare HTML più sicuro
function html(strings, ...values) {
return strings.reduce((risultato, testo, indice) => {
const valore = values[indice - 1];
if (indice === 0) {
return testo;
}
return risultato + escapeHtml(valore) + testo;
});
}
const contenuto = html`
<article class="ordine">
<h2>Ordine di ${ordine.cliente}</h2>
<p>Prodotto: ${ordine.prodotto}</p>
<p>Quantità: ${ordine.quantita}</p>
<p>Totale: ${(ordine.quantita * ordine.prezzo).toFixed(2)} €</p>
</article>
`;
console.log(contenuto);Spiegazione
Interpolazione delle espressioni
All’interno di un template literal, ogni espressione racchiusa tra ${...} viene valutata da JavaScript. È possibile inserire variabili, operazioni matematiche, chiamate di funzione e anche condizioni semplici.
const nome = "Sara";
const punti = 125;
const messaggio = `Ciao ${nome}, hai ottenuto ${punti + 25} punti!`;
console.log(messaggio);Il risultato sarà una normale stringa. L’espressione viene convertita automaticamente in testo. È comunque consigliabile evitare di inserire logica complessa direttamente nel template: calcolare prima i valori rende il codice più facile da leggere e testare.
Testi su più righe
Un template literal mantiene gli spazi e gli a capo presenti nel codice sorgente. Questa caratteristica è utile per messaggi multilinea e contenuti strutturati.
const istruzioni = `
1. Aggiungi un prodotto al carrello.
2. Controlla la quantità.
3. Conferma l´ordine.
`;
console.log(istruzioni);Bisogna però prestare attenzione all’indentazione: gli spazi inseriti nel sorgente diventano parte della stringa finale.
Come funziona una tagged template
Una tagged template applica una funzione a una stringa speciale. La funzione riceve due elementi principali:
- strings: un array contenente i segmenti statici del testo;
- values: i valori dinamici inseriti tra i segmenti statici.
Per esempio, in html`Ciao ${nome}!`, il testo statico è diviso prima e dopo il valore di nome. La funzione può quindi decidere come trasformare ogni valore prima di inserirlo nel risultato finale.
Nell’esempio completo, escapeHtml sostituisce alcuni caratteri speciali con le relative entità HTML. Se un utente inserisse un valore contenente codice HTML o JavaScript, tale contenuto verrebbe trattato come testo e non come markup eseguibile.
Best practice
- Preferisci i template literal alla concatenazione: il codice è più leggibile e gli errori di spaziatura sono meno frequenti.
- Calcola prima i valori complessi: assegna a variabili i risultati di operazioni o funzioni elaborate.
- Non inserire dati non attendibili direttamente nell’HTML: usa una funzione di escape oppure una libreria affidabile.
- Separa dati e presentazione: una tagged template può occuparsi della formattazione, mentre la logica applicativa prepara i dati.
- Ricorda che l’escape dipende dal contesto: il modo corretto di proteggere un valore HTML non è necessariamente adatto a un attributo, a una URL o a una query SQL.
- Usa funzioni pure quando possibile: una funzione che restituisce sempre lo stesso testo per gli stessi input è più semplice da verificare.
È importante distinguere l’escape dall’uso di textContent. Quando si deve aggiornare il testo di un elemento già esistente, spesso è più sicuro utilizzare elemento.textContent = valore invece di costruire HTML manualmente con innerHTML.
Riepilogo
I template literal rendono semplice creare stringhe dinamiche, includere espressioni e mantenere una formattazione multilinea leggibile. La sintassi ${...} è adatta alla maggior parte dei casi quotidiani.
Le tagged template aggiungono un livello di controllo superiore: una funzione può ricevere il testo statico e i valori dinamici separatamente, applicando trasformazioni personalizzate. Questo approccio è particolarmente utile per formattatori, generatori di markup e sistemi che devono proteggere i dati prima della visualizzazione.
La regola fondamentale è non confondere comodità e sicurezza: inserire una variabile in un template è semplice, ma quando il risultato viene interpretato come HTML occorre sempre gestire correttamente i dati esterni.
Approfondisci con risorse ufficiali
- MDN Web Docs – Template literals: documentazione completa su interpolazione, stringhe multilinea e sintassi dei template literal.
- MDN Web Docs – Tagged templates: riferimento per comprendere il funzionamento delle funzioni tag e dei valori ricevuti.
- MDN Web Docs – String: panoramica dei metodi disponibili per lavorare con le stringhe JavaScript.
- OWASP – Cross Site Scripting Prevention Cheat Sheet: linee guida ufficiali per evitare vulnerabilità XSS quando si generano contenuti HTML.