Så här använder du ES6 Template Literals i JavaScript
I programmeringen gäller termen “bokstavlig” hänvisar till notering av värden i kod. Vi noterar till exempel ett strängvärde med a sträng bokstavlig det är tecken som bifogas dubbla eller enkla citat ("Foo", 'bar', "Detta är en sträng!").
Mall bokstäver introducerades i ECMAScript 6. De fungerar ganska på samma sätt som strängtextaler; de producerar mallvärden och råmallvärden, vilka båda är strängar.
Men, till skillnad från strängbokstav, kan mallstavlar producera värden som är flerfodrade strängar, något du kan uppnå i en sträng bokstavlig bara av lägger till nya radertecken (\ n) till det.
Mall bokstäver kan också skapa strängar med andra värden (härledd från uttryck) som du skulle behöva använda plus operatör i en sträng bokstavlig ("ditt ID är:" + idNo; var id nr är ett variabelt uttryck med ett numeriskt värde).
Alla dessa funktioner gör mall bokstav mer föredraget för skapa strängvärden.
Syntax av mallstavlar
Avgränsaren av en mall bokstavlig är grav accent ' karaktär (även känd som backquote tecken eller grave accent symbol). Ett uttryck inom det bokstavliga (vars värde är utvärderas under körtiden och ingår i det slutliga värdet som produceras av det bokstavliga) bifogas lockiga hängslen med en föregående dollar tecken $.
'string $ someExpression string "
Här är några exempel på mallstavlar producerande oförändrad, substituerad (uttryck ersatt med deras utvärderade värden), och multi-fodrade strängar.
console.log ( 'Hej'); // hej var name = "Joan"; console.log ('hej $ name'); // hej Joan console.log ("Kära Joan, Welcome."); // Kära Joan, // Välkommen. Escaping & raw mall värden
I en mall bokstavlig, den ' (Grav accent), \ (backslash) och $ (dollar tecken) tecken bör undkomma använda flykt karaktär \ om de ska inkluderas i deras mallvärde.
Som standard är alla flyktsekvenser i en mall bokstavlig ignoreras. Om du vill inkludera det i produktionen måste du använda det råmallvärde.
console.log ('inline-kod i markup: \' code \ "); // inline-kod i markup:" kod "var name =" Joan "; console.log (" hej \ $ namn. "); / hej $ name. console.log (String.raw'hello \ $ name. '); // hej \ $ namn. De String.raw metod utmatar råmallvärden (den råa strängformen av en mall bokstavlig). I ovanstående kod, funktionssamtalet för rå Metoden kallas “taggad mall”.
Märkta mallar
En taggad mall är a funktionssamtal var, i stället för de vanliga parenteserna (med valfria parametrar) förutom funktionsnamnet, Det finns en mall bokstavlig från vilken funktionen får sina argument.
Så, istället för att ringa en funktion som denna:
foo (ArgumentsForFoo);
Det kallas så här:
foo'ATemplateStringProvidingArgumentsForFoo ';
Funktionen foo kallas a tagg funktion. Dess första argument mottaget från mallen bokstavlig är en array ringde mallobjekt.
Mallobjektet (en array) rymmer alla strängvärdena tolkas från mallen bokstavlig och har a rå egendom (annan array) som innehas alla raden (un-escaped) strängvärden tolkas från samma bokstavliga.
Efter mallobjektet innehåller argumenten för taggfunktionen alla utvärderade externa värden närvarande i den bokstavliga (de som är inneslutna i krullarna $ ).
I koden nedan är foo funktionen skapas till mata ut sina argument. Funktionen kallas sedan i märkt mall mode, med en mall bokstavlig bär två uttryck (namn och id).
var namn = "john"; var id = 478; foo'hello $ name. ditt id är: $ id. '; funktion foo () console.log (argument [0]); // Array ["hej", ". Ditt id är:", "." ] console.log (argument [1]); // John console.log (argument [2]); // 478
Det första argumentet utmatas är mallobjekt bär alla strängar tolkade från mallen bokstavlig, andra och tredje argument är utvärderade värden av uttrycken, namn och id.
De rå fast egendom
Som tidigare nämnts har mallobjektet en egendom som heter rå vilken är en array som innehåller alla raden (un-escaped) strängvärden tolkas från mallen bokstavlig. Så här får du tillgång till rå fast egendom:
var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, hur mår du båda? '; funktion foo () console.log (argument [0]); // Array ["hej $ name1,", ", hur mår du båda?"] Console.log (arguments [0] .raw); // Array ["hej \ $ name1,", ", hur mår du båda?"] Console.log (argument [1]); // Joan
Använd fall av märkta mallar
Märkta mallar är användbara när du behöver bryta en sträng i separata delar som det ofta är fallet i en URL, eller när man analyserar ett språk. Du hittar en samling av taggade mall exempel här.
Annat än IE är mall bokstäver stöds i alla större webbläsare.
Nedan kan du hitta några exempel på tagfunktioner med olika signaturer som representerar argumenten:
var namn = "john"; foo'hello $ name, hur mår du båda? '; bar'hello $ name, hur mår du båda? '; funktion foo (... args) console.log (args); // Array [Array ["hej", "hur fungerar du båda?"], "John"] funktionsfältet (strVals, ... exprVals) console.log (strVals); // Array ["hej", "hur mår du båda?" ] console.log (exprVals); // Array ["John"]
I bar funktion, den första parametern (strVals) är mallobjekt och den andra (som använder spridningssyntaxen) är en samling som samlades alla utvärderade uttrycksvärdena från mallen bokstavligt passerade till funktionen.
Sätt strängen ihop
Om du vill få hela meningen (härledd från den bokstavliga) inuti taggfunktionen, sammanlänka alla värden av de arrays som bär mallsträngarna och de utvärderade uttrycksvärdena. Så här:
funktion foo (strs, ... exprs) // om det finns några uttryck inkluderade i bokstaven om (exprslängd! == 0) var n = strslängd - 1, resultat = "; för (var i = 0 , jag < 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.';
De STRs array håller alla strängarna hittades i bokstavlig och exprs innehar alla utvärderade uttrycksvärdena från den bokstavliga.
Om ens ett uttrycksvärde existerar sammanfogas varje arrayvärde av STRs (förutom den sista) med samma indexvärde för exprs. Sedan lägger du till det sista värdet av STRs array till den sammanlänkade strängen, bildar en fullständig mening den här vägen.
