Template literals: interpolazione, tagged templates, multiline

Costruire una stringa con "Ciao " + nome + ", hai " + eta + " anni" funziona, ma è scomodo da leggere e facile da sbagliare (spazi dimenticati, parentesi fuori posto). MDN definisce i template literals, racchiusi da backtick ` invece delle virgolette, come letterali che permettono stringhe multilinea, interpolazione di espressioni, e costrutti speciali chiamati tagged template.

1. Interpolazione: ${espressione} dentro la stringa

Il segnaposto ${espressione} può contenere qualunque espressione JavaScript valida, non solo una variabile, ma anche chiamate di funzione, operazioni, condizioni.

const nome = "Ada";
const eta = 36;

const saluto = `Ciao ${nome}, hai ${eta} anni`;

const doppia = `Il doppio e' ${eta * 2}`;

const condizionale = `Sei ${eta >= 18 ? "maggiorenne" : "minorenne"}`;

Fonte: MDN Web Docs, «Template literals»: le espressioni nei segnaposto e il testo tra di essi vengono passati a una funzione, di default una che concatena il tutto in un'unica stringa. 

2. Stringhe multilinea, senza \n

Qualsiasi ritorno a capo scritto direttamente nel codice sorgente diventa parte della stringa. Niente più concatenazioni con \n o + per andare a capo.

const messaggio = `
Prima riga
Seconda riga
Terza riga
`;

console.log(messaggio);

// Prima riga
// Seconda riga
// Terza riga

3. Tagged templates: una funzione che processa il template

Il costrutto più avanzato: anteponendo il nome di una funzione al template, quella funzione decide cosa fare con le parti statiche del testo e con le espressioni interpolate, invece del comportamento predefinito di concatenare tutto.

function evidenzia(strings, ...valori) {
    return strings.reduce((risultato, str, i) => {
        const valore = valori[i]
            ? `**${valori[i]}**`
            : '';

        return risultato + str + valore;
    }, '');
}

const nome = "Ada";

evidenzia`Ciao ${nome}, benvenuta!`;

// "Ciao **Ada**, benvenuta!"

Il primo argomento della funzione tag è l'array delle parti di testo, gli argomenti successivi sono i valori interpolati, in ordine. Il caso d'uso reale più diffuso: librerie che processano il template per sanificare input destinato a HTML o SQL, o per costruire linguaggi dedicati (DSL) come CSS in JS.

4. Bonus: String.raw e le sequenze grezze

String.raw è una tag function integrata che restituisce la stringa senza processare le sequenze di escape (\n, \t), utile per percorsi Windows o espressioni regolari, dove il backslash ha un significato diverso da quello di JavaScript.

console.log(`Prima riga\nSeconda riga`);

// Prima riga
// Seconda riga
// Il \n è interpretato come a capo

console.log(String.raw`Prima riga\nSeconda riga`);

// Prima riga\nSeconda riga
// Il \n resta testo letterale

In sintesi

I template literal non sono solo stringhe più comode da scrivere: le tagged template aprono la porta a strumenti seri, sanificazione automatica, DSL, syntax highlighting per linguaggi embedded, restando comunque JavaScript puro, senza nessuna sintassi speciale da imparare a parte i backtick.