Многострочные строки в JavaScript: 3 способа, которые упростят жизнь

Как присвоить многострочную строку переменной в JavaScript: разбор для начинающих

Вы когда-нибудь писали длинный текст в коде и думали: «Неужели нельзя просто нажать Enter и продолжить на новой строке?» Если вы новичок в JavaScript, то, скорее всего, уже сталкивались с этим. Вы пытаетесь сохранить многострочный текст в переменную, а получаете синтаксическую ошибку. Знакомо?

Вопрос «How can I assign a multiline string literal to a variable?» — один из самых популярных на Stack Overflow. Тысячи разработчиков ищут на него ответ. И неудивительно: работа с многострочными строками — это база, которую нужно освоить каждому, кто пишет на JavaScript.

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

Почему JavaScript не любит переносы строк в кавычках?

Давайте сразу разберёмся с главной проблемой. Если вы попробуете написать так:

let message = "Привет!
Как дела?
Всё хорошо?";
console.log(message);

… то получите ошибку SyntaxError: unterminated string literal. Почему? Потому что в обычных строках (в двойных или одинарных кавычках) JavaScript считает, что строка заканчивается на той же строке, где началась. Перенос строки физически разрывает строку.

Но не спешите расстраиваться. У нас есть как минимум три способа обойти это ограничение. И первый из них — самый современный и удобный.

Способ 1: Шаблонные литералы (Template Literals) — ваш новый лучший друг

Начиная с ES6 (ECMAScript 2015) в JavaScript появились шаблонные литералы. Это строки, которые заключаются в обратные кавычки (` `). И именно они решают проблему многострочности раз и навсегда.

Посмотрите, как это просто:

let multilineString = `Это первая строка.
Это вторая строка.
А это третья строка.`;

console.log(multilineString);
// Вывод:
// Это первая строка.
// Это вторая строка.
// А это третья строка.

Всё работает из коробки. Вы просто пишете текст с переносами, и JavaScript сохраняет их как есть. Никаких лишних символов, никакой магии.

Почему это лучший вариант для начинающих?

• Читаемость: Код выглядит так, как вы его задумали.
• Поддержка интерполяции: Вы можете вставлять переменные прямо в строку через ${...}.
• Стандарт: Все современные браузеры и Node.js поддерживают шаблонные литералы.

Пример с интерполяцией:

let name = "Анна";
let greeting = `Привет, ${name}!
Добро пожаловать на PythonLib.
Сегодня отличный день для изучения кода.`;

console.log(greeting);
// Вывод:
// Привет, Анна!
// Добро пожаловать на PythonLib.
// Сегодня отличный день для изучения кода.

Этот способ настолько удобен, что в современной разработке он используется в 90% случаев. Если вы только начинаете — запомните именно его.

Способ 2: Конкатенация строк (старый, но надёжный метод)

До появления шаблонных литералов разработчики использовали конкатенацию — склеивание строк с помощью оператора +. Этот метод всё ещё актуален, особенно если вы работаете с очень старым кодом или не можете использовать ES6 по каким-то причинам.

Как это выглядит:

let multilineString = "Это первая строка.\n" +
                     "Это вторая строка.\n" +
                     "А это третья строка.";

console.log(multilineString);
// Вывод:
// Это первая строка.
// Это вторая строка.
// А это третья строка.

Обратите внимание на \n — это escape-последовательность (символ новой строки). Без него все строки склеятся в одну длинную строку.

Плюсы конкатенации:

• Работает везде, даже в очень старых версиях JavaScript.
• Всё ещё используется в некоторых проектах.

Минусы:

• Многословно: каждый перенос строки нужно явно указывать через \n.
• Легко запутаться в кавычках и плюсах.
• Код становится менее читаемым.

Иногда разработчики используют конкатенацию без \n, просто разбивая длинную строку на несколько строк в коде для удобства чтения:

let longText = "Это очень длинная строка, которую я хочу " +
               "разбить на несколько строк в редакторе кода, " +
               "но в результате она останется одной строкой.";

console.log(longText);
// Вывод: Это очень длинная строка, которую я хочу разбить на несколько строк в редакторе кода, но в результате она останется одной строкой.

Этот приём полезен, когда вам нужно сохранить длинный текст, но не хочется выходить за пределы 80-100 символов в строке кода (по правилам хорошего тона).

Способ 3: Экранирование с обратным слешем (антипаттерн, но знать стоит)

Некоторые разработчики старой школы использовали обратный слеш (\) в конце строки, чтобы «склеить» строки в коде. Это работает, но считается плохой практикой.

Пример:

let multilineString = "Это первая строка. \
Это вторая строка. \
А это третья строка.";

console.log(multilineString);
// Вывод: Это первая строка. Это вторая строка. А это третья строка.

Важно! В этом случае переносы строк не сохраняются. Обратный слеш просто говорит JavaScript: «Игнорируй перенос строки в коде». В результате вы получаете одну длинную строку.

Если вам нужны именно переносы, придётся снова добавлять \n:

let multilineString = "Это первая строка.\n \
Это вторая строка.\n \
А это третья строка.";

console.log(multilineString);
// Вывод:
// Это первая строка.
// Это вторая строка.
// А это третья строка.

Почему этот метод не рекомендуется?

• Обратный слеш легко пропустить или случайно удалить.
• Код становится хрупким и трудночитаемым.
• Современные линтеры и редакторы кода часто подсвечивают этот подход как потенциальную ошибку.

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