Шаблонные строки

Дата публикации: 2016-10-13

Шаблонные строки

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

Чтобы создать шаблонную строку, необходимо использовать символ обратной кавычки (`). Так мы создадим новую строку, которую можно использовать по своему усмотрению. Стандартная запись:

let newString = `A string`;

1	let newString = `A string`;

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

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

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

1 2	// Старый способ var myMultiString = 'Текст, который я хочу разместить\nНа двух строках!';

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

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

1 2	var myMultiString= `Этот текст будет на двух строках!`;

Мы получим текст с двумя строками. Именно возможность перенести текст на новую строку привлекает в шаблонных строках. Этот шаблонный язык отлично подходит для создания HTML кода. Об этом мы поговорим чуть позже. Но что делать с конкатенацией? Давайте взглянем, как можно динамически пристыковывать значения в новых шаблонных строках.

Выражения

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

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

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

Синтаксис ${} позволяет вставить в скобки выражение, которое передаст свое значение. В нашем случае это просто переменная со строкой. Тут стоит обратить внимание на: если необходимо прицепить значение, как в примере выше, не нужно использовать шаблонную строку для переменной name. Можно использовать обычную строку.

console.log(`Привет, меня зовут ${'Райан'}`);

1	console.log(`Привет, меня зовут ${'Райан'}`);

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

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

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}`;
    }
};

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,
    ...
}

{

"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>The Pokemon ${data.name} has a base experience of ${data.base_experience}, they also weigh ${data.weight}</p>
        </article>
    `
}

function createMarkup(data) {

return `

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

</article>

}

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

Тегированные шаблоны

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

function myTaggedLiteral(strings) {
    console.log(strings);
}

myTaggedLiteral`test`; 
// ["test"]

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) {

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

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: "//ryanchristiani.com"
}

const studentTemplate = templater`<article>
    <h3>${'name'} is a student at HackerYou</h3>
    <p>You can find their work at ${'blogUrl'}.</p>

</article>`;

const myTemplate = studentTemplate(student);
console.log(myTemplate);
// Output will look like this!
// <article>
//    <h3>Ryan Christiani is a student at HackerYou</h3>
//    <p>You can find their work at //ryanchristiani.com.</p>
// </article>
Посмотрим, как выполняется наша функция templater.
const templater = function(strings, ...keys) {

}

const student = {

name: "Ryan Christiani",

blogUrl: "//ryanchristiani.com"

}

const studentTemplate = templater`<article>

<h3>${'name'} is a student at HackerYou</h3>

<p>You can find their work at ${'blogUrl'}.</p>

</article>`;

const myTemplate = studentTemplate(student);

console.log(myTemplate);

// Output will look like this!

// <article>

// <h3>Ryan Christiani is a student at HackerYou</h3>

// <p>You can find their work at //ryanchristiani.com.</p>

// </article>

Посмотрим, как выполняется наша функция templater.

const templater = function(strings, ...keys) {

}

Первым делом вы обратите внимание на параметр …keys. Троеточие называется оставшимся параметром. Этот параметр собирает все параметры функции в массив.

Далее нам необходимо вернуть функцию, которая будет стучаться в наш объект. Именно возврат функции позволяет нам вызывать и передавать данные:

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

    } 
}

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

function templater(strings, ...keys) {

return function(data) {

let temp = strings.slice();

keys.forEach((key, i) => {

temp[i] = temp[i] + data[key];

});

return temp.join('');

}

};

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

Автор: Ryan Christiani

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки: JavaScript