JavaScript всегда затруднял работу с длинными строками, особенно когда вам нужно отформатировать их на несколько строк. Решение всегда заключалось в том, что вам нужно объединить несколько строк следующим образом:

var foo = "So here is us, on the " +
  "raggedy edge. Don't push me, " +
  "and I won't push you.";

Или используйте продолжение строки:

var foo = "So here is us, on the \
  raggedy edge. Don't push me, \
  and I won't push you.";

Ни то, ни другое не выглядит красивым. Последнее изначально было строго незаконным в ECMAScript (hattip Joseanpg):

Символ «LineTerminator» не может появляться в строковом литерале, даже если ему предшествует обратная косая черта \. Правильный способ сделать символ конца строки частью строкового значения строкового литерала - использовать escape-последовательность, такую ​​как \ n или \ u000A.

- ECMA-262 3-е издание

В bugzilla есть замечательная ошибка, в которой обсуждались последствия изменения поведения для строгого соблюдения спецификации еще в 2001 году. Если вам интересно, она БЫЛА ИСПРАВЛЕНА.

В 5-м издании ECMAScript эта часть была изменена на следующее:

Символ конца строки не может появляться в строковом литерале, кроме как как часть LineContinuation для создания пустой последовательности символов. Правильный способ сделать символ конца строки частью значения String строкового литерала - использовать escape-последовательность, такую ​​как \ n или \ u000A.

- ECMA-262 5-е издание

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

Шаблонные литералы ES6

Литералы шаблона - это строковые литералы, допускающие встроенные выражения. С ними можно использовать многострочные строки и функции интерполяции строк. В предыдущих выпусках спецификации ES2015 они назывались «шаблонными строками».

Увидев строки шаблонов, я сразу же вскочил и обнаружил, что это происходит.

var raggedy = 'raggedy';
console.log(`So here is us, on the 
             ${raggedy} edge. Don't push
             me, and I won't push you.`);

Так это выглядит аккуратно, правда? Но, черт возьми, что он выводит?

So here is us, on the raggedy edge. Don't push me, and I won't push you.