Introduzione
I template literals sono una delle funzionalità più comode di JavaScript moderno quando devi costruire stringhe leggibili, dinamiche e facili da mantenere. Di solito vengono citati per interpolare variabili o scrivere testo su più righe, ma c’è un uso molto pratico che spesso viene sottovalutato: generare markup o testo con elementi opzionali, come tag, badge, sezioni condizionali o blocchi informativi che compaiono solo in certe condizioni.
Questo scenario è comune in applicazioni reali: una card prodotto può mostrare un badge “Sconto” solo se il prezzo è ribassato, una mail HTML può includere un paragrafo extra solo se l’utente ha dato il consenso, oppure un report testuale può aggiungere note e avvisi solo quando servono. Con i template literals, tutto questo diventa più chiaro rispetto alla concatenazione tradizionale con +.
In questo tutorial vedremo come usare i template literals per costruire una stringa multilinea con contenuti condizionali, mantenendo il codice pulito e facile da estendere.
Codice completo
// Dati di esempio
const prodotto = {
nome: "Cuffie Bluetooth Pro",
prezzo: 79.9,
scontoPercentuale: 15,
disponibilita: true,
descrizione: "Cancellazione del rumore, autonomia fino a 30 ore."
};
const utente = {
nome: "Luca",
premium: true
};
// Funzione di utilità per formattare il prezzo
function formattaPrezzo(valore) {
return new Intl.NumberFormat("it-IT", {
style: "currency",
currency: "EUR"
}).format(valore);
}
// Costruzione di un blocco HTML con sezioni condizionali
const schedaProdotto = `
<article class="card prodotto">
<h2>${prodotto.nome}</h2>
<p class="prezzo">
${formattaPrezzo(prodotto.prezzo)}
${prodotto.scontoPercentuale
? `<strong class="badge sconto">-${prodotto.scontoPercentuale}%</strong>`
: ""}
</p>
<p class="descrizione">${prodotto.descrizione}</p>
${prodotto.disponibilita
? `
<p class="disponibile">Disponibile subito</p>
`
: `
<p class="non-disponibile">Non disponibile al momento</p>
`}
${utente.premium
? `
<div class="box-premium">
<p>Ciao ${utente.nome}, hai accesso alla spedizione prioritaria.</p>
</div>
`
: ""}
<ul class="azioni">
<li>Aggiungi al carrello</li>
<li>Salva nei preferiti</li>
${prodotto.disponibilita ? "<li>Acquista ora</li>" : ""}
</ul>
</article>
`;
console.log(schedaProdotto);Spiegazione
Il punto forte dei template literals è che ti permettono di scrivere stringhe su più righe senza usare caratteri di escape o concatenazioni difficili da leggere. Nel codice sopra, la variabile schedaProdotto contiene un blocco HTML costruito in modo dichiarativo: ogni parte della struttura è visibile, e le sezioni opzionali sono inserite con espressioni JavaScript dentro ${...}.
1. Interpolazione semplice
Le espressioni come ${prodotto.nome} e ${formattaPrezzo(prodotto.prezzo)} inseriscono direttamente valori dinamici nella stringa. Questo è utile per stampare informazioni aggiornate senza dover spezzare il testo in più pezzi.
2. Contenuti condizionali
La parte più interessante è questa:
${prodotto.scontoPercentuale
? `<strong class="badge sconto">-${prodotto.scontoPercentuale}%</strong>`
: ""}Qui usiamo l’operatore ternario per decidere se inserire il badge sconto. Se il valore esiste, il template literal interno produce il markup; altrimenti restituisce una stringa vuota. È una soluzione molto comune quando vuoi evitare blocchi if separati e mantenere il codice vicino al punto in cui viene usato.
3. Multilinea leggibile
Il blocco HTML è scritto su più righe, con una struttura simile a quella finale. Questo rende il codice più facile da leggere e da modificare. Se dovessi aggiungere un nuovo paragrafo o un nuovo pulsante, sapresti subito dove intervenire.
4. Sezioni opzionali annidate
Nel nostro esempio ci sono più condizioni: disponibilità del prodotto, stato premium dell’utente, presenza dello sconto. I template literals permettono di annidare porzioni di testo senza perdere chiarezza, soprattutto quando il contenuto condizionale è breve e ben delimitato.
5. Separazione tra formattazione e logica
La funzione formattaPrezzo usa Intl.NumberFormat, che è la scelta migliore per formattare valute e numeri in modo corretto in base alla lingua. In questo modo il template literal si occupa solo di comporre la stringa, mentre la logica di formattazione resta in una funzione dedicata.
Best practice
- Usa template literals per blocchi leggibili: sono perfetti quando la stringa contiene più righe o markup strutturato.
- Evita condizioni troppo complesse inline: se un ternario diventa lungo, spostalo in una variabile o in una funzione separata.
- Preferisci funzioni di supporto per formattazioni ripetute, come prezzi, date o etichette.
- Attenzione all’HTML non sanitizzato: se inserisci dati provenienti dall’utente, valuta sempre la sanitizzazione per evitare vulnerabilità XSS.
- Usa stringhe vuote con criterio: quando una sezione è opzionale, restituire
""è spesso la soluzione più semplice, ma verifica che non lasci spazi o righe inutili. - Se il template cresce troppo, spezzalo: puoi creare piccoli template intermedi per intestazione, corpo e footer, così il codice resta manutenibile.
Riepilogo
I template literals non servono solo a scrivere stringhe multilinea o a inserire variabili nel testo: sono anche uno strumento molto efficace per costruire contenuti condizionali in modo pulito e naturale. Questo approccio è particolarmente utile quando lavori con HTML generato lato client, email, report testuali o messaggi dinamici.
Nel tutorial abbiamo visto come:
- scrivere una stringa multilinea in modo leggibile;
- inserire dati dinamici con ${...};
- aggiungere o rimuovere blocchi di markup in base a condizioni;
- mantenere il codice ordinato separando formattazione e logica.
Se usati bene, i template literals migliorano molto la qualità del codice, soprattutto quando la stringa finale non è semplice testo, ma una struttura dinamica composta da parti opzionali.
Approfondisci con risorse ufficiali
- MDN Web Docs - Template literals: documentazione completa con esempi e dettagli sulla sintassi.
- MDN Web Docs - Intl.NumberFormat: utile per formattare numeri, valute e percentuali in modo corretto.
- JavaScript.info - Template literals: ottima risorsa didattica per approfondire interpolazione e multilinea.
- ECMAScript Language Specification: la specifica ufficiale per chi vuole capire il comportamento del linguaggio a livello formale.