Categorie
Javascript Programmazione

{JS} Template String

Una delle novità più interessanti introdotte da ECMAScript 2015 è l’introduzione delle template string, sintassi avanzata per la composizione di stringhe complesse.

La costruzione di un messaggio, come quello che segue, che include variabili e opportune modifiche di visualizzazione, prevede diverse regole di sintassi abbastanza sofisticate che lasciano ampi spazi a possibili errori.

var messaggioErrore = "Errore!\nIl valore inserito " + valore + " non è valido deve essere compreso tra " + valoreMinore + " e " + valoreMaggiore + ".\nRiprova.";

La sintassi del messaggio d’errore prevede l’ultilizzo di: (” “) doppi apici per i valori testuali, \n per il ritorno a capo utilizzato per una maggiore leggibilità oltre ai vari simboli (+) per la concatenazione di tutti gli elementi, variabili e altri elementi testuali, che compongono lo stesso messaggio.

Le template string permettono di risolvere i problemi di composizione di una stringa complessa con estrema semplicità.

 Una template string è una sequenza di caratteri delimitata da backtick (`) che sostituiscono la marea di doppi apici (” “).

Note: per ottenere il backtick utilizzeremo ALT + 96

Per sfruttarne a pieno le potenzialità possiamo ricorrere all’interpolazione, cioè all’inserimento di espressioni/variabili definite tramite la sintassi:
${variabile}

Otterremo cosi già un enorme semplificazione della struttura del messaggio:

var messaggioErrore = `Errore!\nIl valore inserito ${valore} non è valido deve essere compreso tra ${valoreMinore} e ${valoreMaggiore}.\nRiprova.`;

I ritorni a capo inseriti all’interno di una template string vengono mantenuti consentendo di creare stringhe che si sviluppano su più righe in maniera molto naturale e senza ricorrere al carattere \n

var messaggioErrore = `Errore!
Il valore inserito ${valore} non è valido deve essere compreso tra ${valoreMinore} e ${valoreMaggiore}.
Riprova.`;

All’interno di una template string è possibile inserire una qualsiasi espressione e non soltanto semplici variabili

var messaggioRisultato = `Il risultato della somma di ${primoValore} + ${secondoValore} è: ${primoValore + secondoValore}.`;

Tagged Template String

Il tagged template string, come dice la stessa parola è un tag; esso viene posto prima della definizione della stringa stessa e serve per “agganciare” una funzione che dovrà essere eseguita sulla stringa.
Unica regola da seguire è che il tag e la funzione dovranno avere lo stesso nome.

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

All’interno dei parametri della funzione “tuttoMaiuscolo” abbiamo “strings” che suddivide “messaggioRisultato” in un array di sottostringhe (3 per l’esattezza) che successivamente richiameremo nel comando return con gli indici progressivi (0,1,2); mentre a,b,c rappresentano le variabili contenute nella stringa da trasformare

var primoValore = 10;
var secondoValore = 10;

var messaggioRisultato =  tuttoMaiuscolo `Il risultato della somma di ${primoValore} più ${secondoValore} è: ${primoValore + secondoValore}.`;
document.write(messaggioRisultato);

Il nome del tag templete string, che coincide con il nome della funzione è posto prima della definizione della stringa stessa.
Otterremo cosi che la stringa sarà tutta scritta in maiuscolo.

La possibilità di modificare l’output di una template string tramite un tag si presta a diverse applicazioni.
L’esempio seguente mostra una funzione che implementa un tag che assicura la validità nella costruzione di un URL:

function controlloUrl(strings, protocollo, parametri) {
	return `${protocollo}${strings[1]}${encodeURIComponent(parametri)}`;
}
var protocollo = "https";
var parametri= "a:b";
document.write(controlloUrl`${protocollo}://www.cinquepuntozero.it/pagina?x=${parametri}`);

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *