Template Strings

Chi come me ha seguito la recente evoluzione di JavaScript, avrà sicuramente notato le molteplici novità introdotte in questo linguaggio che man mano sta guadagnando sempre l’attenzione di più developers. Tra le tante, una delle più importanti è quella delle template strings (o template literals), vediamo cosa sono.

Un nuovo modo di comporre le stringhe

In JavaScript, l’unico modo per poter includere variabili e/o espressioni in generale all’interno delle stringhe, era questo:

let name = "Giacomo";
let num1 = 2, num2 = 2;
let myString = "Il mio nome è " + name + "\n e " + num1 + " + " + num2 + " fa " + parseInt(num1 + num2);

Già da questa piccola porzione di codice è facile notare come la sintassi sia verbosa e, per utilizzare due termine inglesi appropriati, “cluttered and bloated ” e sono sicuro che se avete lavorato in un progetto complesso o comunque in una porzione di codice in cui fossero presenti delle stringhe particolari, avrete notato come il contenuto di quest’ultime diventi poco chiaro e posizionare correttamente gli apici diventa un incubo. Proprio per questo motivo sono nate le template strings che, rifattorizzando l’esempio di sopra, risultano in questo modo:

let name = "Giacomo";
let num1 = 2, num2 = 2;
let myString = `Il mio nome è ${name}
${num1} + ${num2} fa ${num1+num2}`;

Bisogna porre particolare attenzione al carattere di inizio e fine stringa che, piuttosto che essere una single quote: ', è un backtick: ` (Alt + 96).
Come è facile vedere la sintassi risulta molto più pulita e dove non è più necessario il “+” per concatenare le stringhe, lo diventano le parentesi graffe che permettono l’inserimento delle espressioni.
Altra cosa che ci è permesso di fare è il calcolo di espressioni aritmetiche senza la necessità di effettuare il cast al tipo di cui necessitiamo, infine l’a capo inserito si riverserà sulla stringa diventando un vero e proprio carattere di nuova linea “\n“.

Alcuni esempi

In realtà, quanto appena visto, non comprende tutte le nuove funzionalità aggiuntive che porta con sé questo nuovo tipo di sintassi. Di seguito sono listati due esempi affiancati da delle brevi descrizioni:

let myString = `Posso andare a capo durante la definizione di una stringa\
per rendere il codice più pulito, senza però aggiungere implicitamente
il carattere "\n" di new line`

La stringa commenta di per sé il codice. Questo è reso possibile grazie al carattere di escape “\” che annulla il “\n” implicito delle template strings.

var a = 5;
var b = 10;

function tag(strings, ...values) {
  console.log(strings[0]); // "Ciao "
  console.log(strings[1]); // " mondo "
  console.log(values[0]);  // 15
  console.log(values[1]);  // 50

  return "Bazinga!";
}

tag`Ciao ${ a + b } mondo ${ a * b }`;
// "Bazinga!"

Questo piccolo pezzetto di codice preso dalla doc di mozilla non fa altro che mostrare l’utilizzo delle funzioni “Tag”.
Sostanzialmente definendo una funzione (necessariamente non anonima) con un qualunque tipo di ritorno, è possibile utilizzarla referenziandola subito prima dell’inizio di una template string. Questa funzione accetta in input un parametro di tipo array (che diventano due attraverso l’object destructuring) che contiene il testo puro e le espressioni inserite attraverso il dollaro. Dopo le manipolazioni che si vogliono effettuare, si piazza il dato in ritorno che diventerà il valore della stringa.

Questo è tutto per oggi. Spero apprezzerete la potenza di questo nuovo strumento che può portarvi molti benefici nella scrittura del vostro codice.