Kaip naudoti ES6 šabloną „JavaScript“
Programuojant, terminas “pažodinis” nurodo reikšmių žymėjimas kodą. Pavyzdžiui, pažymime eilutės reikšmę su a eilutėje kurie yra dvigubų arba atskirų kabučių simboliai („foo“, „baras“, "Tai yra eilutė!").
Šablonų literatūra buvo įvesti ECMAScript 6. Jie veikia gana panašiai kaip styginių literatūra; jie gamina šablonų reikšmes ir neapdorotų šablonų vertės, abu yra stygos.
Tačiau, skirtingai nuo styginių literatūros, šablonų literatūra gali sukurti vertes daugiasluoksnės stygos, ką jūs galite pasiekti eilutėje tik pridėti naujų eilutės simbolių (n).
Taip pat gali būti šablonų literatūros sukurti eilutes su kitomis vertėmis (gautas iš išraiškų), kurioms jūs turėtumėte naudoti plius operatorius eilutėje („jūsų ID yra:“ + idNo; kur ID numeris yra kintama išraiška su skaitine reikšme).
Visos šios funkcijos leidžia šablonų literatūrą labiau pasirinkti sukurti eilutės reikšmes.
Šablonų literatūros sintaksė
Šablono šrifto ribotuvas yra atgal „ charakteris (taip pat žinomas kaip „backquote“ simbolis arba sunkus akcentas). Išraiška viduje pažodžiui (kurio vertė yra įvertintas vykdymo metu įtraukta į galutinę vertę, kurią sukuria pažodžiui) garbanoti breketai su prieš dolerio ženklą $.
„string $ someExpression daugiau eilutės“
Stai keleta šablonų literatūros pavyzdžiai gamybos nepakeistas, pakeistas (išraiškos pakeistos jų įvertintomis vertėmis), ir daugiasluoksnė stygos.
console.log („hello“); // hello var name = "Joan"; console.log („hello $ name“); // hello Joan console.log („Gerbiami Joan, Sveiki!“); // Gerb. Joan, // Sveiki!.
Išvykstančios ir neapdorotos šablono vertės
Be šablono, „ „ („backtick“), \ T (backslash), ir $ (dolerio ženklas) turėtų būti išvengta naudojant pabėgti \ T jei jie turi būti įtraukti į jų šablono vertę.
Pagal numatytuosius nustatymus visos evoliucijos sekos šablone yra ignoruojamas. Jei norite jį įtraukti į išvestį, turite ją naudoti žaliavinio šablono vertė.
console.log („inline code in markup: kodas“); // inline kodas žymėjime: „code 'var name =" Joan "; console.log (' hello $ name.) / hello $ name. console.log (String.raw'hello $ name. '); // hello \ t. The String.raw metodas išeina žaliavinio šablono reikšmes (šablono raštinės eilutės forma). Pirmiau pateiktame kode - funkcijų skambutis neapdorotas metodas vadinamas “pažymėtas šablonas”.
Žymėti šablonai
Žymėtas šablonas yra a funkcija kur, vietoj įprastų skliaustelių (su pasirinktiniais parametrais) be funkcijos pavadinimo, yra šablonas iš kurios funkcija gauna savo argumentus.
Taigi, vietoj to, kad vadintumėte tokią funkciją:
foo (ArgumentsForFoo);
Tai vadinama tokiu:
foo'ATemplateStringProvidingArgumentsForFoo ';
Funkcija foo yra vadinamas a žymos funkcija. Jo pirmasis argumentas, gautas iš šablono, yra masyvas vadinamas šablono objektas.
Laikomas šablono objektas (masyvas) visos eilutės reikšmės aiškinama iš šablono ir turi a neapdorotas nuosavybė (kita masyvas) visos neapdorotos (nepavykusios) eilutės reikšmės iš to paties pažodinio.
Po šablono objekto žymos funkcijos argumentai apima Visi įvertinti išorinių vertybių pateikiami toje pačioje pažodžiui (tuose, kurie yra garbanotose sąvaržose $ ).
Toliau pateiktame kode foo funkcija sukurta pateikti savo argumentus. Tada ši funkcija vadinama pažymėtame šablone, su šablonu, kuriame yra dvi išraiškos (vardas ir ID).
var name = "John"; var id = 478; foo'hello $ name. jūsų ID yra: $ id. '; function foo () console.log (argumentai [0]); // Array ["hello", "jūsų ID yra:", "." ] console.log (argumentai [1]); // John console.log (argumentai [2]); // 478
Pirmasis pateiktas argumentas yra šablono objektas visus šablonus, interpretuotus iš šablono, antra ir trečia argumentai yra vertinamos vertės išraiškų, vardas ir ID.
The neapdorotas nuosavybė
Kaip minėta anksčiau, šablono objektas turi a nuosavybė vadinama neapdorotas kuris yra masyvas, kuriame yra visos neapdorotos (nepavykusios) eilutės reikšmės aiškinama iš šablono. Taip galite pasiekti neapdorotas nuosavybė:
var name1 = "John", name2 = "Joan"; foo'hello $ name1, $ name2, kaip tu abu? '; function foo () console.log (argumentai [0]); // Array ["hello $ name1,", ", kaip jūs abu?"] Console.log (argumentai [0] .raw); // Array ["hello $ name1,", ", kaip jūs abu?"] Console.log (argumentai [1]); // Joan
Naudokite pažymėtų šablonų atvejus
Žymėti šablonai yra naudingi, kai jums reikia nutraukti eilutę į atskiras dalis, pvz., dažnai tai yra URL, arba analizuojant kalbą. Čia rasite kolekciją čia pažymėti šablonų pavyzdžiai.
Išskyrus IE, yra šablonų visose pagrindinėse naršyklėse.
Žemiau galite rasti kai kuriuos žymos funkcijų pavyzdžius skirtingų parašų kurie atspindi argumentus:
var name = "John"; foo'hello $ name, kaip tu abu? '; bar'hello $ name, kaip tu abu? '; funkcija foo (… args) console.log (args); // Array [Array ["hello", ", kaip jūs abu?"], "John"] funkcijų juosta (strVals,… exprVals) console.log (strVals); // Array ["hello", ", kaip jūs abu?" ] console.log (exprVals); // Array ["John"]
Viduje konors baras funkcija, pirmasis parametras (strVals) yra šablono objektas ir antrasis (kuris naudoja išplėstinę sintaksę) yra masyvas, surinktas visos įvertintos ekspresijos vertės iš šablono literatūros, perduotos funkcijai.
Įdėkite eilutę kartu
Jeigu nori gauti visą sakinį (kilęs iš pažodinio) žymos funkcijos viduje, susieti visas vertybes masyvų, turinčių šablonų eilutes, ir įvertintų ekspresijos verčių. Kaip šitas:
funkcija foo (strs,… exprs) // jei yra tam tikrų išraiškų, įtrauktų į pažodinį, jei (exprs.length! == 0) var n = strs.length - 1, rezultatas = "; ; 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.';
The strs masyvas visos eilutės rasta pažodžiui ir exprs laiko visos įvertintos ekspresijos vertės iš pažodinio.
Jei egzistuoja net viena išraiškos reikšmė, susieti kiekvieną matricos reikšmę strs (išskyrus paskutinįjį) su tos pačios indekso verte exprs. Tada pabaigoje pridėkite paskutinę vertę strs masyvas į susietą eilutę, sudarant pilną sakinį tokiu būdu.
