Шаблонные строки, введенные в ES6, представляют собой новый способ создания строки. С ними пришли новые функции, которые дают нам больше контроля над динамическими строками в наших программах. Настал конец эрохи длинной конкатенации строк!
Для создания шаблонных строк вместо одинарных (') или двойных (") используются обратные (`) кавычки. В результате будет создана новая строка, которую мы сможем использовать как захотим.
Стандартная запись:
let newString = `A string`;
Многострочность
Самое замечательное в шаблонных строках то, что теперь мы можем создать многостроковые строки! Раньше, для этого мы должны были использовать \n или символ новой строки.
// Старый вариант записи
var myMultiString = 'Текст\nна две строки!';
С шаблонными строками мы можем просто взять и добавить новую строку, как будто мы пишем текст:
var myMultiString= `Текст
на две строки!`;
Это создаст строку с новой строкой внутри себя. Эта возможность делает Шаблонные Строки по-настоящему отличной примочкой для HTML-разработок, о которых мы поговорим позднее. Но как насчет конкатенации? Давайте посмотрим, как мы можем динамически добавлять значения в наших новые литералы шаблонов.
Выражения
В новом синтаксисе шаблонных строк у нас есть то, что называют выражения, и они выглядят следующим образом: ${expression}. Рассмотрим код, приведенный ниже.
let name = `Жан`;
console.log(`Меня зовут ${name}`);
Синтаксис ${} позволяет вписать в него выражение, которое создаст значение, которое в свою очередь будет являться всего лишь переменной, держащей строку, как в примере выше. Также заметим: если вы хотите добавить значение, опять же, как в примере выше, вам не нужно использовать шаблонную строку для переменной name. Это может быть обычная строка.
console.log(`Меня зовут ${'Жан'}`);
Результат будет тем же. Эти выражения не просто позволяют нам вписать в них переменные, содержащие строки. Мы можем получить любой тип выражений, который нам только понадобится.
let price = 19.99;
let tax = 1.13;
let total = `Итоговая стоимость ${price * tax}`;
Мы также можем использовать эту функцию с более сложным объектом.
let person = {
firstName: `Жан`,
lastName: `Дема`,
sayName() {
return `Меня зовут ${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 `
<article class="pokemon">
<h3>${data.name}</h3>
<p>Покемон ${data.name} имеет опыт ${data.base_experience} и весит ${data.weight}</p>
</article>
`
}
Мы можем создать приятный и простой в использовании шаблон в с помощью JavaScript без использования библиотек Handlebars или Mustache!
Отмеченные Шаблоны
Еще одна фишка Шаблонных строк – возможность создания Отмеченных Шаблонов. Вы можете создать функцию и она будет выглядеть как любая другая функция, но только не в случае, когда вы будете ее вызывать:
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: "Жан Дема",
blogUrl: "http://websketches.ru"
}
const studentTemplate = templater`<article>
<h3>${'name'} учится в Сорбонне</h3>
<p>Он ведет блог на ${'blogUrl'}.</p>
</article>`;
const myTemplate = studentTemplate(student);
console.log(myTemplate);
// Output will look like this!
// <article>
// <h3>Жан Дема учится в Сорбонне</h3>
// <p>Он ведет блог на http://websketches.ru</p>
// </article>
Давайте посмотрим на реализацию нашей функции templater.
const templater = function(strings, ...keys) {
}
Первое, что вы заметите, - это параметр ...keys. Синтаксис ... это то, что называется Rest Parameters (Остаточные параметры); он собирает все параметры из функции и создает нам массив из них.
Следующее, что мы хотим сделать, это вернуть вернуть функцию, которая будет иметь доступ к нашему объекту. Возврат функции позволяет нам вызывать и передавать данные студента вот таким образом: 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[i] = temp[i] + data[key];
});
return temp.join('');
}
};
Вы заметите, что это вовсе не исчерпывающий пример. Мы не можем размещать полученные данные или значения из массивов – это просто строки. Но, надеюсь, этот пример наглядно покажет, что можно делать с помощью Шаблонных строк.
И в заключение, поддержка браузеров: