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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

Выражения

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

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

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

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

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

HTML Шаблоны

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Ryan Christiani

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree