Как да използвате ES6 шаблонни литерали в JavaScript

В програмирането терминът “буквален” се отнася до нотация на стойности в код. Например, не записваме стойност на низ със a string literal които са символи, затворени в двойни или единични кавички ("Foo", "Бар", "Това е низ!").

Шаблонни литерали бяха въведени в ECMAScript 6. Те работят съвсем подобно на литерали с низове; те произвеждат стойности на шаблона и сурови стойности на шаблони, и двете от тях са низове.

Въпреки това, за разлика от низовите литерали, шаблонните литерали могат да генерират стойности, които са многопластови струни, нещо, което можете да постигнете само в литерала на низ добавяне на нови символи в реда (\ Н) към него.

Шаблонните литерали също могат създаване на низове с други стойности (извлечени от изрази), за които ще трябва да използвате плюс оператор в литерал от низ ("идентификаторът ви е:" + idNo; където IDNO е променлив израз с цифрова стойност).

Всички тези характеристики правят шаблоните литерали по-предпочитани създаване на низови стойности.

Синтаксис на литерали за шаблони

Разделителят на литерала на шаблона е обратен апостроф " характер (също познат като символ на обратната следа или символ с тежък акцент). Едно изражение вътре в литерала (стойността на който е оценяват по време на изпълнение и включена в крайната стойност, произведена от литерала) е затворена в къдрави скоби с предходен знак за долар $.

 'низ $ someExpression още низ' 

Ето няколко примери за литерали за шаблони производство непроменен, заместен (изрази, заменени с техните оценени стойности), и мулти-облицовани струни.

 console.log ( "здравей"); // hello var name = "Joan"; console.log ('hello $ name'); // hello Joan console.log ("Уважаеми Джоан, Добре дошли."); // Уважаеми Джоан, // Добре дошли. 

Излизащи & сурови стойности на шаблони

В литерала на шаблон, " (Обратен апостроф), \ (наклонена черта) и $ знаци (знак за долар) трябва да се избягва използвайки бягство характер \ ако трябва да бъдат включени в стойността на шаблона.

По подразбиране всички изходни последователности в литерала на шаблон са игнорирани. Ако искате да го включите в изхода, трябва да го използвате сурова стойност на шаблона.

 console.log ('вграден код в маркиране:' код '); // вграден код в маркирането:' code 'var name = "Joan"; console.log (' hello name. '); / / hello $ name. console.log (String.raw'hello $ име. '); // hello \ t. 

Най- String.raw метод извежда сурови стойности на шаблон (необработената форма на литерала на шаблон). В горния код се извиква функцията на суров метод се нарича “шаблон с етикет”.

Маркирани шаблони

Шаблон с етикет е функционално повикване където, вместо обичайните скоби (с допълнителни параметри) освен името на функцията, има шаблонен литерал от която функцията получава своите аргументи.

Така че, вместо да извиквате функция като тази:

 Фу (ArgumentsForFoo); 

Нарича се така:

 foo'ATemplateStringProvidingArgumentsForFoo "; 

Функцията Foo се нарича a функция. Първият му аргумент, получен от литерала на шаблона, е масив наречена шаблонен обект.

Обектът на шаблона (масив) се задържа всички стойности на низовете интерпретиран от литерала на шаблона и има a суров свойство (друг масив), което притежава всички сурови (ненабрани) низови стойности интерпретиран от същия буквален.

Следвайки шаблонен обект, аргументите на функцията за тагове включват всички оценена външни стойности присъства в този буквален (онези, които са затворени в фигурните скоби $ ).

В кода по-долу, Foo функцията е създадена изведе аргументите си. След това се извиква функцията в модела с тагиран шаблон, с литерал с шаблон с два израза (име и документ за самоличност).

 var име = "Джон"; var id = 478; foo'hello $ name. идентификаторът ви е: $ id. '; функция foo () console.log (аргументи [0]); // Array ["hello", ". Идентификаторът ви е:", "." ] console.log (аргументи [1]); // John console.log (аргументи [2]); // 478 

Първият изведен аргумент е шаблонен обект пренасяйки всички низове, интерпретирани от литерала на шаблона, вторият и третият аргументи са оценени стойности на изразите, име и документ за самоличност.

Най- суров Имот

Както вече споменахме, обектът на шаблона има a собственост, наречена суров което е масив, съдържащ всички сурови (ненабрани) низови стойности интерпретиран от литерала на шаблона. Ето как можете да получите достъп до суров Имот:

 var name1 = "Джон", име2 = "Джоан"; $ name1, $ name2, как сте и двамата? '; функция foo () console.log (аргументи [0]); // Array ["hello $ name1,", ", как сте и двамата?"] Console.log (аргументи [0] .raw); // Array ["hello \ t name1,", ", как сте и двамата?"] Console.log (аргументи [1]); // Joan 

Използвайте случаи на маркирани шаблони

Маркираните шаблони са полезни, когато имате нужда прекъсване на низ в отделни части, като това често се случва в даден URL адрес, или докато се анализира език. Ще намерите колекция от тук са отбелязани примери за шаблони.

Други от IE, шаблонни литерали Поддържа се във всички основни браузъри.

По-долу можете да намерите някои примери за функции на маркерите с различни подписи които представят аргументите:

 var име = "Джон"; foo'hello $ name, как сте и двамата? '; bar'hello $ name, как сте и двамата? '; функция foo (… args) console.log (args); // Array [Array ["hello", "как сте и двамата?"], "John"] лента с функции (strVals,… exprVals) console.log (strVals); // Array ["hello", "как сте и двамата?" ] console.log (exprVals); // Array ["John"] 

В бар функция, първият параметър (strVals) е шаблонен обект а вторият (който използва синтаксиса на разпространението) е масив, който се събира всички оценени стойности на изразяване от литерала на шаблона, предаден на функцията.

Сложете низа заедно

Ако искаш получи цялото изречение (произлизаща от литерала) вътре в функцията за тагове, свързва всички стойности от масивите, носещи шаблонните низове и оценените стойности на израза. Като този:

 функция foo (strs,… exprs) // ако има някакви изрази, включени в литерала, ако (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.'; 

Най- ДСС масив притежава всички струни намерени в буквалния и exprs притежава всички оценени стойности на изразяване от литерала.

Ако съществува дори една стойност на израз, свързва се всяка стойност на масива от ДСС (с изключение на последната) със стойност на същия индекс exprs. След това в края добавете последната стойност на ДСС масив към конкатенирания низ, оформяне на пълно изречение насам.