Sådan bruger du ES6 Template Literals i JavaScript
I programmeringen er udtrykket “bogstavelig” henviser til notering af værdier i kode. Vi noterer f.eks. En strengværdi med a streng bogstavelig det er tegn indeholdt i dobbelt eller enkelt citater ("Foo", 'bar', "Dette er en streng!").
Skabelon bogstaver blev introduceret i ECMAScript 6. De arbejder ret på samme måde som string-bogstaver; de producerer skabelonværdier og rå skabelonværdier, hvoraf begge er strenge.
Men i modsætning til string-bogstaver kan template-bogstaver producere værdier, der er multi-fodede strenge, noget du kan opnå i en streng bogstavelig kun af tilføjer nye linjetegn (\ n) til det.
Skabelon bogstaver kan også Opret strenge med andre værdier (afledt af udtryk), som du skal bruge plus operatør i en streng bogstavelig ("dit id er:" + idNo; hvor ID nr er et variabelt udtryk med en numerisk værdi).
Alle disse funktioner gør malet bogstaver mere foretrukket Opret strengværdier.
Syntaks af template bogstaver
Afgrensningen af en skabelon er den backtick ' Karakter (også kendt som backquote karakter eller grave accent symbol). Et udtryk inden for bogstavet (hvis værdi er evalueret under runtime og inkluderet i den endelige værdi produceret af den bogstavelige) er indeholdt i krøllede braces med en foregående dollar tegn $.
'streng $ someExpression strengere'
Her er nogle eksempler på skabelon bogstaver producerer uændret, substitueret (udtryk erstattet med deres evaluerede værdier), og multi-foret strygere.
console.log ( 'hallo'); // hello var name = "Joan"; console.log ('hej $ name'); // hallo Joan console.log ('Kære Joan, Velkommen.'); // Kære Joan, // Velkommen. Escaping & raw template værdier
I en malerisk bogstav, den ' (Backtick), \ (backslash) og $ (dollar tegn) tegn bør undslippes bruger flugt karakter \ hvis de skal medtages i deres skabelonværdi.
Som standard er alle flugtsekvenser i en skabelon skabelon ignoreret. Hvis du vil medtage det i udgangen, skal du bruge dens rå skabelon værdi.
console.log ('inline kode i markup: \' kode \ "); // inline kode i markup: 'kode' var name =" Joan "; console.log ('hej \ $ navn.'); / / hej $ name. console.log (String.raw'hello \ $ name. '); // hej \ $ navn. Det String.raw metode output raw template værdier (den råstreng form af en skabelon bogstavelig). I ovenstående kode er funktionsopkaldet til rå Metoden kaldes “tagget skabelon”.
Tagged maler
En tagget skabelon er en funktionsopkald hvor, i stedet for de sædvanlige parenteser (med valgfrie parametre) udover funktionsnavnet, der er en skabelon bogstavelig hvorfra funktionen får sine argumenter.
Så i stedet for at kalde en funktion som denne:
foo (ArgumentsForFoo);
Det hedder som dette:
foo'ATemplateStringProvidingArgumentsForFoo ';
Funktionen foo hedder a tag funktion. Dens første argument modtaget fra skabelonen er en matrix kaldte skabelonobjekt.
Skabelonobjektet (en matrix) holder alle strengværdierne fortolket fra skabelon bogstavelig og har a rå ejendom (en anden matrix), der rummer alle de rå (un-escaped) strengværdier fortolket fra det samme bogstavelige.
Følgende skabelonobjekt omfatter argumenterne for tagfunktionen alle evalueret eksterne værdier til stede i den bogstavelige (dem, der er indesluttet i de krøllebøjler $ ).
I koden nedenfor, den foo funktionen er oprettet til output sine argumenter. Funktionen kaldes derefter i den mærkede skabelon mode, med en skabelon bogstavelig bærende to udtryk (navn og id).
var navnet = "john"; var id = 478; foo'hello $ name. dit id er: $ id. '; funktion foo () console.log (argumenter [0]); // Array ["hej", ". Dit id er:", "." ] console.log (argumenter [1]); // John console.log (argumenter [2]); // 478
Det første argument udgivet er skabelonobjekt bære alle de strenge tolket fra skabelonen bogstavelig, den anden og tredje argument er evaluerede værdier af udtrykkene, navn og id.
Det rå ejendom
Som nævnt før har skabelonobjektet en ejendom kaldet rå som er en matrix indeholdende alle de rå (un-escaped) strengværdier fortolket fra den bogstavelige bogstav. Sådan får du adgang til rå ejendom:
var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, hvordan har du det begge? '; funktion foo () console.log (argumenter [0]); // Array ["hej $ name1,", ", hvordan har du begge?"] Console.log (argumenter [0] .raw); // Array ["hej \ $ name1,", ", hvordan har du begge?"] Console.log (argumenter [1]); // Joan
Brug tilfælde af mærkede skabeloner
Mærkede skabeloner er nyttige, når du har brug for det bryde en streng i separate dele som det ofte er tilfældet i en webadresse, eller mens du analyserer et sprog. Du finder en samling af tagged template eksempler her.
Andet end IE er skabelon bogstaver understøttes i alle større browsere.
Nedenfor kan du finde nogle eksempler på tagfunktioner med forskellige underskrifter der repræsenterer argumenterne:
var navnet = "john"; foo'hello $ name, hvordan har du det begge? '; bar'hello $ name, hvordan har du det begge? '; funktion foo (... args) console.log (args); // Array [Array ["hej", "hvordan har du det begge?"], "John"] funktionslinjen (strVals, ... exprVals) console.log (strVals); // Array ["hej", "hvordan har du det begge?" ] console.log (exprVals); // Array ["John"]
I bar funktion, den første parameter (strVals) er skabelonobjekt og den anden (der bruger den spredte syntaks) er en matrix, der samlet alle de evaluerede udtryksværdier fra skabelonen bogstaveligt passeret til funktionen.
Sæt snoren sammen
Hvis du vil få hele sætningen (afledt af den bogstavelige) inde i tag-funktionen, sammenkæde alle værdier af arrays, der bærer template-strengene og de evaluerede ekspressionsværdier. Sådan her:
funktion foo (strs, ... exprs) // hvis der er nogen udtryk inkluderet i den bogstavelige hvis (exprs.length! == 0) var n = strs.length - 1, result = "; for (var i = 0 i < 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.';
Det STR'er array holder alle strengene fundet i bogstavelig og exprs besidder alle de evaluerede udtryksværdier fra den bogstavelige.
Hvis der endda findes en ekspressionsværdi, sammenkædes hver arrayværdi af STR'er (undtagen den sidste) med samme indeksværdi af exprs. Derefter til sidst tilføjes den sidste værdi af STR'er array til den sammenkædede streng, danner en komplet sætning denne måde.
