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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

Выражения

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

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

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

Выражения можно использовать и с более сложными объектами.

В примере выше мы создали объект person и метод sayName().У нас есть доступ к свойствам объекта прямо из синтаксиса ${}.

HTML Шаблоны

Шаблонные строки позволяют записывать текст на нескольких строках в переменных, а также пристыковывать контент к строке. Таким образом, на основе шаблонных строк можно делать HTML шаблоны. Представьте, что у нас есть какие-то данные из API:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

И это «воображаемое» API, конечно — pokeapi! Помня структуру данных, создадим разметку, которая покажет этого покемона.

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

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

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

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

Получить доступ к выражению можно из следующих параметров. Скажем, мы добавили еще одно выражение.

Очень мощный инструмент: он позволяет принимать данные из строки и манипулировать ими.

Многоразовые шаблоны

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

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

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

Мы получили данные, которые необходимо обработать. Во-первых, нам необходимо скопировать массив strings. Копия нам нужна на тот случай, если нам понадобится сослаться на оригинальный массив. Далее необходимо пройтись циклом по массиву keys и вытащить из объекта все совпадения по ключу, после чего вставить их в нужное место в новом массиве (посмотрите, как мы в примере передаем строку в ${}). Осталось все объединить в одну строку и вернуть из функции!

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

Автор: Ryan Christiani

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий