Руководство по литералам шаблонов JavaScript

Введение в литералы шаблонов
Многострочные строки
Интерполяция
Теги шаблонов

Введение в литералы шаблонов

Шаблонные литералы – это новая функция ES2015/ES6, которая позволяет вам работать со строками по-новому по сравнению с ES5 и ниже.

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

const a_string = `something`

Они уникальны, потому что предоставляют множество функций, которых нет в обычных строках, построенных с кавычками, в частности:

они предлагают отличный синтаксис для определения многострочных строк
они обеспечивают простой способ интерполяции переменных и выражений в строках
они позволяют создавать DSL с тегами шаблонов (DSL означает язык, специфичный для домена, и он, например, используется в React by Styled Components для определения CSS для компонента)

Давайте подробно рассмотрим каждый из них.

Многострочные строки

До ES6, чтобы создать строку, охватывающую две строки, вам нужно было использовать символ \ в конце строки:

const string =
  'first part \
second part'

Это позволяет создать строку из 2 строк, но она отображается только в одной строке:

первая часть вторая часть

Чтобы отобразить строку также в нескольких строках, вам явно необходимо добавить \n в конце каждой строки, например:

const string =
  'first line\n \
second line'

или

const string = 'first line\n' + 'second line'

Шаблонные литералы значительно упрощают многострочные строки.

Как только литерал шаблона открывается с помощью обратной кнопки, вы просто нажимаете клавишу ввод, чтобы создать новую строку без специальных символов, и она отображается как есть:

const string = `Hey
this

string
is awesome!`

Имейте в виду, что пространство имеет значение, поэтому делайте это:

const string = `First
                Second`

собирается создать строку, подобную этой:

First
                Second

простой способ решить эту проблему – это использовать пустую первую строку и добавить метод trim() сразу после закрывающего отступа, который устранит пробел перед первым символом:

const string = `
First
Second`.trim()

Интерполяция

Шаблонные литералы обеспечивают простой способ интерполяции переменных и выражений в строки.

Вы делаете это с помощью ${...} синтаксис:

const myVariable = 'test'
const string = `something ${myVariable}` //something test

внутри ${} вы можете добавлять что угодно, даже выражения:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${doSomething() ? 'x' : 'y'}`

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

Помеченные шаблоны – это одна из функций, которая поначалу может показаться вам менее полезной, но на самом деле она используется многими популярными библиотеками, такими как Styled Components или Apollo, библиотека клиента/сервера GraphQL, поэтому важно понять, как она работает.

В стилизованных компонентах теги шаблонов используются для определения строк CSS:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

В шаблоне Apollo теги используются для определения схемы запроса GraphQL:

const query = gql`
  query {
    ...
  }
`

Кнопка в стиле./| и gql теги шаблонов, выделенные в этих примерах, являются просто функциями :

function gql(literals, ...expressions) {}

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

литералы – это массив, содержащий содержимое литерала шаблона, обозначенное интерполяциями выражений.

выражения содержат все интерполяции.

Если мы возьмем пример выше:

const string = `something ${1 + 2 + 3}`

литералы – это массив с двумя элементами. Первый – это что-то , строка до первой интерполяции, а второй – пустая строка, пробел между концом первой интерполяции (у нас есть только одна) и концом строки.

выражения в данном случае представляют собой массив с одним элементом, 6 .

Более сложным примером является:

const string = `something
another ${'x'}
new line ${1 + 2 + 3}
test`

в этом случае литералы – это массив, в котором первый элемент:

;`something
another `

второе – это:

;`
new line `

и третье – это:

;`
test`

выражения в данном случае представляют собой массив с двумя элементами, x и 6 .

Функция, которой передаются эти значения, может делать с ними все, что угодно, и в этом заключается сила этой функции.

Самый простой пример – это копирование того, что делает интерполяция строк, путем объединения литералов и выражения :

const interpolated = interpolate`I paid ${10}€`

и вот как интерполировать работает:

function interpolate(literals, ...expressions) {
  let string = ``
  for (const [i, val] of expressions.entries()) {
    string += literals[i] + val
  }
  string += literals[literals.length - 1]
  return string
}

Оригинал: “https://flaviocopes.com/javascript-template-literals/”

Введение в литералы шаблонов

Многострочные строки

Интерполяция

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

Читайте ещё по теме: