Enter
    Расширенный поиск
    Клавиша / esc

    JavaScript

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

    Строки с переменными внутри.

    Время чтения: 6 мин

    Кратко

    Скопировано

    Шаблонные строки — это ещё один способ создания строк, наравне с одинарными или двойными кавычками. Шаблонные строки объявляются с помощью обратных кавычек.

    Шаблонная строка может быть многострочной, все переносы строк в ней будут сохранены. В шаблонной строке с помощью синтаксиса ${ } можно использовать любые выражения JavaScript. Любой нестроковый результат (например, объект) будет приведён к строке.

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

    Пример

    Скопировано
            
          
          `однострочная строка``строка нанесколько строчек,можно сколько угодно``Дважды два равно ${2 * 2}`// Дважды два равно 4const name = 'Федя'`Привет ${name}!`// Привет Федя!
          `однострочная строка`

`строка на
несколько строчек,
можно сколько угодно`

`Дважды два равно ${2 * 2}`
// Дважды два равно 4

const name = 'Федя'

`Привет ${name}!`
// Привет Федя!

    Как понять

    Скопировано

    Экранирование символов

    Скопировано

    Шаблонные строки появились, чтобы помочь решить недостатки обычных строк. Например, когда мы используем обычные строки, то символы кавычек внутри приходится экранировать обратным слэшем \.

            
          
          const doubleQuotes = "\"Я вам запрещаю!\" – Джейсон Стэтхем."
          const doubleQuotes = "\"Я вам запрещаю!\" – Джейсон Стэтхем."

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

            
          
          const doubleQuotes = `"Я вам запрещаю!" – Джейсон Стэтхем.`
          const doubleQuotes = `"Я вам запрещаю!" – Джейсон Стэтхем.`

    Такой вариант читается гораздо лучше.

    Переносы строк

    Скопировано

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

            
          
          const str = 'Я первая строка\n' + 'А я вторая строка\n' + 'Ну и так далее'
          const str = 'Я первая строка\n' + 'А я вторая строка\n' + 'Ну и так далее'

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

            
          
          const str = `Я первая строка.А я вторая строка.Ну а я третья, но надо мной и подо мной пустая строка и перенос.Вообще так можно и стихотворение написать.`
          const str = `Я первая строка.
А я вторая строка.

Ну а я третья, но надо мной и подо мной пустая строка и перенос.

Вообще так можно и стихотворение написать.
`

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

    Динамические строки

    Скопировано

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

            
          
          const host = 'google.com'const query = 'template%20strings'const url = 'https://' + host + '/?search=' + query
          const host = 'google.com'
const query = 'template%20strings'

const url = 'https://' + host + '/?search=' + query

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

    Шаблонные строки предоставляют возможность использовать строковую интерполяцию, проще говоря, подставлять значения прямо в строку. Делается это с помощью конструкции из знака доллара и фигурных скобок ${ }.

            
          
          const host = 'google.com'const query = 'template%20strings'const url = `https://${host}/?search=${query}`
          const host = 'google.com'
const query = 'template%20strings'

const url = `https://${host}/?search=${query}`

    Такая составная строка выглядит и читается как одна. Добавлять в неё новые динамические значения намного проще. Это самая главная особенность шаблонных строк. Из-за возможности удобной подстановки динамических значений шаблонные строки получили своё название.

    Как пишется

    Скопировано

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

            
          
          const singleLine = `Я открываюсь здесь, а закрываюсь ниже`
          const singleLine = `Я открываюсь здесь, а закрываюсь ниже
`

    Чтобы использовать выражение внутри шаблонной строки, используйте специальную конструкцию: знак доллара вместе с фигурными скобками ${выражение}. В фигурных скобках должно находится выражение, его результат и будет подставлен в итоговую строку.

            
          
          const name = 'Миша'const language = 'JavaScript'const months = 2// Можно подставлять переменные`Меня зовут ${name}. Я изучаю ${language} уже ${months} месяца.`// А можно выполнять целые выражения`Я люблю фрукты: ${['яблоки', 'груши', 'апельсины'].join(', ')}`
          const name = 'Миша'
const language = 'JavaScript'
const months = 2

// Можно подставлять переменные
`Меня зовут ${name}. Я изучаю ${language} уже ${months} месяца.`

// А можно выполнять целые выражения
`Я люблю фрукты: ${['яблоки', 'груши', 'апельсины'].join(', ')}`

    Теговый шаблон

    Скопировано

    Шаблонные строки дополнительно открыли функциональность для использования теговых шаблонов. Теговый шаблон — это функция, которая позволяет разбирать шаблонную строку. В такую функцию первым параметром придёт массив из кусочков строк, которые разделены выражениями, а остальные параметры будут значения выражений, которые подставляются в шаблонную строку. Но важным отличием от обычной функции является то, что вызов производится не с использованием круглых скобок, а с помощью слитного написания шаблонной строки.

            
          
          // Просто обычная функцияfunction loggerTag(strings, ...expressionValues) {  console.log(strings)  console.log(...expressionValues)}loggerTag`Булевых значений всего ${2}: они бывают либо ${true} либо ${false}`// ['Булевых значений всего ', ': они бывают либо ', ' либо ', '']// 2 true false
          // Просто обычная функция
function loggerTag(strings, ...expressionValues) {
  console.log(strings)
  console.log(...expressionValues)
}

loggerTag`Булевых значений всего ${2}: они бывают либо ${true} либо ${false}`
// ['Булевых значений всего ', ': они бывают либо ', ' либо ', '']
// 2 true false

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

            
          
          function emphasizer(strings, ...values) {  const emphasized = values.map((value, i) => {    // Склеиваем строку и измененное значение для неё    return `${strings[i]}<i>${value}</i>`  })  // Не забываем добавить в конце последнюю строчку, так как количество строк больше выражений  return `${emphasized.join('')}${strings[strings.length - 1]}`}
          function emphasizer(strings, ...values) {
  const emphasized = values.map((value, i) => {
    // Склеиваем строку и измененное значение для неё
    return `${strings[i]}<i>${value}</i>`
  })

  // Не забываем добавить в конце последнюю строчку, так как количество строк больше выражений
  return `${emphasized.join('')}${strings[strings.length - 1]}`
}

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

    На практике

    Скопировано

    Егор Огарков советует

    Скопировано

    🛠 В коде можно смешивать использование обоих видов строк: использовать обычные строки для статических значений, а для динамических — шаблонные строки.

    🛠 Шаблонные строки могут быть очень полезны для формирования динамической html-разметки с помощью JavaScript.

            
          
          const inner = `<form>  <input type="text" />  <button>Submit</button></form>`const errorText = `Внимание! Ваш аккаунт <b>${accountName}</b> заблокирован.`
          const inner = `
<form>
  <input type="text" />
  <button>Submit</button>
</form>
`

const errorText = `Внимание! Ваш аккаунт <b>${accountName}</b> заблокирован.`

    Читайте также