Template literals (шаблонные строки) в JavaScript

18.08.2021

Введение

Когда я только учил JavaScript, строки с подстановками выглядели чем-то странным. Казалось, что обычные кавычки справляются со всем. Но стоило добавить пару переменных — и началась боль: плюсы, конкатенация, пробелы, кавычки, переносы…

Шаблонные строки (template literals) решают эту проблему раз и навсегда. Это удобный и современный способ работать со строками в JS. В этой статье разберёмся, как они работают и почему ими стоит пользоваться каждый день.

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

Шаблонные строки — это строки в обратных кавычках:

`Вот так`

Они позволяют:

подставлять переменные и выражения через ${ ... };
писать многострочные строки без хака;
собирать текст красиво и читабельно.

Как работает подстановка значений

Это самая полезная часть.

const firstName = 'Pavel'
const lastName = 'Ermilov'

const fullName = `${firstName} ${lastName}`

Без плюсов, без кавычек по бокам — всё чисто и понятно.

Подставлять можно не только переменные:

const sum = `${2 + 3}`

или даже функцию:

const age = (year) => new Date().getFullYear() - year

const text = `Сейчас мне ${age(1994)} лет`

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

Раньше приходилось делать так:

const text = 'строка\nещё строка\nи ещё'

Теперь — просто:

const text = `
Первая строка
Вторая строка
Третья строка
`

Что пишешь — то и получаешь.

Где шаблонные строки экономят время

1. Формирование сообщений

const product = 'iPhone'
const price = 999

console.log(`Цена товара ${product} составляет $${price}`)

2. HTML-шаблоны

const user = 'Pavel'

const html = `
  <div class="user">
    <p>Hello, ${user}!</p>
  </div>
`

3. Логи и отладка

console.log(`Функция calc вызвана с аргументом: ${value}`)

Заключение

Темплейт-литералы — обязательный инструмент современного JavaScript. Они делают строки читабельными, код — чище, а работу — быстрее.

И самое важное: они экономят силу внимания. А это главный ресурс разработчика.

Ниже прикреплю старые карточки, которые я сделал ещё 18.08.21 — они отлично дополняют тему.