ES6: Шаблонные строки (Template literals)

Опубликовано: 29 сентября 2016 г.
  • javascript
Шаблонные строки, введенные в ES6, представляют собой новый способ создания строки. С ними пришли новые функции, которые дают нам больше контроля над динамическими строками в наших программах. Настал конец эрохи длинной конкатенации строк!

Для создания шаблонных строк вместо одинарных (') или двойных (") используются обратные (`) кавычки. В результате будет создана новая строка, которую мы сможем использовать как захотим.

Литералы шаблона (Template literals) в ECMAScript 6

Стандартная запись:

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('');
    }
};

Вы заметите, что это вовсе не исчерпывающий пример. Мы не можем размещать полученные данные или значения из массивов – это просто строки. Но, надеюсь, этот пример наглядно покажет, что можно делать с помощью Шаблонных строк.

И в заключение, поддержка браузеров:

Internet Explorer Chrome Opera Safari Firefox
41 30 34
Android Firefox Mobile Opera Mobile Safari Mobile
34 28
Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
CanvasSPAcssjavascriptjqueryphotoshopphpunitywordpress{"fieldValue":[{"image_preview":"","image_demo":"","example":""}],"fieldSettings":{"autoincrement":1}}{"fieldValue":[{"image_preview":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","image_demo":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","example":""}],"fieldSettings":{"autoincrement":1}}Аудио/Видеоаккордеонанимациябазы данныхбраузерные игрыверсткагалереяграфикакартыкнопкименюпараллаксподсказкипопаппрелоадерслайдертаймерформычекбоксыэлементы интерфейса
© 2009-2017 WebSketches.ru