JavaScript ES6+: introdurre i template literal e le string interpolation

Introduzione

Quando si parla di ES6+, spesso si pensa subito a classi, arrow function, moduli o async/await. Ma una delle novità più utili, pratiche e usate ogni giorno è rappresentata dai template literal, cioè le stringhe delimitate dai backtick ` invece che dagli apici semplici o doppi.

I template literal hanno cambiato il modo di costruire stringhe in JavaScript perché permettono di:

inserire variabili dentro una stringa in modo leggibile;
scrivere stringhe multilinea senza concatenazioni complicate;
costruire testi dinamici più chiari e manutenibili;
creare output HTML, messaggi, log e URL in modo più pulito.

Questo argomento è molto utile sia per chi sta iniziando con ES6+, sia per chi vuole migliorare la qualità del codice. In un progetto reale, i template literal riducono il rischio di errori, rendono il codice più compatto e aiutano a leggere meglio il flusso dei dati.

Codice completo

// Esempio pratico: generazione di un profilo utente e di un messaggio dinamico

const nome = "Luca";
const ruolo = "Frontend Developer";
const anniEsperienza = 4;
const linguaggi = ["JavaScript", "TypeScript", "HTML", "CSS"];

// Stringa tradizionale con concatenazione
const messaggioVecchio =
  "Ciao " + nome + ", lavori come " + ruolo + " da " + anniEsperienza + " anni.";

console.log(messaggioVecchio);

// Template literal con interpolazione
const messaggioNuovo = `Ciao ${nome}, lavori come ${ruolo} da ${anniEsperienza} anni.`;

console.log(messaggioNuovo);

// Stringa multilinea
const profiloHTML = `
  <section class="profilo">
    <h2>${nome}</h2>
    <p>Ruolo: ${ruolo}</p>
    <p>Esperienza: ${anniEsperienza} anni</p>
    <p>Competenze: ${linguaggi.join(", ")}</p>
  </section>
`;

console.log(profiloHTML);

// Funzione che costruisce una scheda prodotto
function creaSchedaProdotto(nomeProdotto, prezzo, disponibile) {
  const stato = disponibile ? "Disponibile" : "Non disponibile";
  
  return `
    <article class="prodotto">
      <h3>${nomeProdotto}</h3>
      <p>Prezzo: €${prezzo.toFixed(2)}</p>
      <p>Stato: ${stato}</p>
    </article>
  `;
}

const scheda = creaSchedaProdotto("Mouse wireless", 29.99, true);
console.log(scheda);

// Template literal con espressioni JavaScript
const a = 10;
const b = 5;

const risultato = `La somma di ${a} e ${b} è ${a + b}.`;
console.log(risultato);

// Template literal per log più leggibili
function logEvento(utente, azione) {
  const ora = new Date().toLocaleTimeString();
  console.log(`[${ora}] ${utente} ha eseguito: ${azione}`);
}

logEvento("Luca", "login");
logEvento("Luca", "apertura dashboard");

Spiegazione

Il punto centrale dei template literal è semplice: invece di usare apici singoli o doppi, si usano i backtick. All’interno della stringa, le espressioni JavaScript si inseriscono con la sintassi ${...}. Questa tecnica si chiama interpolazione.

1. Concatenazione tradizionale vs template literal

Prima di ES6, per unire testo e variabili si usava spesso il simbolo +. Funziona, ma diventa scomodo quando la stringa cresce. Nel codice classico, il rischio è creare espressioni lunghe, difficili da leggere e da correggere.

Con i template literal, invece, il testo risulta più naturale:

si legge come una frase normale;
si vede subito dove entrano i dati dinamici;
si riduce il rumore visivo della concatenazione.

2. Interpolazione di espressioni

Dentro ${...} non puoi inserire solo variabili, ma anche espressioni complete. Questo significa che puoi fare calcoli, chiamare funzioni e usare metodi sugli oggetti o sugli array.

Per esempio:

${a + b} calcola una somma;
${prezzo.toFixed(2)} formatta un numero;
${linguaggi.join(", ")} trasforma un array in una lista leggibile.

Questa flessibilità rende i template literal molto adatti alla costruzione di interfacce, messaggi di sistema, email automatiche e contenuti dinamici.

3. Stringhe multilinea

Un altro vantaggio fondamentale è la possibilità di scrivere stringhe su più righe senza usare caratteri di escape o concatenazioni complesse. Questo è particolarmente utile quando si genera HTML, testo formattato o messaggi lunghi.

Nel codice dell’esempio, la variabile profiloHTML contiene una struttura HTML completa. Con le stringhe tradizionali, la stessa cosa sarebbe molto più verbosa e difficile da leggere.

4. Uso in funzioni reali

La funzione creaSchedaProdotto mostra uno scenario concreto: riceve dati e restituisce una scheda HTML. Questo approccio è comune in applicazioni frontend, generatori di contenuti e piccoli componenti UI.

Il vantaggio è che la funzione diventa più chiara: prende parametri, li formatta e restituisce il risultato. Non ci sono concatenazioni sparse o stringhe spezzate in modo confuso.

Best practice

Usa i template literal quando devi combinare testo e dati dinamici. Sono più leggibili della concatenazione con +.
Preferiscili per stringhe multilinea. Se il testo supera una riga, i backtick migliorano molto la manutenzione.
Non abusare di logiche troppo complesse dentro ${...}. Se l’espressione diventa lunga, spostala in una variabile prima della stringa.
Formatta i dati prima di inserirli nella stringa. Ad esempio, usa toFixed(), join() o funzioni dedicate per rendere il testo più pulito.
Attenzione all’HTML dinamico. Se inserisci dati provenienti dall’utente, valida e sanitizza sempre il contenuto per evitare problemi di sicurezza come XSS.
Usa nomi di variabili chiari. Nei template literal la leggibilità dipende anche dalla qualità dei dati che stai interpolando.

Un errore comune è scrivere template literal molto lunghi con troppe espressioni annidate. In questi casi il codice perde chiarezza. La regola pratica è: se una stringa diventa difficile da leggere, probabilmente conviene dividere la logica in più passaggi.

Riepilogo

I template literal sono una delle novità più utili introdotte con ES6. Permettono di scrivere stringhe in modo più moderno, pulito e flessibile. Grazie all’interpolazione con ${...}, puoi inserire variabili ed espressioni direttamente nel testo. Inoltre, le stringhe multilinea semplificano la costruzione di contenuti complessi, come HTML, messaggi di log o testi dinamici.

In pratica, questo significa codice più leggibile, meno concatenazioni e meno errori. Se stai iniziando a usare ES6+, imparare bene i template literal è un passo fondamentale perché li userai continuamente in progetti reali.

Più leggibilità rispetto alla concatenazione classica.
Supporto nativo per stringhe multilinea.
Interpolazione di variabili ed espressioni.
Molto utili in frontend, logging e generazione di contenuti.

Approfondisci con risorse ufficiali

MDN Web Docs - Template literals: documentazione completa e chiara sulla sintassi e sugli esempi pratici.
MDN Web Docs - JavaScript Guide: ottimo punto di partenza per ripassare le basi e le novità di ES6+.
ECMAScript Language Specification: la specifica ufficiale per chi vuole approfondire il comportamento del linguaggio.
JavaScript.info: guida molto pratica con spiegazioni progressive e casi d’uso reali.

Add as preferred source on Google