Разработчики Javascript используют "double quotes" или 'single quotes' для создания строк в Javascript, но теперь ES6 предоставляет еще один удобный способ создания строк, который привносит в таблицу множество новых функций.

Стили рендеринга

Веб-компоненты сейчас в тренде, HTMLElement API теперь стандартизирован почти для всех браузеров, и одна из лучших вещей в них - это ограниченный стиль, поэтому вы можете использовать что-то вроде этого для визуализации красивого стилизованного веб-компонента:

Сначала мы определим объект со стилями для рендеринга. Это одна из многих структур, которые вы можете использовать, она довольно проста и работает для этого конкретного примера:

Теперь, когда у нас есть стили, которые мы хотим отобразить, следующие функции помогут нам отобразить код CSS внутри тега <style></style>:

Как видите, мы используем некоторые новые функции ES6. Мы использовали новую функцию Array.prototype.map вместе с шаблонными литералами для автоматической генерации селекторов стилей и свойств.

Теперь, чтобы отобразить фактический тег стиля, мы можем сделать что-то вроде:

Это потрясающе, правда? Теперь, когда у нас есть эта утилита, мы можем использовать ее для визуализации любых необходимых нам свойств стиля. Конечно, эти функции можно отшлифовать и улучшить, чтобы реализовать БЭМ-логику или свойства сортировки перед их рендерингом.

Рендеринг HTML-разметки

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

Как вы можете видеть в этом коде, мы использовали объект данных (который может быть чем-то полученным в результате запроса XHR или запроса базы данных. Константа HTMLMarkup будет отображать что-то вроде:

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

Перевод строк с тегами шаблонных литералов

Это кажется странным вариантом использования шаблонных строк, но для меня это имеет большой смысл. Я много работал с локализованными сайтами и интернационализацией, так что давайте посмотрим, имеет ли это смысл:

Это приведет к рендерингу Hola Jane, esto es una prueba, что очень полезно, теперь, когда нам нужно рендерить переводимую строку, мы можем использовать этот тег.

Обратный тик над одинарными или двойными кавычками?

Важно помнить, что это поддерживается не всеми браузерами. Поэтому я бы посоветовал сначала сохранить последовательность в своем списке, создать стандарт для своего проекта, использовать линтеры и использовать обратные галочки, когда они вам нужны. Помните, что если вам нужна кроссбраузерная поддержка (на данный момент), вам все равно нужно транспилировать код, поэтому мы пока не избавляемся от одинарных / двойных кавычек. Вот что происходит при использовании обратного тика:

Код ES6

const foo = 'foo';
console.log(`${foo}, bar and baz`);

Транслируемый код

'use strict';
var foo = 'foo';
console.log(foo + ', bar and baz');

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

Надеюсь, этот рассказ был вам полезен. Жду ваших комментариев и отзывов. Увидимся в следующий раз.