Вспомним, как работает конкатенация. Для этого мы соединяем нужные строки (или переменные со строками внутри) с помощью знака +:

const firstName = 'Joffrey';
const greeting = 'Hello';

console.log(greeting + ', ' + firstName + '!');
// => Hello, Joffrey!

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

По этой причине во многих языках существует операция, которая называется интерполяцией. Интерполяция представляет собой способ встраивать значения переменных прямо внутрь строки. В JavaScript для этого используют шаблонные строки (template literals). Они записываются в обратных кавычках `, а переменные вставляются с помощью ${}:

const firstName = 'Joffrey';
const greeting = 'Hello';

console.log(`${greeting}, ${firstName}!`);
// => Hello, Joffrey!

Обратные кавычки указывают, что внутри строки можно использовать переменные. Их имена записываются в ${}, и JavaScript автоматически подставляет нужные значения.

firstName = 'Joff'
greeting  = 'Hello'

`${greeting}, ${firstName}!`
   └───┬───┘    └────┬────┘
   'Hello'        'Joff'
    └──────┬────────┘
    'Hello, Joff!'

Сравните эти два примера рядом:

console.log(greeting + ', ' + firstName + '!');
console.log(`${greeting}, ${firstName}!`);

Второй вариант проще и понятнее.

Как это работает

Всё, что находится внутри ${}, вычисляется как JavaScript-выражение, а результат вставляется в строку. Поэтому внутри можно использовать не только переменные, но и любые выражения: арифметику, вызовы функций и так далее.

const price = 100;
const count = 3;

console.log(`Итого: ${price * count} рублей`);
// => Итого: 300 рублей

Обратные кавычки — ключ

Шаблонная строка обязательно записывается в обратных кавычках `. Одинарные или двойные кавычки для интерполяции не работают:

console.log('${firstName}'); // выведет буквально: ${firstName}
console.log(`${firstName}`); // выведет значение переменной

Пример

const school = 'Hexlet';

const whatIsIt = `${school} - online courses`;
console.log(whatIsIt); // => Hexlet - online courses

Такая запись легко читается: пробелы, дефисы и символы видны сразу. Строка выглядит именно так, как она появится в выводе. Это делает код понятным и удобным в поддержке.

Почему это важно

Интерполяция предпочтительнее конкатенации почти во всех современных языках программирования. Она:

• упрощает структуру строк;
• улучшает читаемость кода;
• снижает количество ошибок при работе с пробелами и знаками препинания.

Дано две константы: username = 'Anna' и orderNumber = 1337. С помощью интерполяции выведите на экран:

Hello, Anna! Your order #1337 has been accepted.