Con ES6 (o ES2015 se volete), possiamo creare stringhe template con Template Literals. I template literals sono stringhe in cui possiamo iniettare variabili e funzioni. Ci permettono di scrivere senza usare i segni più + per concatenare stringhe e variabili. Queste stringhe usano un back-tick ` al posto delle virgolette singole o doppie.

Concatenazione di variabili:

var name = "Josh";
var string = "Hello " + name;// output = <p>Hello Josh</p>

Letterale modello con variabile:

let name = "Josh";
let string = `Hello ${name}`;// output = <p>Hello Josh</p>

La differenza qui è l’uso del segno del dollaro e delle parentesi graffe${} intorno al nome della variabile e nessun segno più ${variableName} . Questo rende l’uso di stringhe e variabili insieme più leggibile.

Concatenazione di linee:

var string = "The quick brown fox " +
"jumps over " +
"the lazy dog";

Lettera di template:

let string = `The quick brown fox
jumps over
the lazy dog`;

Ora stiamo iniziando a vedere che i letterali di template assomigliano molto ai motori di template. Vediamo come potrebbe essere:

let data = { greeting: 'Hello', name: 'Josh' };
let template = `<p>${data.greeting} {data.name}</p>`;
element.innerHTML = template;// output = <p>Hello Josh</p>

Un template literal ha aggiunto i dati dell’oggetto nella stringa per noi da usare. Possiamo usare variabili e oggetti per informare i dati nella stringa. Tutto tra le parentesi graffe viene valutato, dai numeri alle condizioni alle funzioni.

Math:

let number = `${2 * 5}`;// output = 10

Condizione ternaria:

let time = 'night';
let string = `Good ${time === 'night' ? 'evening' : 'day'}, Josh`;// output = Good evening, Josh

Mettendo tutto insieme, potremmo costruire funzioni per gestire contenuti ripetuti come un array.

Function: