Шаблонні рядка

43

Від автора: Шаблонні рядки були представлені в ES6 – це новий спосіб створення рядків. З’явилися нові можливості по контролю над динамічними рядками в наших програмах. Незабаром підуть у минуле часи довгих конкатенаций рядків!

Щоб створити шаблонну рядок, необхідно використовувати символ зворотного лапки (`). Так ми створимо нову рядка, яку можна використовувати за своїм розсудом. Стандартний запис:

let newString = `A string`;

Многострочность

Шаблонні рядка тепер дозволяють записувати значення змінних на декількох рядках! Якщо раніше необхідно було перенести текст на новий рядок, потрібно було використовувати символ \n.

// Старий спосіб
var myMultiString = ‘Текст, який я хочу розмістити\пНа двох рядках!’;

Шаблонні рядка дозволяють додати новий рядок звичайним натисканням клавіші Enter.

var myMultiString= `Цей текст буде
на двох рядках!`;

Ми отримаємо текст з двома рядками. Саме можливість перенести текст на новий рядок приваблює в шаблонних рядках. Цей шаблонний мова відмінно підходить для створення HTML-коду. Про це ми поговоримо трохи пізніше. Але що робити з конкатенацией? Давайте поглянемо, як можна динамічно пристыковывать значення в нових шаблонних рядках.

Вирази

У новому синтаксисі шаблонних рядків є так звані вираження. Виглядають вони так: ${expression}. Розберемо нижче код:

let name = `Райан`;
console.log(`Привіт, мене звуть ${name}`);

Синтаксис ${} дозволяє вставити в дужки вираз, яке передасть своє значення. У нашому випадку це просто змінна зі рядком. Тут варто звернути увагу на: якщо необхідно причепити значення, як у прикладі вище, не треба використовувати шаблонну рядок змінної name. Можна використовувати звичайний рядок.

console.log(`Привіт, мене звуть ${‘Райан’}`);

В консолі ми отримаємо той же результат. Вирази дозволяють не просто вставляти змінні з рядками. В виразах можна проводити будь-які математичні операції.

let price = 19.99;
let tax = 1.13;
let total = `The total prices is ${price * tax}`;

Вирази можна використовувати і з більш складними об’єктами.

let person = {
firstName: `Ryan`,
lastName: `Christiani`,
sayName() {
return `Hi my name is ${this.firstName} ${this.lastName}`;
}
};

У наведеному вище прикладі ми створили об’єкт person і метод sayName().У нас є доступ до властивостей об’єкта прямо з синтаксису ${}.

Шаблони HTML

Шаблонні рядка дозволяють записувати текст на декількох рядках перемінних, а також пристыковывать контент до рядку. Таким чином, на основі шаблонних рядків можна робити шаблони HTML. Уявіть, що у нас є якісь дані з API:

{
«id»: 1,
«name»: «Bulbasaur»,
«base_experience»: 64,
«height»: 7,
«is_default»: true,
«order»: 1,
«weight»: 69,

}

І це «уявне» API, звичайно — pokeapi! Пам’ятаючи структуру даних, створимо розмітку, яка покаже цього покемона.

function createMarkup(data) {
return `

${data.name}

The Pokemon ${data.name} has a base experience of ${data.base_experience}, they also weigh ${data.weight}

`
}

Не потрібно використовувати бібліотеки типу Handlebars або Mustache. Тепер ми можемо створювати прості шаблони в JS!

Теговані шаблони

Шаблонні рядка дозволяють нам створювати теговані шаблонні рядка. Ви створюєте звичайну функцію, яка ніяк не відрізняється від інших. Однак її виклик буде відрізнятися:

function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral’test`;
// [«test»]

Зверніть увагу на відсутність дужок при виклику функції! На місці цих дужок ми записуємо шаблонну рядок. Як параметр функції передається масив рядків у нашій шаблонної рядку. Давайте розширимо посилаємо в функцію рядок і додамо в неї вираз, а також додамо новий аргумент у функцію.

function myTaggedLiteral(strings, value) {
console.log(strings,value);
}
let someText = ‘Neat’;
myTaggedLiteral’test ${someText}`;
// [«test», «»]
// «Neat»

Отримати доступ до висловом можна з наступних параметрів. Скажімо, ми додали ще один вираз.

function myTaggedLiteral(strings, value, value2) {
console.log(strings,value);
}
let someText = ‘Neat’;
myTaggedLiteral’test ${someText} ${2 + 3}`;
// [«test», «»]
// «Neat»
// 5

Дуже потужний інструмент: він дозволяє приймати дані з рядка і маніпулювати ними.

Багаторазові шаблони

Розглянемо простий приклад використання шаблонних рядків. Вище ми бачили, як шаблонні рядка відмінно підходять для створення шаблонів! Давайте просунемо ідею далі і створимо функцію, яка дозволить нам створювати багаторазові шаблони. Ідея полягає у створенні первинного шаблону, в який будуть передаватися дані.

const student = {
name: «Ryan Christiani»,
blogUrl: «http://ryanchristiani.com»
}
const studentTemplate = templater`

${‘name’} is a student at HackerYou

You can find their work at ${‘blogUrl’}.

`;
const myTemplate = studentTemplate(student);
console.log(myTemplate);
// Output will look like this!
//
//

Ryan Christiani is a student at HackerYou

//

You can find their work at http://ryanchristiani.com.

//
Подивимося, як виконується наша функція templater.
const templater = function(strings, …keys) {
}

Першим ділом ви зверніть увагу на параметр …keys. Три крапки називається залишилися параметром. Цей параметр збирає всі параметри функції в масив.

Далі нам необхідно повернути функцію, яка буде стукати в наш об’єкт. Саме повернення функції дозволяє нам викликати і передавати дані:

studentTemplate(student).
const templater = function(strings, …keys) {
return function(data) {
}
}

Ми отримали дані, які необхідно опрацювати. По-перше, нам необхідно скопіювати масив strings. Копія нам потрібна на той випадок, якщо нам знадобиться послатися на оригінальний масив. Далі необхідно пройтися циклом по масиву keys і витягнути з об’єкта збігу по ключу, після чого вставити в потрібне місце в новому масиві (подивіться, як ми в прикладі передаємо рядок ${}). Залишилося все об’єднати в один рядок і повернути з функції!

function templater(strings, …keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp = temp + data[key];
});
return temp.join(«);
}
};

Це не самий складний приклад. Ми не можемо розміщувати вкладені дані або значення масивів. У нас є тільки прості рядки. Однак я сподіваюся, цей приклад показав вам, що ви можете робити з тегированными шаблонами.