Template literals js что это
ES6: Шаблонные строки (Template literals)
Для создания шаблонных строк вместо одинарных ( ‘ ) или двойных ( » ) используются обратные ( ` ) кавычки. В результате будет создана новая строка, которую мы сможем использовать как захотим.
Многострочность
Самое замечательное в шаблонных строках то, что теперь мы можем создать многостроковые строки! Раньше, для этого мы должны были использовать \n или символ новой строки.
С шаблонными строками мы можем просто взять и добавить новую строку, как будто мы пишем текст:
Это создаст строку с новой строкой внутри себя. Эта возможность делает Шаблонные Строки по-настоящему отличной примочкой для HTML-разработок, о которых мы поговорим позднее. Но как насчет конкатенации? Давайте посмотрим, как мы можем динамически добавлять значения в наших новые литералы шаблонов.
Выражения
Результат будет тем же. Эти выражения не просто позволяют нам вписать в них переменные, содержащие строки. Мы можем получить любой тип выражений, который нам только понадобится.
Мы также можем использовать эту функцию с более сложным объектом.
HTML шаблоны
С возможностью создавать многострочные строки и использовать Шаблонные Выражения для добавления содержимого в строки, у нас есть отличная возможность использовать HTML-шаблоны в нашем коде.
Давайте представим, что мы получаем некоторые данные из API, который выглядит примерно так:
Мы можем создать приятный и простой в использовании шаблон в с помощью JavaScript без использования библиотек Handlebars или Mustache!
Отмеченные Шаблоны
Еще одна фишка Шаблонных строк – возможность создания Отмеченных Шаблонов. Вы можете создать функцию и она будет выглядеть как любая другая функция, но только не в случае, когда вы будете ее вызывать:
При использовании выражения, мы можем получить к нему доступ от следующих параметров, и все продолжится. Скажем, мы добавили еще одно выражение.
Эта функция принимает данные, используемые в строке и манипулирует ими.
Шаблоны многократного использования
Давайте рассмотрим простой случай использования шаблонной строки. Выше мы описывали то, что Шаблонные Строки отлично подходят для… создания шаблонов! Давайте сделаем еще один шаг вперед и создам функцию, которая позволила бы нам создавать шаблоны для многократного использования. Идея заключается в том, что мы можем создать начальный шаблон, а затем передать в него данные для дальнейшего использования.
Давайте посмотрим на реализацию нашей функции templater.
Вы заметите, что это вовсе не исчерпывающий пример. Мы не можем размещать полученные данные или значения из массивов – это просто строки. Но, надеюсь, этот пример наглядно покажет, что можно делать с помощью Шаблонных строк.
L10n строк в приложениях (JavaScript)
Что, куда, зачем
Прежде чем перейдем непосредственно к тому о чем я хотел рассказать исходя из заголовка, пару слов о Template Literals.
Наверняка каждый из вас их уже попробовал:
Первая их крутость, заключается в том, что текст такого литерала можно писать на нескольких строчках и он сам где надо вставит переход на новую строку.
Конечно же вторая крутость заключается в возможности вставки выражений в литерал, что значительно упрощает построение строк в которые вы хотите вставить какое-либо значение.
До ES6:
Решение проблемы с помощью Template Literals:
Тут конечно надо заметить, что переиспользовать данный литерал с другим значением нельзя. Поэтому ходят споры об именовании. Куда было бы разумней назвать не используя слово шаблон, а интерполяция, что бы не вводить в заблуждение. Данный литерал подобен Immediately-Invoked Function Expression (IIFE), он сразу же запекается в строку. Поэтому передать его и переиспользовать к сожалению возможности нет:
Как я писал выше, вставить в строку можно и результат выражения:
Tagged Template Literals
А теперь самое интересное, рассмотрим с вами использование Tagged Template Literals:
Как по мне куда проще нежели — учитывая, что в строке есть динамические данные:
Или совсем сносный пример который можно часто увидеть:
Так как мы получаем в функции по факту разобранную строку на части, нам придется ее самим собрать, с этим нам поможет reduce:
Добавим вызов функции перевода и сделаем пример чуть более читабельным, получив вот такой сниппет:
Собственно говоря у пост обработки строк Tagged Template Literals есть и другие применения, но это уже за рамками темы, пишите в комментариях если есть, что добавить 🙂
Источник вдохновения:
github.com/getify/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/ch2.md
UPD: спасибо dotme
UPD1: спасибо alip
Кроме того, часто нужен контекст (чтобы «name» в одних случаях переводилось как «имя», а в других — «наименование»), где можно было бы добавить в том числе и внешнюю информацию (пол <М/Ж>, число <единственное/множественное>, и тд и тп).
Интересное замечание по поводу более продвинутого перевода. В целом в статье я попытался показать именно сахар, а не способы и подходы перевода, но кое-что все же забыл упомянуть:
Тегом может быть выражение которое возвращает функцию. Благодаря этому возможно передать какие-либо дополнительные аргументы:
Удобная вставка многострочных шаблонных литералов в код на JavaScript
Описание проблемы
Появившиеся в ES6 шаблонные литералы (или шаблонные строки — template literals, template strings) помимо долгожданной интерполяции переменных и выражений принесли возможность вставки многострочного текста без дополнительных ухищрений, усложняющих вид кода.
Однако то, что красиво смотрится в разнообразных примерах на эту тему, в реальном коде порой облекается в новый вид безобразия.
Впрочем, проблемы видны, даже если присмотреться к примерам. Возьмём замечательную статью об этом нововведении из известной серии «ES6 In Depth».
Видите досадные «оспинки»? Лёгкие перекосы в симметрии и стройности?
Возьмём какой-нибудь простой случай и посмотрим на проблемы внимательнее.
1. Первая кавычка искажает стройность текста, портит выравнивание строк.
2. Из-за смеси элементов литерала и кода, автоматически кажется, будто кавычки попадют в вывод. Приходится дополнительно абстрагироваться от них, чтобы представить, как будет выглядеть окончательный результат.
3. Строчки литерала оказываются вровень с вызовом функции, нарушается привычная структура отступов.
Это решает упомянутые проблемы: выравнивание строчек сохраняется, элементы кода и литерала разнесены, привычная структура отступов улучшает читабельность, ярче разделяет функцию и аргументы.
Но теперь у нас появляются лишние переводы строк и пробелы. Иногда с этим можно смириться, но на универсальное решение не тянет.
Усугубим наш пример введением дополнительных блоков и отступов.
Ужасно. Теперь литерал вообще выпирает слева, разрушая структуру блоков.
Можно исправить описанным выше способом:
Стало ещё больше «служебных» пробелов. А если придётся вставлять литерал на ещё более глубоком уровне вложенности? Всё это быстро выйдет из-под контроля.
Присваивания переменным или вызовы console.log можно заменить на функции записи в файлы, дилемма останется той же — или нечитабельная каша, или лишние пробелы и переводы строк:
Я нашёл для себя выход, которым решил поделиться. Не столько потому, что рискнул посчитать его общеполезным, сколько для того, чтобы затеять обсуждение: вполне вероятно, что уже найдены другие выходы, и все желающие смогут их распространить.
Возможное решение
Оно кроется в области того же самого нововведения, а именно в функционале под названием «tagged templates». В уже упомянутой статье есть раздел, посвящённый этому механизму и «разжёвывающий» алгоритм его работы до значительной наглядности: «Demystifying Tagged Templates».
Приведённые автором «костяки» функций, обрабатывающих шаблонные литералы, натолкнули меня на мысль использовать нечто подобное и для удаления всех служебных пробелов и переводов строки из многострочных литералов. Получилась такая функция:
Как можно заметить, функция убирает по одному начальному и конечному переводу строки из конечного результата, а также удаляет все начальные пробелы в строчках (не затрагивая интерполируемые переменные и выражения). При этом она страрается сохранить внутренние отступы более глубоких вложений: по первой строке определяет служебный отступ в коде и удаляет только равное ему количество пробелов — так появляется возможность сохранять структуры вроде приведённого выше большого примера с кодом HTML.
Теперь можно смело использовать наши более читабельные варианты, с небольшим, еле заметным добавлением, которое не портит вид кода (впрочем, функцию можно назвать как угодно — длиннее, короче, используя разные варианты наглядности, интуитивной понятности и т.д.):
Теперь и код стал более ясным, и в вывод не попадает ничего лишнего.
Надеюсь, это только первый пробный пример, и появятся другие идеи, отличающиеся более или менее радикально. Возможно, также будут найдены неочевидные препятствия к использованию подобных решений, исправлены незамеченные ошибки, указаны неучтённые случаи использования, нарушающие работу функции.
Руководство по шаблонным литералам JavaScript
Представленные в ES2015, также известные как ES6, шаблонные литералы предлагают новый способ объявления строк, а также некоторые новые интересные конструкции, которые уже широко популярны.
Введение в шаблонные литералы
Синтаксис на первый взгляд очень простой, просто используйте обратные кавычки вместо одинарных или двойных кавычек:
Они уникальны тем, что предоставляют множество функций, которых нет в обычных строках, построенных с помощью кавычек, в частности:
Давайте подробно рассмотрим каждый из них.
Многострочные строки
До ES6, чтобы создать строку, занимающую две строки, вам нужно было использовать \ символ в конце строки:
Это позволяет создать строку из 2 строк, но отображается только в одной строке:
first part second part
Чтобы отобразить строку на нескольких строках, вам явно нужно добавить \n в конце каждой строки, вот так:
Шаблонные литералы значительно упрощают многострочные строки.
Как только литерал шаблона открывается с обратной кавычкой, вы просто нажимаете клавишу ВВОД, чтобы создать новую строку без специальных символов, и она отображается как есть:
Помните, что пространство имеет значение, поэтому сделайте следующее:
собирается создать такую строку:
Interpolation
Template literals provide an easy way to interpolate variables and expressions into strings.
Template tags
Tagged templates is one feature that might sound less useful at first for you, but it’s actually used by lots of popular libraries around, like Styled Components or Apollo, the GraphQL client/server lib, so it’s essential to understand how it works.
In Styled Components template tags are used to define CSS strings:
In Apollo template tags are used to define a GraphQL query schema:
The styled.button and gql template tags highlighted in those examples are just functions:
this function returns a string, which can be the result of any kind of computation.
literals is an array containing the template literal content tokenized by the expressions interpolations.
expressions contains all the interpolations.
If we take an example above:
A more complex example is:
in this case literals is an array where the first item is:
The function that is passed those values can do anything with them, and this is the power of this kind feature.
The most simple example is replicating what the string interpolation does, by joining literals and expressions :
Путь к пониманию шаблонных литералов в JavaScript
Спецификация ECMAScript, вышедшая в 2015 году (ES6), добавила в JavaScript новую возможность — шаблонные литералы (template literals). Шаблонные литералы дают нам новый механизм создания строковых значений. Этот механизм отличается множеством мощных возможностей, среди которых — упрощение создания многострочных конструкций и использование местозаполнителей для внедрения в строки результатов вычисления выражений. Кроме того, тут имеется и ещё одна возможность — теговые шаблоны (tagged template literals). Это — расширенная форма шаблонных литералов. Теговые шаблоны позволяют создавать строки с использованием выражений, находящихся внутри строк, и с применением особых функций. Всё это расширяет возможности программистов по работе со строками, позволяя, например, создавать динамические строки, которые могут представлять собой URL, или писать функции для тонкой настройки HTML-элементов.
Из этого материала вы узнаете о различиях между обычными строковыми значениями, задаваемыми с помощью одинарных или двойных кавычек, и шаблонными литералами. Вы ознакомитесь с различными способами объявления строк с разными характеристиками, включая многострочные строки и динамические строки, меняющиеся в зависимости от значения некоей переменной или некоего выражения. Вы научитесь работать с теговыми шаблонами и увидите реальные примеры их использования.
Объявление строк
В этом разделе мы вспомним о том, как объявляются строки, описываемые с использованием одинарных или двойных кавычек, а затем взглянем на то, как то же самое делается при применении шаблонных литералов.
Строку в JavaScript можно представить как последовательность символов, заключённую в одинарные кавычки ( ‘ ‘ ):
Ещё один вариант объявления строк заключается в использовании двойных кавычек ( » » ):
В JavaScript между такими строками нет серьёзных различий. В других языках использование разных кавычек при объявлении строк может означать, например, то, что строки одного вида можно интерполировать, а другие — нет. Здесь мы понимаем под «интерполяцией» возможность вычисления значений выражений-местозаполнителей, играющих роль динамических частей строк и участвующих в формировании итоговых строковых значений.
Какие именно строки использовать, объявленные с одинарными или с двойными кавычками, это, по большей части, дело личных предпочтений программиста и используемых им соглашений по написанию кода. Но если в строке, ограниченной кавычками одного из этих видов, встречаются кавычки того же вида, их нужно экранировать. Кавычки же другого вида в подобных строках в экранировании не нуждаются.
Вызов пары методов log() приведёт к тому, что в консоль попадут две одинаковых строки.
Шаблонные литералы, с другой стороны, объявляют с использованием обратных кавычек ( ` ` ):
Здесь не нужно экранировать одинарные или двойные кавычки:
Но обратные кавычки в таких строках экранировать необходимо:
Шаблонные литералы имеют все возможности, которые есть у обычных строк. Поэтому вы, вероятно, можете заменить все строки в своём проекте на шаблонные литералы и при этом ничего не потерять. Однако чаще всего в соглашениях, касающихся написания кода, указывают, что шаблонные литералы должны использоваться только тогда, когда нужны их особые возможности. Обычные же строки всегда, ради поддержания единообразия кода, объявляют с использованием или одинарных, или двойных кавычек. Кодовую базу проекта, при написании которой следуют этому стандарту, будет легче читать разработчикам, с ней ранее не знакомым.
Теперь, когда мы поговорили об объявлении строк с использованием одинарных, двойных и обратных кавычек, мы можем перейти к разбору первой сильной стороны шаблонных литералов. А именно — к возможности описания многострочных строк.
Многострочные строки
В этом разделе мы сначала поговорим о том, как многострочные строки объявлялись до ES6, а потом остановимся на том, как решение этой задачи упрощают шаблонные литералы.
Изначально, если нужно было ввести в текстовом редакторе строковую переменную, состоящую из нескольких строк, использовался оператор конкатенации строк. Следующий пример конкатенации строк иллюстрирует эту идею:
Ещё один подход к записи подобных строк в редакторах кода заключается в использовании символа обратной косой черты ( \ ), который ставится в конце фрагментов строк, и после которого, с новой строки, располагаются новые фрагменты:
При таком подходе сохраняются, например, пробелы, находящиеся перед фрагментами строки, но значение переменной, если вывести его в консоль, снова будет представлено единственной строкой:
Создать настоящую многострочную строку можно, используя символ перевода строки ( \n ):
Если вывести эту константу в консоль, то выглядеть текст будет так же, как в редакторе:
Тут надо учитывать то, что если между символами обратных кавычек содержатся пробелы, используемые для выравнивания кода, эти пробелы попадут в итоговый шаблонный литерал. Рассмотрим следующий пример:
Хотя такой стиль написания кода упрощает его чтение, то, что попадёт в консоль после его вывода, будет выглядеть не очень-то привлекательно:
Теперь, разобравшись с многострочными строками, давайте поговорим о том, как в строки, объявленные разными способами, можно встраивать результаты вычисления различных выражений, то есть — поговорим об интерполяции выражений.
Интерполяция выражений
Раньше, до выхода ES6, для создания динамических строк, в формировании которых участвовали значения переменных или выражения, использовалась конкатенация:
Если вывести dynamicString в консоль, то получится следующее:
При выводе dynamicString в консоль получится следующий результат:
Распространённый пример встраивания значений в строки — это создание динамических URL. Использование для этой цели конкатенации приводит к появлению громоздких и неудобных конструкций. Например, вот функция, которая генерирует строку доступа OAuth:
Если вывести в консоль результат работы этой функции, то получится следующее:
При использовании интерполяции программистам больше не нужно внимательно следить за кавычками, ограничивающими фрагменты строки, и за тем, где именно расположен оператор конкатенации. Вот — тот же пример, переписанный с использованием шаблонных литералов:
Результат работы функции будет таким:
Для того чтобы убрать пробелы в начале и в конце строки, создаваемой с помощью шаблонного литерала, можно воспользоваться методом trim(). Например, в следующем фрагменте кода для создания HTML-элемента с настраиваемой ссылкой используется стрелочная функция:
Из итоговой строки будут удалены начальные и конечные пробелы, что позволит обеспечить правильность рендеринга элемента:
Интерполировать можно целые выражения, а не только переменные. Например — как здесь, где в строку встраивается результат сложения двух чисел:
Этот механизм может оказаться особенно полезным при использовании тернарного оператора, который позволяет проверять условия при формировании строки:
Теперь вы знаете о том, какую пользу можно извлечь из интерполяции выражений при применения шаблонных литералов. В следующем разделе мы пойдём ещё дальше и исследуем теговые шаблоны, поговорим о работе с выражениями, передаваемыми в области, соответствующие местозаполнителям.
Теговые шаблоны
Теговые шаблоны являются расширенной формой шаблонных литералов. Теговые шаблоны начинаются с теговой функции, которая разбирает шаблонный литерал, давая разработчику более высокий уровень контроля над процессом формирования динамических строк.
В результате выполнения этого кода в консоль попадёт следующее:
В популярных JavaScript-библиотеках можно найти несколько примеров использования теговых шаблонов. Так, в библиотеке graphql-tag используется шаблонный литерал gql для разбора строк запроса GraphQL и преобразования их в абстрактное синтаксическое дерево (abstract syntax tree, AST), понятное GraphQL:
Функции теговых шаблонов используются и в библиотеке styled-components, что позволяет создавать новые компоненты React из обычных элементов DOM и применять к ним дополнительные CSS-стили:
Кроме того, можно пользоваться стандартным методом String.raw, применяя его к теговым шаблонам для того чтобы предотвратить обработку управляющих последовательностей:
В консоль после выполнения этого кода попадёт следующее:
Итоги
В этом материале мы вспомнили основные сведения об обычных строковых литералах, оформляемых с помощью одинарных или двойных кавычек, а так же — поговорили о шаблонных литералах и о теговых шаблонах. Шаблонные литералы упрощают решение множества задач, связанных с обработкой строк. В частности, речь идёт о встраивании в строки различных значений и о создании многострочных строк без использования конкатенации или экранирования. Теговые шаблоны — это полезная продвинутая возможность шаблонных литералов, которая используется во многих популярных библиотеках.
А вы пользуетесь шаблонными литералами?