Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

Строки шаблонов в javascript

Всем привет. 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. Так что пользуйтесь на здоровье!

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

Оцените статью

Еще статьи

Редактирование контента на странице в HTML5

Теги для работы с текстом в HTML5

Индикаторы html

Три полезных метода для работы с объектами в javaScript

Работа с Grid в CSS

Работа с почтой php

CSS supports правило

Массив констант в php7

Как установить go

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

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

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.