JavaScript Template Literals e multilinea: interpolazione di espressioni in modo pulito

by Anastasia P.
Add as preferred source on Google
SHARE
JavaScript Template Literals e multilinea: interpolazione di espressioni in modo pulito
© Guida-HTML5.it

Introduzione

I template literals sono una delle funzionalità più utili di JavaScript moderno quando devi costruire stringhe leggibili, dinamiche e facili da mantenere. Sono particolarmente comodi quando il testo contiene più righe oppure quando vuoi inserire valori calcolati senza concatenare pezzi di stringa con il simbolo +.

In questo tutorial ci concentriamo su un sotto-argomento molto pratico: l’interpolazione di espressioni dentro i template literals, cioè l’uso di ${...} per inserire valori, calcoli e risultati di funzioni direttamente nel testo. Questo approccio è ideale per costruire messaggi, email testuali, output per log, anteprime di contenuti o blocchi di testo generati dal codice.

Vedrai come scrivere stringhe multilinea in modo naturale, come includere variabili e funzioni, e come evitare errori comuni che spesso compaiono con la concatenazione tradizionale.

Codice completo

// Dati di esempio
const utente = {
  nome: "Giulia",
  cognome: "Rossi",
  ruolo: "Frontend Developer",
  progettiCompletati: 12,
  oreFormazione: 38
};

const corso = {
  titolo: "JavaScript Avanzato",
  durataOre: 24,
  prezzo: 149
};

// Funzione di supporto per formattare il prezzo
function formatCurrency(euro) {
  return new Intl.NumberFormat("it-IT", {
    style: "currency",
    currency: "EUR"
  }).format(euro);
}

// Funzione di supporto per calcolare una percentuale
function completamentoFormazione(ore, obiettivo) {
  return Math.round((ore / obiettivo) * 100);
}

// Template literal multilinea con interpolazione
const messaggio = `
Ciao ${utente.nome} ${utente.cognome},

abbiamo aggiornato il tuo profilo professionale:
- Ruolo: ${utente.ruolo}
- Progetti completati: ${utente.progettiCompletati}
- Ore di formazione: ${utente.oreFormazione}

Dettagli del corso consigliato:
- Corso: ${corso.titolo}
- Durata: ${corso.durataOre} ore
- Prezzo: ${formatCurrency(corso.prezzo)}

Obiettivo formazione: ${completamentoFormazione(utente.oreFormazione, 50)}% completato

Grazie per continuare a migliorare le tue competenze!
`;

console.log(messaggio);

// Esempio più breve: una riga con calcolo inline
const riepilogo = `Totale spesa: ${formatCurrency(corso.prezzo * 2)}`;
console.log(riepilogo);

Spiegazione

La sintassi dei template literals usa i backtick, cioè il carattere `, al posto delle virgolette singole o doppie. Questo cambia il modo in cui JavaScript interpreta la stringa:

  • puoi andare a capo direttamente nel testo;
  • puoi inserire variabili ed espressioni con ${...};
  • puoi richiamare funzioni dentro la stringa;
  • il codice diventa più leggibile rispetto a concatenazioni lunghe.

Nel codice di esempio, la variabile messaggio contiene un testo multilinea. Ogni volta che scrivi ${utente.nome} o ${corso.titolo}, JavaScript valuta l’espressione e inserisce il risultato nel testo finale.

La parte più interessante è che dentro ${...} non sei limitato a una semplice variabile. Puoi inserire:

  • un valore diretto, come ${utente.ruolo};
  • un’operazione matematica, come ${corso.prezzo * 2};
  • una funzione, come ${formatCurrency(corso.prezzo)};
  • un’espressione più complessa, purché sia valida JavaScript.

Questo rende i template literals molto utili quando devi generare testo dinamico. Per esempio, in un pannello amministrativo puoi costruire un report leggibile senza spezzare il codice in tante concatenazioni:

const report = `
Utente: ${utente.nome} ${utente.cognome}
Ruolo: ${utente.ruolo}
Accessi stimati: ${utente.progettiCompletati * 3}
`;

Un altro vantaggio importante è la gestione della spaziatura. Con le stringhe tradizionali, il testo multilinea richiede spesso il carattere n per andare a capo. Con i template literals, invece, il testo scritto nel codice corrisponde in modo naturale al testo generato in output.

Attenzione però a un dettaglio: gli spazi e le indentazioni che scrivi dentro il template fanno parte della stringa finale. Se allinei il testo con rientri troppo profondi, quei rientri compariranno anche nell’output. Questo è utile in alcuni casi, ma va controllato quando il testo deve essere preciso, per esempio in email testuali o log.

Best practice

  • Usa i template literals quando il testo è dinamico: se devi inserire variabili, calcoli o funzioni, sono più chiari della concatenazione.
  • Evita espressioni troppo complesse dentro ${...}: se la logica cresce, spostala in una variabile o in una funzione dedicata.
  • Controlla gli spazi iniziali nelle stringhe multilinea: un rientro sbagliato può alterare l’output finale.
  • Usa funzioni di formattazione: per date, valute o numeri, meglio delegare a funzioni come Intl.NumberFormat o Intl.DateTimeFormat.
  • Non usare template literals per HTML non sanificato: se inserisci dati provenienti dall’utente in markup, verifica sempre la sicurezza per evitare problemi di injection.

Un buon approccio è separare la logica dal testo. Per esempio, calcola prima i valori necessari e poi usali nel template:

const totale = corso.prezzo * 2;
const prezzoFormattato = formatCurrency(totale);

const testo = `
Hai acquistato 2 corsi.
Totale: ${prezzoFormattato}
`;

In questo modo il template resta pulito e più facile da leggere. È una pratica particolarmente utile in progetti reali, dove il codice deve essere mantenuto da più persone.

Riepilogo

I template literals sono uno strumento essenziale in JavaScript moderno per costruire stringhe multilinea e inserire valori dinamici in modo elegante. Il punto forte di questa funzionalità è l’interpolazione con ${...}, che ti permette di unire testo, variabili, calcoli e funzioni senza perdere leggibilità.

Ricorda i concetti chiave:

  • usa i backtick ` per creare template literals;
  • scrivi testo su più righe senza n;
  • inserisci dati dinamici con ${...};
  • mantieni le espressioni semplici e leggibili;
  • controlla sempre spazi e indentazione nell’output finale.

Se lavori spesso con messaggi, report, log o contenuti generati, questa tecnica ti farà risparmiare tempo e renderà il codice molto più ordinato rispetto alla concatenazione tradizionale.

Approfondisci con risorse ufficiali

  • MDN Web Docs - Template literals: documentazione completa e aggiornata sulla sintassi e sugli usi avanzati.
  • MDN Web Docs - String: utile per approfondire il comportamento delle stringhe in JavaScript.
  • ECMAScript Language Specification: la specifica ufficiale del linguaggio, per chi vuole vedere il comportamento definito standard.
  • MDN Web Docs - Intl.NumberFormat: perfetto per formattare valute e numeri nei template.
  • MDN Web Docs - Intl.DateTimeFormat: utile per inserire date formattate in stringhe dinamiche.

Add as preferred source on Google
SHARE