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

В программировании термин “буквальный” относится к обозначение значений в коде. Например, мы записываем строковое значение с строковый литерал символы, заключенные в двойные или одинарные кавычки ("Foo", 'бар', "Это строка!").

Шаблонные литералы были введены в ECMAScript 6. Они работают очень похоже на строковые литералы; они производят значения шаблона а также необработанные значения шаблона, оба из которых являются строками.

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

Шаблонные литералы также могут создавать строки с другими значениями (полученный из выражений), для которого вы должны будете использовать оператор плюс в строковом литерале ("ваш идентификатор:" + idNo; где Idnó является переменным выражением с числовым значением).

Все эти возможности делают литералы шаблона более предпочтительными, чем создать строковые значения.

Синтаксис шаблонных литералов

Разделителем литерала шаблона является кавычка ' персонаж (также известный как символ обратной кавычки или серьезный символ ударения). Выражение внутри литерала (значение которого оценивается во время выполнения и включается в окончательное значение, производимое литералом) Фигурные скобки с предыдущий знак доллара $.

 'string $ someExpression more string' 

Вот некоторые примеры литералов шаблона производства без изменений, замещенный (выражения заменены их оцененными значениями), и многострочного строки.

 console.log ( 'Привет'); // привет var name = "Джоан"; console.log ('hello $ name'); // привет, Джоан console.log ('Дорогая Джоан, добро пожаловать.'); // Дорогая Джоан, // Добро пожаловать. 

Экранирование и необработанные значения шаблона

В шаблонном литерале ' (Кавычка), \ (обратная косая черта) и $ (знак доллара) символы следует избегать с использованием побег персонаж \ если они должны быть включены в их значение шаблона.

По умолчанию все escape-последовательности в литерале шаблона игнорируются. Если вы хотите включить его в вывод, вы должны использовать его необработанное значение шаблона.

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

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

Помеченные шаблоны

Помеченный шаблон является вызов функции где, вместо обычных скобок (с необязательными параметрами) помимо имени функции, есть шаблонный литерал из которого функция получает свои аргументы.

Итак, вместо вызова такой функции:

 Foo (ArgumentsForFoo); 

Это называется так:

 foo'ATemplateStringProvidingArgumentsForFoo '; 

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

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

После объекта шаблона аргументы функции тега включают все оценивали внешние ценности присутствует в этом буквальном (те, которые заключены в фигурные скобки $ ).

В приведенном ниже коде Foo функция создана для вывести свои аргументы. Затем функция называется в метке шаблона, с литералом шаблона, содержащим два выражения (название а также Я бы).

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

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

сырье имущество

Как упоминалось ранее, объект шаблона имеет свойство называется сырье который является массивом, содержащим все необработанные (неэкранированные) строковые значения интерпретируется из литерала шаблона. Вот как вы можете получить доступ к сырье имущество:

 var name1 = "Джон", name2 = "Джоан"; foo'hello \ $ name1, $ name2, как вы оба? '; function foo () console.log (arguments [0]); // Array ["hello $ name1,", ", как вы оба?"] Console.log (arguments [0] .raw); // Array ["hello \ $ name1,", ", как вы оба?"] Console.log (arguments [1]); // Джоан 

Примеры использования теговых шаблонов

Помеченные шаблоны полезны, когда вам нужно сломать строку на отдельные части, как это часто бывает в URL, или при синтаксическом анализе языка. Вы найдете коллекцию помеченные примеры шаблонов здесь.

Кроме IE, литералы шаблона поддерживается во всех основных браузерах.

Ниже вы можете найти несколько примеров функций тегов с разные подписи которые представляют аргументы:

 var name = "Джон"; foo'hello $ name, как вы оба? '; bar'hello $ name, как вы оба? '; function foo (… args) console.log (args); // Array [Array ["привет", ", как вы?"], "Джон"] function bar (strVals,… exprVals) console.log (strVals); // Array ["привет", ", как вы оба?" ] console.log (exprVals); // Array ["John"] 

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

Положить строку

Если хотите получить полное предложение (производный от литерала) внутри функции тега, объединить все значения массивов, несущих строки шаблона и оцененные значения выражения. Как это:

 function foo (strs,… exprs) // если есть какие-либо выражения, включенные в литерал if (exprs.length! == 0) var n = strs.length - 1, result = "; for (var i = 0 я < 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. Затем в конце добавьте последнее значение СПО массив конкатенированной строки, формируя полное предложение сюда.