[Перевод] Путь к пониманию шаблонных литералов в JavaScript
Спецификация ECMAScript, вышедшая в 2015 году (ES6), добавила в JavaScript новую возможность — шаблонные литералы (template literals). Шаблонные литералы дают нам новый механизм создания строковых значений. Этот механизм отличается множеством мощных возможностей, среди которых — упрощение создания многострочных конструкций и использование местозаполнителей для внедрения в строки результатов вычисления выражений. Кроме того, тут имеется и ещё одна возможность — теговые шаблоны (tagged template literals). Это — расширенная форма шаблонных литералов. Теговые шаблоны позволяют создавать строки с использованием выражений, находящихся внутри строк, и с применением особых функций. Всё это расширяет возможности программистов по работе со строками, позволяя, например, создавать динамические строки, которые могут представлять собой URL, или писать функции для тонкой настройки HTML-элементов.
Из этого материала вы узнаете о различиях между обычными строковыми значениями, задаваемыми с помощью одинарных или двойных кавычек, и шаблонными литералами. Вы ознакомитесь с различными способами объявления строк с разными характеристиками, включая многострочные строки и динамические строки, меняющиеся в зависимости от значения некоей переменной или некоего выражения. Вы научитесь работать с теговыми шаблонами и увидите реальные примеры их использования.
Объявление строк
В этом разделе мы вспомним о том, как объявляются строки, описываемые с использованием одинарных или двойных кавычек, а затем взглянем на то, как то же самое делается при применении шаблонных литералов.
Строку в JavaScript можно представить как последовательность символов, заключённую в одинарные кавычки (' '):
const single = 'Every day is a good day when you paint.'
Ещё один вариант объявления строк заключается в использовании двойных кавычек (« «):
const double = "Be so very light. Be a gentle whisper."
В JavaScript между такими строками нет серьёзных различий. В других языках использование разных кавычек при объявлении строк может означать, например, то, что строки одного вида можно интерполировать, а другие — нет. Здесь мы понимаем под «интерполяцией» возможность вычисления значений выражений-местозаполнителей, играющих роль динамических частей строк и участвующих в формировании итоговых строковых значений.
Какие именно строки использовать, объявленные с одинарными или с двойными кавычками, это, по большей части, дело личных предпочтений программиста и используемых им соглашений по написанию кода. Но если в строке, ограниченной кавычками одного из этих видов, встречаются кавычки того же вида, их нужно экранировать. Кавычки же другого вида в подобных строках в экранировании не нуждаются.
// Экранирование одинарных кавычек в строке, ограниченной одинарными кавычками
const single = '"We don\'t make mistakes. We just have happy accidents." - Bob Ross'
// Экранирование двойных кавычек в строке, ограниченной двойными кавычками
const double = "\"We don't make mistakes. We just have happy accidents.\" - Bob Ross"
console.log(single);
console.log(double);
Вызов пары методов log() приведёт к тому, что в консоль попадут две одинаковых строки.
"We don't make mistakes. We just have happy accidents." - Bob Ross
"We don't make mistakes. We just have happy accidents." - Bob Ross
Шаблонные литералы, с другой стороны, объявляют с использованием обратных кавычек (` `):
const template = `Find freedom on this canvas.`
Здесь не нужно экранировать одинарные или двойные кавычки:
const template = `"We don't make mistakes. We just have happy accidents." - Bob Ross
Но обратные кавычки в таких строках экранировать необходимо:
const template = `Template literals use the \` character.`
Шаблонные литералы имеют все возможности, которые есть у обычных строк. Поэтому вы, вероятно, можете заменить все строки в своём проекте на шаблонные литералы и при этом ничего не потерять. Однако чаще всего в соглашениях, касающихся написания кода, указывают, что шаблонные литералы должны использоваться только тогда, когда нужны их особые возможности. Обычные же строки всегда, ради поддержания единообразия кода, объявляют с использованием или одинарных, или двойных кавычек. Кодовую базу проекта, при написании которой следуют этому стандарту, будет легче читать разработчикам, с ней ранее не знакомым.
Теперь, когда мы поговорили об объявлении строк с использованием одинарных, двойных и обратных кавычек, мы можем перейти к разбору первой сильной стороны шаблонных литералов. А именно — к возможности описания многострочных строк.
Многострочные строки
В этом разделе мы сначала поговорим о том, как многострочные строки объявлялись до ES6, а потом остановимся на том, как решение этой задачи упрощают шаблонные литералы.
Изначально, если нужно было ввести в текстовом редакторе строковую переменную, состоящую из нескольких строк, использовался оператор конкатенации строк. Следующий пример конкатенации строк иллюстрирует эту идею:
const address =
'Homer J. Simpson' +
'742 Evergreen Terrace' +
'Springfield'
Данный подход может позволить разбивать длинные строки на небольшие фрагменты и располагать их в текстовом редакторе на нескольких строках. Но это никак не влияет на то, какой получится итоговая строка. В данном случае значение строковой константы будет располагаться в одной строке. Те части, из которых собрано строковое значение, не будут разделены символами перевода строки или пробелами. Если вывести в консоль константу address, то там появится следующее:
Homer J. Simpson742 Evergreen TerraceSpringfield
Ещё один подход к записи подобных строк в редакторах кода заключается в использовании символа обратной косой черты (\), который ставится в конце фрагментов строк, и после которого, с новой строки, располагаются новые фрагменты:
const address =
'Homer J. Simpson\
742 Evergreen Terrace\
Springfield'
При таком подходе сохраняются, например, пробелы, находящиеся перед фрагментами строки, но значение переменной, если вывести его в консоль, снова будет представлено единственной строкой:
Homer J. Simpson 742 Evergreen Terrace Springfield
Создать настоящую многострочную строку можно, используя символ перевода строки (\n):
const address =
'Homer J. Simpson\n' +
'742 Evergreen Terrace\n' +
'Springfield'
При выводе в консоль строкового значения, хранящегося в address, это значение будет занимать несколько строк:
Homer J. Simpson
742 Evergreen Terrace
Springfield
Правда, использовать символ перевода строки для создания многострочных строк не особенно удобно и просто. С другой стороны, создание многострочных строк с использованием шаблонных литералов выглядит гораздо проще и удобнее. Не нужно конкатенировать строки, не нужно использовать символ новой строки или обратную косую черту. Для создания многострочных строк с использованием шаблонных литералов достаточно просто, в конце очередного фрагмента строки, нажать клавишу Enter, и продолжить вводить следующую строку шаблонного литерала:
const address = `Homer J. Simpson
742 Evergreen Terrace
Springfield`
Если вывести эту константу в консоль, то выглядеть текст будет так же, как в редакторе:
Homer J. Simpson
742 Evergreen Terrace
Springfield
Тут надо учитывать то, что если между символами обратных кавычек содержатся пробелы, используемые для выравнивания кода, эти пробелы попадут в итоговый шаблонный литерал. Рассмотрим следующий пример:
const address = `Homer J. Simpson
742 Evergreen Terrace
Springfield`
Хотя такой стиль написания кода упрощает его чтение, то, что попадёт в консоль после его вывода, будет выглядеть не очень-то привлекательно:
Homer J. Simpson
742 Evergreen Terrace
Springfield
Теперь, разобравшись с многострочными строками, давайте поговорим о том, как в строки, объявленные разными способами, можно встраивать результаты вычисления различных выражений, то есть — поговорим об интерполяции выражений.
Интерполяция выражений
Раньше, до выхода ES6, для создания динамических строк, в формировании которых участвовали значения переменных или выражения, использовалась конкатенация:
const method = 'concatenation'
const dynamicString = 'This string is using ' + method + '.'
Если вывести dynamicString в консоль, то получится следующее:
This string is using concatenation.
При использовании шаблонных литералов выражения можно внедрять в строку с использованием местозаполнителей. Местозаполнитель представляет собой конструкцию вида ${}. При этом всё, что содержится в фигурных скобках, рассматривается как JavaScript-код, а всё, находящееся за пределами этой конструкции, рассматривается как строка:
const method = 'interpolation'
const dynamicString = `This string is using ${method}.`
При выводе dynamicString в консоль получится следующий результат:
This string is using interpolation.
Распространённый пример встраивания значений в строки — это создание динамических URL. Использование для этой цели конкатенации приводит к появлению громоздких и неудобных конструкций. Например, вот функция, которая генерирует строку доступа OAuth:
function createOAuthString(host, clientId, scope) {
return host + '/login/oauth/authorize?client_id=' + clientId + '&scope=' + scope
}
createOAuthString('https://github.com', 'abc123', 'repo,user')
Если вывести в консоль результат работы этой функции, то получится следующее:
https://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user
При использовании интерполяции программистам больше не нужно внимательно следить за кавычками, ограничивающими фрагменты строки, и за тем, где именно расположен оператор конкатенации. Вот — тот же пример, переписанный с использованием шаблонных литералов:
function createOAuthString(host, clientId, scope) {
return `${host}/login/oauth/authorize?client_id=${clientId}&scope=${scope}`
}
createOAuthString('https://github.com', 'abc123', 'repo,user')
Результат работы функции будет таким:
https://github.com/login/oauth/authorize?client_id=abc123&scope=repo,user
Для того чтобы убрать пробелы в начале и в конце строки, создаваемой с помощью шаблонного литерала, можно воспользоваться методом trim (). Например, в следующем фрагменте кода для создания HTML-элемента с настраиваемой ссылкой используется стрелочная функция:
const menuItem = (url, link) =>
`
${link}
`.trim()
menuItem('https://google.com', 'Google')
Из итоговой строки будут удалены начальные и конечные пробелы, что позволит обеспечить правильность рендеринга элемента:
Google
Интерполировать можно целые выражения, а не только переменные. Например — как здесь, где в строку встраивается результат сложения двух чисел:
const sum = (x, y) => x + y
const x = 5
const y = 100
const string = `The sum of ${x} and ${y} is ${sum(x, y)}.`
console.log(string)
Здесь объявлена функция sum() и константы x и y. После этого в строке используется и функция, и эти константы. Вот как выглядит константа string, выведенная в консоль:
The sum of 5 and 100 is 105.
Этот механизм может оказаться особенно полезным при использовании тернарного оператора, который позволяет проверять условия при формировании строки:
const age = 19
const message = `You can ${age < 21 ? 'not' : ''} view this page`
console.log(message)
Константа message, выведенная в консоль, может менять в зависимости от того, больше или меньше 21 значение, хранящееся в age. Так как в нашем примере это значение равняется 19, в консоль попадёт следующее:
You can not view this page
Теперь вы знаете о том, какую пользу можно извлечь из интерполяции выражений при применения шаблонных литералов. В следующем разделе мы пойдём ещё дальше и исследуем теговые шаблоны, поговорим о работе с выражениями, передаваемыми в области, соответствующие местозаполнителям.
Теговые шаблоны
Теговые шаблоны являются расширенной формой шаблонных литералов. Теговые шаблоны начинаются с теговой функции, которая разбирает шаблонный литерал, давая разработчику более высокий уровень контроля над процессом формирования динамических строк.
В следующем примере мы создаём функцию tag, которую планируем использовать в роли функции, с помощью которой выполняются операции над теговым шаблоном. Первым параметром этой функции, носящим имя strings, является массив строковых литералов. Выражения, встраиваемые в строку, помещены во второй параметр с использованием синтаксиса оставшихся параметров. Для того чтобы увидеть содержимое этих параметров — их можно вывести в консоль:
function tag(strings, ...expressions) {
console.log(strings)
console.log(expressions)
}
Если при создании тегового шаблона воспользоваться функцией tag, то может получиться такая конструкция:
const string = tag`This is a string with ${true} and ${false} and ${100} interpolated inside.`
Так как в функции tag выполняется вывод в консоль strings и expressions, при выполнении этого кода в консоль попадёт следующее:
["This is a string with ", " and ", " and ", " interpolated inside."]
[true, false, 100]
Видно, что первый параметр, strings, это массив, содержащий все строковые литералы:
"This is a string with "
" and "
" and "
" interpolated inside."
У этого аргумента ещё есть свойство raw, к которому можно обратиться как к strings.raw. Оно содержит строку, в которой не были обработаны управляющие последовательности. Например, \n будет просто символом \n, а не командой перевода строки.
Второй аргумент, ...expressions, это массив, содержащий все выражения:
true
false
100
В результате оказывается, что функции тегового шаблона tag передаются строковые литералы и выражения. Обратите внимание на то, что функция не обязана возвращать строку. Она может работать с переданными ей значениями и возвращать всё что угодно. Например, у нас может быть функция, которая ни на что не обращает внимания и просто возвращает null. Именно так написана функция returnsNull в следующем примере:
function returnsNull(strings, ...expressions) {
return null
}
const string = returnsNull`Does this work?`
console.log(string)
В результате выполнения этого кода в консоль попадёт следующее:
null
В качестве примера действия, которое можно выполнить в теговом шаблоне, можно привести внесение изменений в каждое из выражений, например, таких изменений, которые заключаются в помещении выражений в HTML-теги. Создадим функцию bold, которая добавляет теги и в начало и в конец каждого выражения:
function bold(strings, ...expressions) {
let finalString = ''
// Проходимся по всем выражениям
expressions.forEach((value, i) => {
finalString += `${strings[i]}${value}`
})
// Добавляем последний строковой литерал
finalString += strings[strings.length - 1]
return finalString
}
const string = bold`This is a string with ${true} and ${false} and ${100} interpolated inside.`
console.log(string)
Здесь, для обхода массива expressions, используется цикл forEach. Каждый элемент заключается в теги .
This is a string with true and false and 100 interpolated inside.
В популярных JavaScript-библиотеках можно найти несколько примеров использования теговых шаблонов. Так, в библиотеке graphql-tag используется шаблонный литерал gql для разбора строк запроса GraphQL и преобразования их в абстрактное синтаксическое дерево (abstract syntax tree, AST), понятное GraphQL:
import gql from 'graphql-tag'
// Запрос для получения имени и фамилии пользователя 5
const query = gql`
{
user(id: 5) {
firstName
lastName
}
}
`
Функции теговых шаблонов используются и в библиотеке styled-components, что позволяет создавать новые компоненты React из обычных элементов DOM и применять к ним дополнительные CSS-стили:
import styled from 'styled-components'
const Button = styled.button`
color: magenta;
`
//
Кроме того, можно пользоваться стандартным методом String.raw, применяя его к теговым шаблонам для того чтобы предотвратить обработку управляющих последовательностей:
const rawString = String.raw`I want to write /n without it being escaped.`
console.log(rawString)
В консоль после выполнения этого кода попадёт следующее:
I want to write /n without it being escaped.
Итоги
В этом материале мы вспомнили основные сведения об обычных строковых литералах, оформляемых с помощью одинарных или двойных кавычек, а так же — поговорили о шаблонных литералах и о теговых шаблонах. Шаблонные литералы упрощают решение множества задач, связанных с обработкой строк. В частности, речь идёт о встраивании в строки различных значений и о создании многострочных строк без использования конкатенации или экранирования. Теговые шаблоны — это полезная продвинутая возможность шаблонных литералов, которая используется во многих популярных библиотеках.
А вы пользуетесь шаблонными литералами?
