Template String

Una delle novità più interessanti introdotte dalle specifiche ECMAScript 2015 è senza dubbio l'introduzione delle template string, cioè di una sintassi avanzata per la composizione di stringhe complesse.

Presto o tardi a tutti capita di creare stringhe che abbiano parti fisse e parti variabili e la cui composizione deve essere fatta a runtime. Ci riferiamo a codice analogo al seguente:

var messaggio = "Attenzione!\nIl valore inserito " + valore + " non è valido perché esso deve essere compreso tra " + valoreIniziale + " e " + valoreFinale + ".\nSi prega di riprovare.";

La variabile messaggio dell'esempio viene costruita concatenando una serie di stringhe e variabili, all'interno delle quali sono anche presenti dei ritorno a capo (\n) necessari per rendere più leggibile il risultato finale. La composizione della stringa finale non è così agevole e la probabilità di dimenticare uno spazio o di commettere qualche altro errore di composizione non è da trascurare.

Le template string permettono di risolvere i problemi di composizione di una stringa complessa con estrema semplicità ed eleganza. Una template string è una sequenza di caratteri delimitata da backtick (`) al posto di singoli o doppi apici. Il seguente è un esempio di template string minimale:

var messaggio = `Questo è un messaggio!`;

Nota: Il layout delle tastiere italiane non prevede il backtick, per ottenerlo dovremo utilizzare la combinazione ALT + 96. In altre parole bisogna digitare il numero 96 tenendo premuto il tasto ALT.

Naturalmente, così come viene utilizzata nell'esempio precedente, la template string non offre alcun vantaggio rispetto ad una stringa standard. Per sfruttarne a pieno le potenzialità possiamo ricorrere all'interpolazione, cioè all'inserimento di espressioni definite tramite la sintassi:

${espressione}

Riprendendo l'esempio di concatenazione di stringhe visto prima, possiamo riscriverla utilizzando una template string nel seguente modo:

var messaggio = `Attenzione!\nIl valore inserito ${valore} non è valido perché esso deve essere compreso tra ${valoreIniziale} e ${valoreFinale}.\nSi prega di riprovare.`;

Come possiamo vedere, la definizione della stringa risultante risulta meno macchinosa e meno soggetta a errori rispetto alla concatenazione di stringhe. Ma possiamo fare di più:

var messaggio = `Attenzione!
Il valore inserito ${valore} non è valido perché esso deve essere compreso tra ${valoreIniziale} e ${valoreFinale}.
Si prega di riprovare.`;

I ritorni a capo inseriti all'interno di una template string vengono mantenuti consentendo di creare stringhe multilinea in maniera molto naturale, senza bisogno di ricorrere al carattere \n.

Naturalmente all'interno di una template string possiamo inserire una qualsiasi espressione, non soltanto semplici variabili, come mostrato dal seguente esempio:

var somma = `La somma di ${a} e ${b} è ${a+b}`;

Tagged Template String

Per elaborazioni avanzate possiamo utilizzare le tagged template string. Sintatticamente esse si presentano come una normale template string preceduta da un prefisso (tag) scelto dallo sviluppatore, come nell'esempio seguente:

var somma = maiuscolo`La somma di ${a} e ${b} è ${a+b}`;

In questo esempio il tag maiuscolo indica che sulla template string sarà effettuata una elaborazione definita da una funzione con lo stesso nome. Infatti, il nome del tag corrisponde a una funzione, cui viene passato come primo parametro un array contenente le sottostringhe costanti, risultanti dallo split della template string e come parametri successivi le espressioni in essa contenute. Il seguente è un esempio di funzione che implementa il tag maiuscolo:

function maiuscolo(strings, a, b, c) {
	return (`${strings[0]}${a}${strings[1]}${b}${strings[2]}${c}`).toUpperCase();
}

Essa converte in maiuscolo la stringa risultante dalla interpolazione.

Come possiamo notare, il primo parametro della funzione rappresenta un array di stringhe, ciascuna rappresentante la sottostringa della template string che separa due espressioni. Ad essere precisi l'array conterrebbe quattro stringhe, dal momento che nel nostro caso l'ultimo elemento è rappresentato da una stringa vuota.

strings:Array[4]
0: "La somma di "
1: " e "
2: " è "
3: ""

Il risultato dell'applicazione della tagged template string sarà la trasformazione della stringa in maiuscolo.

Encoding delle URL con le template string

La possibilità di modificare l'output di una template string tramite un tag si presta a diverse applicazioni. A titolo d'esempio delle sue potenzialità riportiamo la seguente funzione che implementa un tag che assicura la validità nella costruzione di un URL:

function safeUrl(strings, protocol, params) {
	return `${protocol}${strings[1]}${encodeURIComponent(params)}`;
}
var protocol = "http";
var params = "a:b";
console.log(safeUrl`${protocol}://www.html.it/page?x=${params}`);