Иногда текст в программе должен состоять из нескольких строк. Например, при генерации письма, создании шаблона, форматировании сообщения об ошибке или просто работе с длинными текстами.

Конечно, можно использовать символ перевода строки \n, как мы делали раньше:

const text = 'Пример текста,\nсостоящего из\nнескольких строк';

На печати строка будет выглядеть так:

Пример текста,
состоящего из
нескольких строк

Но такой способ становится неудобным, особенно если строка длинная или нужно часто добавлять новые переносы. Каждый \n приходится вставлять вручную, и это ухудшает читаемость кода.

Многострочные строки как альтернатива

В JavaScript есть более удобный способ записывать текст в несколько строк — шаблонные строки (template literals). Они записываются в обратных кавычках `, и все переносы строк внутри сохраняются буквально:

const text = `Пример текста,
состоящего из
нескольких строк`;

Теперь в коде всё выглядит так же, как и при выводе:

Пример текста,
состоящего из
нескольких строк

Каждый перенос в исходном коде превращается в символ \n внутри строки.

Осторожно с пустой строкой в конце

Где вы поставите закрывающую обратную кавычку — там и закончится текст. Если перенести её на новую строку, этот перенос тоже войдёт в результат:

const text = `Пример текста,
состоящего из
нескольких строк
`;

console.log('====');
console.log(text);
console.log('====');

Вывод:

====
Пример текста,
состоящего из
нескольких строк

====

Обратите внимание: появляется пустая строка в конце. Чтобы её избежать, не переносите закрывающую кавычку на новую строку:

const text = `Пример текста,
состоящего из
нескольких строк`;

Преимущества многострочных строк

• Читаемость кода: текст в коде выглядит почти как на экране.
• Удобство при редактировании: легко добавлять, удалять и менять строки.
• Не нужно экранировать кавычки внутри:

const quote = `Здесь не нужно экранировать 'одинарные' и "двойные" кавычки`;

Интерполяция внутри многострочной строки

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

const a = 'A';
const b = 'B';

const text = `${a} и ${b}
сидели на трубе`;

Вывод:

A и B
сидели на трубе

Это особенно удобно для шаблонов, писем, сообщений об ошибках и многострочных описаний.

Осторожно с отступами

Отступы в коде войдут в строку. Если сделать отступ внутри шаблонной строки, он появится в тексте:

const message = `Hello
  World`; // строка содержит 2 пробела перед World

Компьютер и человек воспринимают код по-разному

JavaScript одинаково обработает и строку с \n, и многострочную строку — для движка это одно и то же. Но для человека, читающего код, многострочные строки намного удобнее и нагляднее.

Создайте переменную email с многострочным текстом и выведите её на экран:

Dear customer!

Your order has been accepted.
Expected delivery: 3 business days.

Используйте шаблонную строку (обратные кавычки).