Slik bruker du ES6 Template Literals i JavaScript
I programmeringen er termen “bokstavelig” refererer til notering av verdier i kode. For eksempel merker vi en strengverdi med en streng bokstavelig det er tegn som er omsluttet i doble eller enkle anførselstegn ("Foo", 'Bar', "Dette er en streng!").
Mal bokstavelig ble introdusert i ECMAScript 6. De jobber ganske likt med strengstavler; de produserer malverdier og rå malverdier, begge er strenger.
I motsetning til streng-bokstaver kan malte bokstaver imidlertid produsere verdier som er multi-lined strenger, noe du kan oppnå i en streng bokstavelig bare av legger til nye linjetegn (\ n) til den.
Malte bokstaver kan også lag strenge med andre verdier (avledet av uttrykk) som du må bruke pluss operatør i en streng bokstavelig ("ditt id er:" + idNo; hvor ID NR er et variabelt uttrykk med en numerisk verdi).
Alle disse funksjonene gjør maleriske bokstaver mer å foretrekke lag strengverdier.
Syntaks av mal bokstavler
Avgrensningen av en mal bokstavelig er accent grave ' karakter (også kjent som backquote karakter eller grave aksent symbol). Et uttrykk inne i bokstavelig (verdien av den er evaluert i løpet av kjøretiden og inkludert i den endelige verdien produsert av bokstavelig) er vedlagt i krøllete regulering med en foregående dollar tegn $.
'streng $ someExpression strengere'
Her er det noe eksempler på mall bokstavene produserende uendret, substituerte (uttrykk erstattet med evaluerte verdier), og multi-foret strenger.
console.log ( 'hei'); // hallo var navnet = "Joan"; console.log ('hei $ name'); // hallo Joan console.log ('Kjære Joan, Welcome.'); // Kjære Joan, // Velkommen. Unnslippe og rå malverdier
I en mall bokstavelig, den ' (Backtick), \ (tilbakeslag), og $ (dollar tegn) tegn skal bli rømt bruker flykte karakter \ hvis de skal inkluderes i deres malverdi.
Som standard er alle fluktsekvenser i en mall bokstavelig ignorert. Hvis du vil inkludere den i utgangen, må du bruke den rå mal verdi.
console.log ('inline-kode i markup: \' kode \ "); // inline kode i markup: 'kode' var navnet =" Joan "; console.log ('hei \ $ name.'); / / hei $ name. console.log (String.raw'hello \ $ name. '); // hei \ $ navn. De String.raw metode utdataer raw template verdier (den råstrengen form av en mall bokstavelig). I ovennevnte kode, funksjonsanrop av rå Metoden er referert til som “tagget mal”.
Merkede maler
En merket mal er en funksjonsanrop hvor, i stedet for de vanlige parentesene (med valgfrie parametere) i tillegg til funksjonsnavnet, det er en mal bokstavelig hvorfra funksjonen får sine argumenter.
Så, i stedet for å kalle en funksjon som denne:
foo (ArgumentsForFoo);
Det kalles slik:
foo'ATemplateStringProvidingArgumentsForFoo ';
Funksjonen foo kalles a tag-funksjon. Dens første argument mottatt fra malen bokstavelig er en matrise ringte malobjekt.
Malen objektet (en matrise) holder alle strengverdiene tolket fra malen bokstavelig og har a rå eiendom (en annen matrise) som holder alle de raske (un-escaped) strengverdiene tolket fra samme bokstavelige.
Følgende malobjekt inneholder argumenter for tag-funksjonen alle evaluert eksterne verdier presentere i det bokstavelige (de som er omsluttet i de krøllete armbåndene $ ).
I koden nedenfor er foo funksjonen er opprettet til output sine argumenter. Funksjonen kalles da i den merkede malemoden, med en mal bokstavelig bære to uttrykk (Navn og id).
var navnet = "john"; var id = 478; foo'hello $ name. ditt id er: $ id. '; funksjon foo () console.log (argumenter [0]); // Array ["hei", ". Ditt id er:", "." ] console.log (argumenter [1]); // John console.log (argumenter [2]); // 478
Det første argumentet utgitt er malobjekt bære alle strengene tolket fra malen bokstavelig, den andre og tredje argumenter er evaluerte verdier av uttrykkene, Navn og id.
De rå eiendom
Som nevnt tidligere har malobjektet en eiendom kalt rå som er en matrise som inneholder alle de raske (un-escaped) strengverdiene tolket fra malen bokstavelig. Slik får du tilgang til rå eiendom:
var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, hvordan har du det begge? '; funksjon foo () console.log (argumenter [0]); // Array ["hei $ name1,", ", hvordan har du begge?"] Console.log (argumenter [0] .raw); // Array ["hei \ $ name1,", ", hvordan har du begge?"] Console.log (argumenter [1]); // Joan
Bruk tilfeller av merkede maler
Merkede maler er nyttige når du trenger bryte en streng i separate deler som det er ofte tilfellet i en nettadresse, eller mens du analyserer et språk. Du finner en samling av merkede maleksempler her.
Annet enn IE, er mal bokstavene støttes i alle de store nettleserne.
Nedenfor finner du noen eksempler på tagfunksjoner med forskjellige signaturer som representerer argumentene:
var navnet = "john"; foo'hello $ name, hvordan har du det begge? '; bar'hello $ name, hvordan har du det begge? '; funksjon foo (... args) console.log (args); // Array [Array ["hei", ", hvordan har du begge?"], "John"] funksjonslinjen (strVals, ... exprVals) console.log (strVals); // Array ["hei", "hvordan går det med dere begge?" ] console.log (exprVals); // Array ["John"]
I Bar funksjon, den første parameteren (strVals) er den malobjekt og den andre (som bruker spredt syntaks) er en samling som samles alle de evaluerte uttrykkverdiene fra malen bokstavelig passert til funksjonen.
Sett strengen sammen
Hvis du vil få hele setningen (avledet fra bokstavelig) inne i tag-funksjonen, sammenkoble alle verdier av arrays som bærer malstrengene og de evaluerte uttrykkverdiene. Som dette:
funksjon foo (strs, ... exprs) // hvis det er noen uttrykk som er inkludert i bokstavelig hvis (eksprs.length! == 0) var n = strs.length - 1, result = "; for (var i = 0 ; Jeg < 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 MT array holder alle strengene funnet i bokstavelig og exprs holder alle de evaluerte uttrykkverdiene fra det bokstavelige.
Hvis det til og med finnes en ekspressjonsverdi, sammenkoble hver arrayverdien av MT (unntatt den siste) med samme indeksverdi på exprs. Da, til slutt, legger du til den siste verdien av MT array til den sammenkædede strengen, danner en komplett setning denne måten.
