ES6 Template Strings. Шаблонные строки (V).

Template Strings. Шаблоны или шаблонные строки.

Все материалы по ES6

Еще одним приятным добавлением в ES6 являются шаблоны или шаблонные строки (template literals or template strings).

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

Первое что мы сделаем это запустим скрипт Babel, который будет следить за файлами и при их изменении создавать свежие версии.

Откроем папку проекта в командной строке (КС). Вводим команду:

npm run watch

И нажать Enter

Последние версии браузеров поддерживают шаблоны без транспиляции. Измененный код нас будет интересовать в порядке ознакомления.

В папке src создадим файл templates.js и сразу укажу его в файле index.html

<script src="src/templates.js"></script>

Сначала в примере я воспользуюсь простой строкой, а потом заменю её на шаблонную.

В этом файле мы создадим функцию greet(name), которая будет принимать имя.

Функция выведет сообщение "Hello " + name в консоле браузера.

function greet( name ) {
 console.log("Hello " + name );
};

greet("Bill");

В консоле мы увидим:

Теперь давайте изменим простую строку на шаблонную.

Для этого нам нужно заменить обычные кавычки на обратные.

Клавиша обратных кавычек ` находится на клавиатуре в верхнем левом углу - буква Ё в русской раскладке.

Поместим весь наш "вывод" в обратные кавычки, удалим плюс оставим пробел и поместим нашу переменную в фигурные скобки -{}, поставив перед ними знак доллора ${имя_переменной}.

Сочетание ${} еще называется местозаполнителем

function greet( name ) {
 console.log(`Hello ${name}` );
};

greet("Bill");

Если посмотреть на резулльтат в браузере, то он будет таким же, но при этом использовать шаблон куда легче. Главное - не забывать ставить пробелы и переносы строк, которые автоматически будут отображаться при выводе в консоль.

Если посмотреть на тип шаблонной строки используя оператор typeof:

console.log(typeof`Hello ${name}` ); // string

Это значит, что шаблоны такие же строки! То есть - мы можем с нми использовать все методы строк!

Например: Мы можем вывести сообщение так, чтбы все буквы были заглавными.

function greet( name ) {
 console.log(`Hello ${name}`.toUpperCase() );
};

greet("Bill");

Теперь давайте посмотрим на то, что создал Babel dist/templates.js

"use strict";

function greet(name) {
 console.log(("Hello " + name).toUpperCase());
};

greet("Bill");

Он сделал то, что мы с вами и сами бы написали, если бы использовали обычную строку.

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

Шаблонные строки, также поддерживают многострочность. То есть их можно спокойно переносить на несколько строк.

Посмотрим на примере.

Мы создадим новую функцию, которая будет принимать параметры - откого, кому, тема и сообщение.

И вызовем эту функцию с некторыми аргументами:

function createEmail( to, from, subject, message ) {
 console.log(`
   to: ${to}
   from: ${from}
   subject: ${subject}
   message: ${message}
  `);
};

createEmail("john@mail.com", "elen@mail.com", "Hello", "How are you?");

Как вы можете убедиться, вывод в консоле состоялся именно так, как мы и написали - в 4 строки и с соблюдением табуляции.

Теперь посмотрим на то, как это сгенерировал Babel -> dist/templates.js

function createEmail(to, from, subject, message) {
 console.log("\n\t\t\tto: " + to + "\n\t\t\tfrom: " + from + "\n\t\t\tsubject: " + subject + "\n\t\t\tmessage: " + message + "\n\t\t");
};

createEmail("john@mail.com", "elen@mail.com", "Hello", "How are you?");

Создадим функцию, которая будет скалдывать два числа и выводить в консоль в виде арифметического примера.

Вызовем функцию с призвольными числами:

function add( x, y ) {
 console.log(`${x} + ${y} = ${x + y}`)
}

add( 4, 7 );

Здесь первый +, является частью строки. Второй + является частью выражения и складывает наши переменные.

В результате мы увидм:

А что если мы полчаем данные от пользователя со страницы?

Данные будут в виде строк.

Вызовем функцию так add( '4', '7' );

Резуьтат:

так получилось, потому что мы складывали строки.

Для того, чтобы убедиться. что мы складываем именно числа, мы можем применить функцию parseInt()

function add( x, y ) {
 console.log(`${x} + ${y} = ${parseInt(x) + parseInt(y)}`)
}

add( '4', '7' );

В результаье будет 11, как и в предыдущем примере.

То ест - сложение будет правильным.

Тегирование

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

Посмотрим на примере:

Простой вывод в консоль имени (переменной).

let name = "Bill";

console.log(`Hello ${name}`);

Результат:

А теперь я хочу, чтоб name всегда выводилась большими буквами.

Для этого я могу присвоить шаблону тег. Тегом будет название функции, которой я смогу обработать строку.

Для начала я создам функцию и назову её upperName(), первый аргумент которой будет содержать массив строковых литералов literals.

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

value1, value2, value3 и т.д.

function upperName(literals, value) {
 console.log(literals, value);
}

В том случае, когда мы не знаем сколько их будет, то в ES6 есть синтаксис оставшиеся параметры функции. Он предоставляет неогрмниченное множество аргументов в виде массива. Мы можем поставить три точки перед ...values. Теперь ...values будет массивом аргументов.

Пример:

function upperName(literals, ...values) {
 console.log(literals, value);
}

Для того, чтобы присвоить шаблону тег, я просто напишу название функции перед ним

let name = "Bill";

console.log(upperName`Hello ${name}`);

function upperName(literals, value) {
 console.log(literals, value)
}

Посмотрим в консоль:

В консоле мы увидим массив, в котором содержатся строки из которых состоит шаблон и значение переменной name.

Функция должна возвращать строку, но до этого мы можем сделать с ней все что угодно.

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

let name = "Bill";

console.log(upperName`Hello ${name}`);

function upperName(literals, value) {
 return literals[0] + value.toUpperCase();
}

То есть, мы взяли первый литерал - Hello и прибавили к нему значение value, в кторм сделали все буквы заглавными - .toUpperCase().

Так мы сделали все буквы в переменной name заглавными.

В JavaScript, который работает нпрямую с HTML-шаблоном, шаблонные строки открывают массу дополнительных возможностей!