Stringhe template

Le stringhe template sono stringhe letterali che consentono espressioni incorporate. Puoi usare stringhe multi-linea e caratteristiche di interpolazione stringa con esse.

Sintassi

`stringa testo`

`stringa testo linea 1
 stringa testo linea 2`

`stringa testo ${espressione} stringa testo`

tag `stringa testo ${espressione} stringa testo`

Descrizione

Le stringhe template sono racchiuse dal carattere backtick (` `) (accento grave) invece delle singole o doppie virgolette. Le stringhe template possono contenere segnaposti. Questi sono indicati dal segno del Dollaro e parentesi graffe (${espressione}). Le espressioni nei segnaposti e nel testo compreso vengono passati ad una funzione. La funzione predefinita semplicemente concatena le parti in una stringa. Se c'è un'espressione che precede (tag qui), la stringa template è chiamata "stringa template taggata". In questo caso, l'espressione tag (di solito una funzione) viene chiamata con la stringa template processata, con cui puoi in seguito manipolare prima dell'output.

Stringhe multilinea

Ogni carattere di nuova linea inseriti nel sorgente sono parte della stringa template. Usando stringhe normali, potresti usare la seguente sintassi per ottenere stringhe multilinea:

console.log("stringa testo linea 1\n"+
"stringa testo linea 2");
// "stringa testo linea 1
// stringa testo linea 2"

Per avere lo stesso effetto con le stringhe multilinea, puoi adesso scrivere:

console.log(`stringa testo linea 1
stringa testo linea 2`);
// "stringa testo linea 1
// stringa testo linea 2"

Interpolazione di espressioni

Per incorporare espressioni dentro normale stringhe, potresti fare uso della seguente sintassi:

var a = 5;
var b = 10;
console.log("Quindici è " + (a + b) + " e\nnon " + (2 * a + b) + ".");
// "Quindici è 15 e
// non 20."

Adesso, con le stringhe template, puoi fare uso della sintassi ridotta facendo sostituzioni come questa più leggibile:

var a = 5;
var b = 10;
console.log(`Quindici è ${a + b} and\nnon ${2 * a + b}.`);
// "Quindici è 15 e
// non 20."

Stringhe template taggate

Una forma più avanzata di stringhe template sono le stringhe template taggate. Con esse puoi modificare l'output delle stringhe template usando una funzione. Il primo argomento contiene un array di stringhe letterali ("Ciao" e " mondo" in questo esempio). Il secondo, ed ogni argomento dopo il primo, sono i valori delle espressioni di sostituzione ("15" e "50" qui) processate (o a volte detto lavorate). Alla fine, la tua funzione ritorna la stringa manipolata. Non c'è nulla di speciale sul nome tag nel seguente esempio. Il nome della funzione può essere qualsiasi cosa tu voglia.

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!"

Le funzioni Tag non devono per forza ritornare una stringa, come mostrato nel seguente esempio.

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

template`${0}${1}${0}!`('Y', 'A');  // "YAY!" 
template`${0} ${'foo'}!`('Ciao', {foo: 'Mondo'});  // "Ciao Mondo!"

Stringhe grezze

La proprietà speciale raw, disponibile sull'argomento della prima funzione delle stringhe template taggate, ti consente di accedere alle stringhe grezze per come sono state inserite.

function tag(strings, ...values) {
  console.log(strings.raw[0]); 
  // "stringa testo linea 1 \\n stringa testo linea 2"
}

tag`stringa testo linea 1 \n stringa testo linea 2`;

In aggiunta, il String.raw() metodo esiste per creare stringhe grezze proprio come la funzione template predefinita e contatenazione di stringhe potrebbero creare.

String.raw`Salve\n${2+3}!`;
// "Salve\n5!"

Sicurezza

Le stringhe template NON DEVONO essere costruite da utenti non fidati, poichè hanno accesso a variabili e funzioni.

`${console.warn("this is",this)}`; // "this is" Window

let a = 10;
console.warn(`${a+=20}`); // "30"
console.warn(a); // 30

Specifiche

Compatibilità browser

Vedi anche

• String
• String.raw()
• Grammatica lessica
• Stringhe di tipo template in sintassi compatibile con ES3
• "ES6 in profondità: Stringhe template" su hacks.mozilla.org