Come utilizzare i template letterali ES6 in JavaScript
Nella programmazione, il termine “letterale” si riferisce a notazione di valori nel codice. Ad esempio, notiamo un valore stringa con a stringa letterale che sono caratteri racchiusi tra virgolette doppie o singole ("Pippo", 'bar', "Questa è una stringa!").
Template letterali sono stati introdotti in ECMAScript 6. Funzionano in modo abbastanza simile a stringhe letterali; loro producono valori del modello e valori del modello grezzo, entrambi sono stringhe.
Tuttavia, a differenza dei valori letterali stringa, i valori letterali del modello possono generare valori stringhe multi-foderate, qualcosa che puoi ottenere in una stringa letterale solo da aggiungendo nuovi caratteri di linea (\ n) ad esso.
I letterali modello possono anche creare stringhe con altri valori (derivato dalle espressioni) per il quale dovresti usare il più operatore in una stringa letterale ("il tuo id è:" + idNo; dove COD è un'espressione variabile con un valore numerico).
Tutte queste caratteristiche rendono i modelli letterali più preferibili a creare valori stringa.
Sintassi dei valori letterali del modello
Il delimitatore di un modello letterale è il backtick ' personaggio (noto anche come carattere di backquote o simbolo di accento grave). Un'espressione dentro il letterale (il cui valore è valutato durante il runtime e incluso nel valore finale prodotto dal letterale) è incluso in parentesi graffe con un segno del dollaro precedente $.
'string $ someExpression more string'
Qui ce ne sono alcuni esempi di modelli letterali produzione immutato, sostituito (le espressioni sostituite con i loro valori valutati), e multi-allineato stringhe.
console.log ( 'ciao'); // ciao var name = "Joan"; console.log ('ciao $ nome'); // ciao Joan console.log ('Cara Joan, benvenuto.'); // Caro Joan, // Benvenuto. Escaping e valori di template grezzi
In un modello letterale, il ' (Backtick), \ (backslash), e $ (simbolo del dollaro) caratteri dovrebbe essere sfuggito usando il personaggio di fuga \ se devono essere inclusi nel loro valore di modello.
Per impostazione predefinita, tutte le sequenze di escape in un modello letterale sono ignorato. Se vuoi includerlo nell'output, devi usare il suo valore del modello grezzo.
console.log ('codice inline in markup: \' code \ "); // codice inline nel markup: 'code' var name =" Joan "; console.log ('ciao \ $ nome.'); / / ciao $ nome console.log (String.raw'hello \ $ name. '); // ciao \ $ nome. Il String.raw metodo emette valori di template non elaborati (la forma di stringa grezza di un modello letterale). Nel codice sopra, la chiamata di funzione del crudo il metodo è indicato come “modello con tag”.
Modelli con tag
Un modello con tag è un chiamata di funzione dove, al posto delle solite parentesi (con parametri opzionali) oltre al nome della funzione, c'è un modello letterale da cui la funzione ottiene i suoi argomenti.
Quindi, invece di chiamare una funzione come questa:
foo (ArgumentsForFoo);
Si chiama così:
foo'ATemplateStringProvidingArgumentsForFoo ';
La funzione foo è chiamato a funzione di tag. Il suo primo argomento ricevuto dal template letterale è un schieramento chiamato il oggetto modello.
L'oggetto modello (un array) contiene tutti i valori di stringa interpretato dal modello letterale e ha a crudo proprietà (un'altra matrice) che contiene tutti i valori di stringa raw (senza escape) interpretato dallo stesso letterale.
Seguendo l'oggetto modello, gli argomenti della funzione tag includono tutti i valutato valori esterni presente in quel letterale (quelli racchiusi tra parentesi graffe $ ).
Nel codice qui sotto, il foo la funzione è stata creata per emettere i suoi argomenti. La funzione viene quindi chiamata nella moda del modello con tag, con un modello letterale contenente due espressioni (nome e id).
var name = "John"; var id = 478; foo'hello $ name. il tuo id è: $ id. '; function foo () console.log (argomenti [0]); // Array ["ciao", ". Il tuo id è:", "." ] console.log (argomenti [1]); // John console.log (argomenti [2]); // 478
Il primo argomento emesso è il oggetto modello portando tutte le stringhe interpretate dal template letterale, il secondo e il terzo argomento sono i valori valutati delle espressioni, nome e id.
Il crudo proprietà
Come accennato in precedenza, l'oggetto modello ha a proprietà chiamato crudo che è un array che contiene tutti i valori di stringa raw (senza escape) interpretato dal modello letterale. Questo è come è possibile accedere a crudo proprietà:
var name1 = "John", name2 = "Joan"; foo'hello \ $ nome1, $ nome2, come stai entrambi? '; function foo () console.log (argomenti [0]); // Array ["ciao $ nome1,", ", come stai entrambi?"] Console.log (argomenti [0] .raw); // Array ["ciao \ $ nome1,", ", come stai entrambi?"] Console.log (argomenti [1]); // Joan
Usa casi di modelli con tag
I modelli con tag sono utili quando è necessario rompere una corda in parti separate come succede spesso in un URL o mentre si analizza una lingua. Troverete una collezione di esempi di modelli con tag qui.
Oltre a IE, i letterali di modello sono supportato in tutti i principali browser.
Di seguito, puoi trovare alcuni esempi di funzioni di tag con diverse firme che rappresentano gli argomenti:
var name = "John"; foo'hello $ name, come stai entrambi? '; bar'hello $ name, come stai entrambi? '; function foo (... args) console.log (args); // Array [Array ["hello", ", come stai entrambi?"], "John"] barra delle funzioni (strVals, ... exprVals) console.log (strVals); // Array ["ciao", ", come stai entrambi?" ] console.log (exprVals); // Array ["John"]
Nel bar funzione, il primo parametro (strVals) è il oggetto modello e la seconda (che usa la sintassi di diffusione) è una matrice che si è raccolta tutti i valori delle espressioni valutate dal modello letterale passato alla funzione.
Metti insieme la corda
Se lo desidera ottenere l'intera frase (derivato dal letterale) all'interno della funzione tag, concatena tutti i valori degli array che trasportano le stringhe del template e i valori delle espressioni valutate. Come questo:
function foo (strs, ... exprs) // se ci sono espressioni incluse nel letterale if (exprs.length! == 0) var n = strs.length - 1, result = "; for (var i = 0 ; io < n; i++) result += strs[i] + exprs[i]; result += strs[n]; console.log(result); //"Hello John." // if there are no expressions included in the literal else console.log(strs[0]); name = 'John'; foo'Hello $name.';
Il STR la matrice tiene tutte le corde trovato nel letterale e exprs detiene tutti i valori delle espressioni valutate dal letterale.
Se esiste anche un solo valore di espressione concatena ogni valore di matrice di STR (tranne l'ultimo) con lo stesso valore di indice di exprs. Quindi, alla fine, aggiungi l'ultimo valore di STR array alla stringa concatenata, formando una frase completa per di qua.
