Всем привет. Cегодня мы познакомимся со строками в которые можно встраивать различные шаблоны. Итак, поехали!

Допустим у нас есть строка в которой периодически изменяется какая то часть.

var min = 12;

var string = "Осталось "+ min +" минут";

console.log(string);

В данном случае через переменную min в строке string изменяются минуты.

Чтобы использовать значение переменной нам пришлось разорвать строку на части и к ним прибавить значение переменной. Это типичная часто встречаемая запись. В стандарте ES2015 javascript появились так называемые строки шаблонов. C помощью них мы можем более чисто встраивать в строки значения переменных, функций, методов и даже целые куски кода. Выглядит это примерно, так:

var vr = 12;

var string = `Осталось ${vr} минут`;

console.log(string);

Здесь мы в качестве значения переменной string использовали строку шаблонов. Обратите внимание что данная строка оборачивается обратными кавычками. И чтобы воспользоваться значением переменной vr мы применили такую конструкцию ${} в которой и указано название переменной(шаблон).

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

var string = " "+`Осталось ${vr} минут`+' ';

Еще одним неоспоримым преимуществом строк шаблонов является то, что они автоматически поддерживают переносы строк, пример:

var vr = 12;

var string = "Меня зовут Андрей \r\n" +
            "мне "+vr+" лет";
console.log(string);

Допустим я хочу вывести текст в две строки. Здесь показано как это реализовано при использовании обычных строк.

var vr = 12;

    var string = `Меня зовут Андрей
мне ${vr} лет`;

    console.log(string);

А вот реализация при использовании строки шаблонов. Как видите здесь нам нет необходимости указывать перенос строки \r\n. Достаточно сделать перенос строки в коде.

Все функции и методы для строк, также применимы к строкам шаблонов. Поддержка осуществлена во всех современных браузерах в том числе и в IE. Так что пользуйтесь на здоровье!

На этом данная статья подошла к концу. Желаю вам успехов и удачи! Пока!