08-02-2021 - Frontend

Tutorial Javascript: Template Literals, Tagged Template Literals & Pipe Function

Quando uscì ES6 una delle cose più interessanti in assoluto furono i Template Literals, un nuovo modo di comporre le stringhe. Ormai non sono più una novità e sono sempre più apprezzati da tutti gli sviluppatori.

Ma sappiamo usarli correttamente?

 

Nel precedente video tutorial, presente sul nostro canale YouTube, abbiamo parlato di come creare una Pipe Function con il metodo reduce. Oggi, invece, parleremo proprio dei Template Literals, dei Tagged Template Literals e di come potenziarli utilizzando proprio le Pipe Function.

 

Le Template Literals (o Template String) permettono di risolvere i problemi di composizione di una stringa complessa con estrema semplicità in quanto permetto l'incorporazione di differenti espressioni.

Un utilizzo più avanzato dei Template Literals ci introduce ad un'ulteriore funzionalità ES6: i cosiddetti "Tagged Templates". In sostanza, possiamo decidere di elaborare un Template Literals attraverso una funzione personalizzata, la quale accetta come argomenti l’array di stringhe digitate e la lista delle variabili incorporate. Qualora non conoscessimo il numero di variabili che potrebbero essere incorporate, possiamo utilizzare un utilissimo operatore: il REST Operator.

Abbiamo visto poi, nella seconda parte del tutorial, come potenziare la Tagged Template Literals di JavaScript unendola alla Pipe Function, una soluzione rapida ma efficace per rendere estremamente flessibile e riusabile la Tagged Template Literals.

 

Ma basta chiacchere! Andiamo a vedere un po' di codice e scoprire come utilizzare al meglio questa "nuova" utilissima sintassi.

Buona visione! 😉:

JavaScript - Template Literals & Tagged Template Literals - Prima Parte

JavaScript - Tagged Template Literals + Pipe Function - Seconda parte