Використання літературних шаблонів ES6 у JavaScript
У програмуванні - термін “буквально” відноситься до позначення цінностей в коді. Наприклад, ми записуємо значення рядка за допомогою a строковий літерал це символи, укладені у подвійні або окремі лапки ("foo", 'бар', "Це рядок!").
Шаблонні літерали були введені в Росії ECMAScript 6. Вони працюють так само, як і струнні літерали; вони виробляють значення шаблону і значення шаблону, обидва з яких є рядками.
Однак, на відміну від строкових літералів, літерали шаблонів можуть створювати значення, які є багаторядні струни, що ви можете досягти в літералі рядка тільки за допомогою додавання нових символів рядка (n) до нього.
Літерали шаблонів також можуть бути створювати рядки з іншими значеннями (отримано з виразів), для чого ви повинні використовувати плюс оператор у рядковому літералі ("Ваш ідентифікатор:" + idNo; де idNo є змінним виразом із числовим значенням).
Всі ці особливості роблять шаблонні літерали краще створювати рядкові значення.
Синтаксис літералів шаблонів
Розмежувач літералу шаблону - це назад ' характер (також відомий як символ зворотного відбитка або символ важкого акценту). Вираз всередині літералу (значення якого є оцінюється під час виконання і включені в кінцеве значення, що виробляється літералом) укладається в фігурні дужки з попередній знак долара $.
'рядок $ someExpression більше рядка'
Ось деякі приклади літералів шаблонів виробництво без змін, заміщений (вирази замінені на їх оцінені значення), і багатошаровий струни.
console.log ('hello'); // hello var name = "Joan"; console.log ('hello $ name'); // Привіт Джоан console.log ("Шановна Джоан, Ласкаво просимо!"); // Шановний Джоан, // Ласкаво просимо. Вихідні & вихідні значення шаблонів
У літералі шаблону ' (backtick), \ T (зворотний слеш), і $ символів (знак долара) слід уникнути за допомогою втечний характер \ T якщо вони мають бути включені до їхнього значення шаблону.
За замовчуванням всі вихідні послідовності в літералі шаблону є ігноруються. Якщо ви хочете включити його у вихідний, вам потрібно використовувати його значення шаблону.
console.log ('вбудований код у розмітці:' code '); // вбудований код у розмітці:' code 'var name = "Joan"; console.log (' hello \ t / hello $ name. console.log (String.raw'hello $ name. '); // hello $ name. The String.raw метод виводить сирі значення шаблону (необроблена строкова форма літерала шаблону). У наведеному вище коді функція виклику сировина Метод називається як “з тегами”.
Шаблони з тегами
Шаблон із тегами - це виклику функції де, замість звичайних дужок (з додатковими параметрами), крім назви функції, є літерал шаблону з якої функція отримує свої аргументи.
Отже, замість того, щоб викликати таку функцію:
foo (ArgumentsForFoo);
Це називається так:
foo'ATemplateStringПроведення аргументівForFoo ';
Функція foo називається a функції тегів. Його перший аргумент, отриманий від літерала шаблону, є масив називається об'єкт шаблону.
Об'єкт шаблону (масив) утримується всі значення рядка інтерпретується з літерала шаблону і має a сировина властивість (інший масив) всі сирі рядкові значення (un-escaped) інтерпретується з одного і того ж буквального.
Дотримуючись об'єкта шаблону, аргументи функції тега включають всі оцінюється зовнішні значення присутні в цьому літералі (ті, що укладені в фігурні дужки $ ).
У наведеному нижче коді foo створена функція вивести свої аргументи. Потім викликається функція в шаблоні з тегами, з літералом шаблону з двома виразами (ім'я і id).
var name = "Джон"; var id = 478; foo'hello $ name. Ваш ідентифікатор: $ id. '; function foo () console.log (аргументи [0]); // Array ["hello", ". Ваш ідентифікатор:", "." ] console.log (аргументи [1]); // John console.log (аргументи [2]); // 478
Першим виведеним аргументом є об'єкт шаблону несучи всі рядки, інтерпретовані з літералу шаблону, другий і третій аргументи є оцінені значення виразів, ім'я і id.
The сировина власності
Як згадувалося раніше, об'єкт шаблону має a властивість називається сировина який є масивом, що містить всі сирі рядкові значення (un-escaped) інтерпретується з літерала шаблону. Таким чином можна отримати доступ до сировина власність:
var name1 = "Джон", name2 = "Джоан"; foo'hello $ name1, $ name2, як ви обидва? '; function foo () console.log (аргументи [0]); // Array ["hello $ name1,", ", як ви обидва?"] Console.log (аргументи [0] .raw); // Array ["hello \ t name1,", ", як ви обидва?"] Console.log (аргументи [1]); // Joan
Використовуйте випадки тегів шаблонів
Шаблони з тегами корисні, коли потрібно зламати рядок на окремі частини, як це часто буває в URL, або під час аналізу мови. Ви знайдете колекцію тут позначені приклади шаблонів.
За винятком IE, шаблонні літерали є підтримується у всіх основних браузерах.
Нижче ви можете знайти деякі приклади функцій тегів з різні підписи що представляють аргументи:
var name = "Джон"; 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) // якщо є будь-які вирази, включені в літерал if (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.';
The strs масив всі струни зустрічається в буквальному і exprs тримається всі оцінені значення виразу від літерала.
Якщо навіть одне значення вираження існує, об'єднайте кожне значення масиву strs (крім останнього) зі значенням того ж індексу exprs. Потім, наприкінці, додайте останнє значення strs масив до зв'язаних рядків, формування повного речення сюди.
