Ako používať literály šablón ES6 v jazyku JavaScript
V programovaní termín “doslovný” odkazuje na zaznamenávanie hodnôt v kóde. Napríklad, označíme reťazec hodnotu s string literal , ktoré sú znaky uzavreté v dvojitých alebo jednoduchých úvodzovkách ("Foo", 'Bar', "Toto je reťazec!").
Šablóny literálov boli zavedené ECMAScript 6. Pracujú úplne podobne ako reťazcové literály; vyrábajú hodnoty šablóny a hodnoty nespracovaných šablón, oba sú struny.
Avšak, na rozdiel od literálov reťazcov, šablóny literály môžu produkovať hodnoty, ktoré sú viacnásobné reťazce, niečo, čo môžete dosiahnuť v reťazci doslova len pridanie nových riadkov (\ n).
Lístky šablón môžu tiež vytvárať reťazce s inými hodnotami (odvodené z výrazov), pre ktoré by ste museli použiť plus operátor v reťazci doslovný ("vaše id je:" + idNo; kde id je variabilný výraz s číselnou hodnotou).
Všetky tieto funkcie robia z literatúry šablóny výhodnejšie vytvoriť hodnoty reťazca.
Syntax literálov šablón
Oddeľovač šablóny je literál backtick ' znak (tiež známy ako znak spätnej väzby alebo symbol hrubého prízvuku). Výraz vnútri literálu (hodnota ktorej je hodnotené počas behu a zahrnuté do konečnej hodnoty vytvorenej literálom) kučeravé závesy s pred znakom dolára $.
'reťazec $ someExpression ďalší reťazec'
Tu sú nejaké príklady šablón literálov produkujúce nezmenený, substituovaný (výrazy nahradené ich hodnotenými hodnotami) a multi-lemované reťazce.
console.log ( 'Dobrý deň'); // hello var meno = "Joan"; console.log ('ahoj $ name'); // hello Joan console.log ("Milá Joan, Vitajte."); // Milá Joan, // Vitajte. Hodnoty escaping & raw template
V šablóne doslovne ' (Backtick), \ (spätné lomítko) a $ (znak dolára) by mali uniknúť pomocou únikový znak \ ak majú byť zahrnuté do hodnoty šablóny.
V predvolenom nastavení sú všetky sekvencie úniku v šablóne doslovne ignorované. Ak ho chcete zahrnúť do výstupu, musíte použiť jeho surovú hodnotu šablóny.
console.log ('inline kód pri označovaní: \' kód \ "); // vložený kód v značke: 'code' var name =" Joan "; / hello $ name .konsole.log (String.raw'hello \ $ name.); // hello \ $ name. String.raw metóda výstupy surových hodnôt šablóny (surový reťazec formulára šablóny doslovne). Vo vyššie uvedenom kóde je volanie funkcie funkcie surový metóda sa označuje ako “označené šablóny”.
Tagované šablóny
Šablóna označená tagom je a volanie funkcie kde, namiesto obvyklých zátvoriek (s voliteľnými parametrami) okrem názvu funkcie, existuje šablóna doslova z ktorých funkcia dostáva svoje argumenty.
Takže namiesto volania funkcie ako je táto:
foo (ArgumentsForFoo);
Nazýva sa to takto:
foo'ATemplateStringProvidingArgumentsForFoo ';
Funkcia foo sa nazýva a tag funkcie. Jeho prvý argument získaný zo šablóny doslova je rad tzv objekt šablóny.
Objekt šablóny (pole) je uložený všetky hodnoty reťazca interpretovaný zo šablóny doslovne a má surový vlastnosť (ďalšie pole) všetky nespracované (nevybočené) hodnoty reťazca interpretované z toho istého literálu.
Po objekte šablóny obsahujú argumenty funkcie tagu všetko hodnotené vonkajšie hodnoty prítomné v tom doslovnom (tie, ktoré sú uzavreté v kučeravých zátvorkách $ ).
V nižšie uvedenom kóde foo je vytvorená funkcia svoje argumenty. Funkcia sa potom volá v označenej šablóne spôsobom, s doslovnou šablónou nesúcou dva výrazy (názov a id).
var meno = "John"; var id = 478; foo'hello $ meno. vaše id je: $ id. '; funkcia foo () console.log (argumenty [0]); / / Array ["hello", "vaše ID je:", "." ] console.log (argumenty [1]); // John console.log (argumenty [2]); // 478
Prvým vydaným argumentom je objekt šablóny ktoré nesú všetky reťazce interpretované zo šablóny doslovne, druhý a tretí argument sú hodnotené hodnoty výrazov, názov a id.
surový vlastnosť
Ako sme už spomenuli, objekt šablóny má a majetok nazvaný surový čo je pole obsahujúce všetky nespracované (nevybočené) hodnoty reťazca interpretovaný zo šablóny doslovne. Takto môžete pristupovať surový vlastnosť:
var názov1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, ako ste obaja? '; funkcia foo () console.log (argumenty [0]); // Array ["hello $ name1", ", ako ste obaja?"] Console.log (argumenty [0] .raw); // Array ["hello \ $ name1", "ako ste obaja?"] Console.log (argumenty [1]); // Joan
Používajte prípady označených šablón
Šablóny s označením sú užitočné, keď potrebujete zlomiť reťazec do samostatných častí, ako je to často v prípade adresy URL alebo pri analýze jazyka. Nájdete tu kolekciu označené príklady šablón tu.
Iné ako IE, literály šablóny sú podporované vo všetkých hlavných prehliadačoch.
Nižšie nájdete niekoľko príkladov funkcií značiek rôzne podpisy ktoré predstavujú argumenty:
var meno = "John"; foo'hello $ name, ako ste obaja? '; bar'hello $ name, ako ste obaja? '; funkcia foo (... args) console.log (args); // Array [Array ["hello", "ako ste obaja?", "John"] funkčný panel (strVals, ... exprVals) console.log (strVals); // Array ["hello", "ako ste obaja?" ] console.log (exprVals); // Array ["John"]
V bar prvý parameter (strVals) je objekt šablóny a druhý (ktorý používa rozšírenú syntax) je pole, ktoré sa zhromaždilo všetky hodnotené hodnoty expresie z literárnej šablóny prenesenej na funkciu.
Dajte reťazec dohromady
Ak chceš získať celú vetu (odvodený od literálu) vo vnútri funkcie tagu, spájajú všetky hodnoty matiek nesúcich šablóny reťazcov a vyhodnotené hodnoty výrazov. Ako toto:
funkcia foo (strs, ... exprs) // ak sú akékoľvek výrazy zahrnuté v doslovnom if (exprs.length! == 0) var n = strs.length - 1, výsledok = "; pre (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.';
STR pole platí všetky reťazce nájdené v doslovnom a exprs drží všetky hodnotené hodnoty expresie od doslovného.
Ak existuje aj jedna hodnota výrazu, spojte každú hodnotu poľa STR (okrem posledného) s rovnakou hodnotou indexu exprs. Potom na konci pridajte poslednú hodnotu STR pole do zreťazeného reťazca, tvoriť úplnú vetu tadiaľto.
