Abr@X@bra.ru
Курс по ES6 #5. Шаблонные строки

Курс по ES6 #5. Шаблонные строки

28.04.2017
153

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

Первое, что нужно сделать – это запустить скрипт Babel.
В папке src, я создам файл - templates.js. И сразу подключу его на странице index.html.


  
С начало в примере, я воспользуюсь пустой строкой, а потом заменю ее на шаблонную. В файле templates.js, создаем функцию greet, которая будет принимать имя.



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



Далее вызову функцию с названием Bill.



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

 

Мы видим в консоле - Hello Bill
Теперь давайте изменим простую строку, на шаблонную. Для этого нужно изменить обычные кавычки на обратные. Первую кавычку я заменю на обратную, вторую я удалю, также удалю знак плюс. И после переменной поставлю закрывающую кавычку.



Далее, необходимо обозначить - name, как переменную. Сейчас name, является частью строки. Для этого используется знак $ и фигурные скобки {}.

 
Давайте посмотрим на результат.

 

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

Тегирование

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


  
Допустим я хочу, чтобы name всегда выводился большими буквами. Для этого я могу присвоить шаблону тег. Тегом будет название функции, которой я смогу обработать строку.
Для начало я создам функцию и назаву ее - upperName. Первый аргумент, будет содержать массив строковых рефералов.



Второй и последующие аргументы, содержат значения вычисленных выражений. Мы отправим одно, а именно - name. Но если бы мы, отправляли бы несколько то было бы следующие - value1, value2, value3 и т.д.
А что если я не знаю сколько их будет? Про это я расскажу чуть позже.
В теле функции выводим значение переменной:



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



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



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



Посмотрим на результат.

 

В JavaScript, который напрямую работает с html, шаблонный строки не только упрощают работу, но и открывают множество возможностей.  
Давайте вернемся к функции upperName
Что если мы не знаем сколько значений к нам придет? Для этого в ES6, был добавлен синтаксис - оставшихся параметров в функции. Который позволяет предоставлять неограниченное множество аргументов в виде массива.



Value - будет массивом. И еще одним нововведением, касающихся параметров функции, являются параметры по умолчанию, о которых я расскажу в следующих постах на данную тему.  



ES6
Читайте также:
Курс по ES6 #2. Использование let

Курс по ES6 #2. Использование let

Как вы знаете в JavaScript, а именно в ES5, есть две области видимости. Глобальная и в приделал функции. В ES6 теперь ес...
Читать
Курс по ES6 #1. Установка и настройка Babel

Курс по ES6 #1. Установка и настройка Babel

ES6 теперь является официальным стандартом. Но большинство современных браузеров на данный момент, не поддерживает все н...
Читать
Курс по ES6 #0. Пилотный выпуск. Вступление

Курс по ES6 #0. Пилотный выпуск. Вступление

ECMAScript 2015 или ES6 летом 2015 был принят как официальный стандарт, и является самым крупным обновлением языка за по...
Читать
Источник: codedojo