Jak používat ES6 šablony literatury v JavaScriptu
V programování, termín “doslovný” Odkazuje na notace hodnot v kódu. Například můžeme označit hodnotu řetězce řetězcem a řetězcový literál které jsou znaky uzavřené ve dvojitých nebo jednoduchých uvozovkách ("foo", 'bar', "Tohle je řetězec!").
Šablony literály byly zavedeny v roce 2006. \ t ECMAScript 6. Pracují podobně jako strunné literály; oni produkují hodnoty šablony a surové hodnoty šablony, oba jsou struny.
Nicméně, na rozdíl od řetězcových literálů, literály šablony mohou produkovat hodnoty, které jsou multi-lemované řetězce, něco, čeho můžete dosáhnout v řetězcovém literálu pouze přidávat nové znaky řádků (n).
Šablony literály mohou také vytvořit řetězce s jinými hodnotami (odvozené z výrazů), pro které byste museli použít plus operátor v řetězcovém literálu ("vaše id je:" + idNo; kde idNo je proměnný výraz s číselnou hodnotou).
Všechny tyto vlastnosti dělají šablony literály výhodnější vytvořit hodnoty řetězce.
Syntaxe literálových šablon
Oddělovačem literálu šablony je backtick " charakter (také známý jako backquote charakter nebo hrobový akcentový symbol). Výraz uvnitř literálu (jehož hodnota je během runtime a zahrnuty do konečné hodnoty vyrobené literálem) jsou uzavřeny v složené závorky s předcházející znak dolaru $.
'řetězec $ someExpression další řetězec'
Tady nějaké jsou příklady literálových šablon produkci beze změny, substituovaná (výrazy nahrazené hodnotami) a multi-lemované struny.
console.log ('hello'); // hello var name = "Joan"; console.log ('hello $ name'); // hello Joan console.log ('Milá Joan, Vítejte.'); // Milá Joan, // Vítejte. Unikání a hrubé hodnoty šablony
V šabloně doslovně " (backtick), \ (zpětné lomítko) a $ (znak dolaru) by mělo být uniknuto za použití únikový charakter \ pokud mají být zahrnuty do hodnoty šablony.
Ve výchozím nastavení jsou všechny sekvence escape v literálu šablony ignorovány. Pokud ho chcete zahrnout do výstupu, musíte použít jeho hodnota surové šablony.
console.log ('inline kód v značce:' code '); // vložený kód v značce:' code 'var name = "Joan"; console.log (' hello $ name. '); / hello $ name. console.log (String.raw'hello $ name. '); // hello $ name. String.raw metoda výstupy surových hodnot šablony (syrový řetězec formy literálu šablony). Ve výše uvedeném kódu volání funkce drsný metoda je označována jako “tagované šablony”.
Tagované šablony
Tagovaná šablona je a volání funkce kde, místo obvyklých závorek (s volitelnými parametry) vedle názvu funkce, je to šablona doslovná ze které funkce získává své argumenty.
Namísto volání funkce, jako je tato:
foo (ArgumentsForFoo);
To se nazývá takto:
foo'ATemplateStringProvidingArgumentsForFoo ';
Funkce foo se nazývá funkce tagu. Jeho první argument obdržený z doslovného literálu je pole nazvaný objekt šablony.
Objekt šablony (pole) platí všechny hodnoty řetězce interpretován z doslovného a má a drsný vlastnost (jiné pole) všechny hodnoty řetězec raw (un-escaped) interpretovány ze stejného literálu.
Argumenty funkce tagu následují za objektem šablony všechny vyhodnoceny externích hodnot přítomné v tomto doslovném (ty uzavřené ve složených závorkách $ ).
V níže uvedeném kódu foo funkce jeho argumenty. Funkce se pak vyvolá v módu tagované šablony, s literálem šablony nesoucím dva výrazy (název a id).
var name = "John"; var id = 478; foo'hello $ name. vaše id je: $ id. '; function foo () console.log (argumenty [0]); // Array ["ahoj", "vaše id je:", "." ] console.log (argumenty [1]); // John console.log (argumenty [2]); // 478
První argumentovaný výstup je objekt šablony nesoucí všechny řetězce interpretované z doslovného vzoru, druhý a třetí argument jsou hodnot výrazů, název a id.
drsný vlastnictví
Jak bylo uvedeno výše, objekt šablony má vlastnost volal drsný což je pole obsahující všechny hodnoty řetězec raw (un-escaped) interpretovány z doslovného textu. Takto můžete přistupovat ke službě drsný vlastnictví:
var name1 = "John", name2 = "Joan"; $ name1, $ name2, jak se máš oba? '; function foo () console.log (argumenty [0]); // Array ["hello $ name1,", ", jak se máš oba?"] Console.log (argumenty [0] .raw); // Array ["hello $ name1,", ", jak se máš oba?"] Console.log (argumenty [1]); // Joan
Použijte případy tagovaných šablon
Tagované šablony jsou užitečné, když potřebujete zlomit řetězec do samostatných částí, jako je tomu často v případě URL nebo při analýze jazyka. Najdete tu sbírku příklady šablon šablon zde.
Jiné než IE, šablony literály jsou podporovány ve všech hlavních prohlížečích.
Níže naleznete některé příklady funkcí tagů podpisy které představují argumenty:
var name = "John"; foo'hello $ name, jak se máš oba? '; bar'hello $ name, jak se máš oba? '; function foo (… args) console.log (args); // Array [Array ["hello", ", jak jste oba?"], "John"] panel funkcí (strVals,… exprVals) console.log (strVals); // Array ["hello", ", jak se máš oba?" ] console.log (exprVals); // Array ["John"]
V bar funkce, první parametr (strVals) je objekt šablony a druhá (která používá syntaxi šíření) je pole, které se shromáždilo hodnot hodnot z literálu šablony předané funkci.
Dejte řetězec dohromady
Pokud chceš získat celou větu (odvozeno z literálu) uvnitř funkce tagu, spojit všechny hodnoty matic nesoucích řetězce šablon a hodnot hodnot exprese. Takhle:
function foo (strs,… exprs) // pokud jsou v literálu obsaženy nějaké výrazy (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.';
strs pole drží všechny struny nalezené v doslovném a exprs drží hodnot hodnot z doslovného.
Pokud existuje i jedna hodnota výrazu, zřetězte každou hodnotu pole strs (s výjimkou poslední) s hodnotou stejného indexu exprs. Poté na konci přidejte poslední hodnotu strs pole na zřetězený řetězec, tvoří úplnou větu tudy.
