Если вы хотите использовать экранированные символы новой строки, их можно использовать красиво. Похоже на документ с рамкой страницы.

В ES6 это можно сделать с помощью шаблонных литералов:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Дополнительная информация здесь

Вы можете использовать TypeScript (JavaScript SuperSet), он поддерживает многострочные строки и переносит обратно в чистый JavaScript без накладных расходов. :

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

Если вы хотите добиться того же с помощью простого JavaScript:

var templates = 
{
 myString: function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

}
alert(templates.myString)

Обратите внимание, что iPad / Safari не поддерживает 'functionName.toString()'

Если у вас много устаревшего кода, вы также можете использовать простой вариант JavaScript в TypeScript (для очистки):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

и вы можете использовать многострочный объект из простого варианта JavaScript, где вы помещаете шаблоны в другой файл (который вы можете объединить в пакет).

Вы можете попробовать TypeScript на
http://www.typescriptlang.org/Playground.

Самый простой способ сделать многострочные строки в Javascrips - использовать обратные кавычки (``). Это позволяет вам создавать многострочные строки, в которые вы можете вставлять переменные с ${variableName}.

Пример:

let name = 'Willem'; 
let age = 26;

let multilineString = `
my name is: ${name}

my age is: ${age}
`;

console.log(multilineString);

совместимость:

• Он был введен в _3 _ // _ 4_
• Теперь он изначально поддерживается всеми основными поставщиками браузеров (кроме Internet Explorer).

Проверьте точную совместимость в документации Mozilla здесь

ES6 позволяет использовать обратную кавычку для указания строки на нескольких строках. Это называется шаблонным литералом. Нравится:

var multilineString = `One line of text
    second line of text
    third line of text
    fourth line of text`;

Использование обратной кавычки работает в NodeJS и поддерживается Chrome, Firefox, Edge, Safari и Opera.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Также обратите внимание, что при расширении строки на несколько строк с использованием прямой обратной косой черты в конце каждой строки любые дополнительные символы (в основном пробелы, табуляции и комментарии, добавленные по ошибке) после прямой обратной косой черты вызовут неожиданную символьную ошибку, на поиск которой мне потребовался час. из

var string = "line1\  // comment, space or tabs here raise error
line2";

Пожалуйста, из любви к Интернету используйте конкатенацию строк и не используйте для этого решения ES6. ES6 НЕ поддерживается повсеместно, как и CSS3, и некоторые браузеры медленно адаптируются к движению CSS3. Используйте старый простой JavaScript, ваши конечные пользователи будут вам благодарны.

Пример:

var str = "This world is neither flat nor round. "+ "Once was lost will be found";

Моя версия объединения на основе массивов для конкатенации строк:

var c = []; //c stands for content
c.push("<div id='thisDiv' style='left:10px'></div>");
c.push("<div onclick='showDo(\'something\');'></div>");
$(body).append(c.join('\n'));

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

Требуется ли много времени для добавления в массив .push ()? См. Соответствующий ответ:

(Есть ли причина, по которой разработчики JavaScript не используют массив? .push ()?)

Посмотрев на эти (противоположные) тестовые прогоны, похоже, что .push () подходит для строковых массивов, которые вряд ли вырастут более чем на 100 элементов - я буду избегать его в пользу индексированных добавлений для более крупных массивов.

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

var hello = 'hello' +
            'world' +
            'blah';

можно также записать как

var hello = 'hello';
    hello += ' world';
    hello += ' blah';

console.log(hello);

Вы должны использовать оператор конкатенации "+".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var str = "This "
                + "\n<br>is "
                + "\n<br>multiline "
                + "\n<br>string.";
        document.getElementById("demo").innerHTML = str;
     </script>
</body>
</html>

При использовании \n ваш исходный код будет выглядеть так:

This 
 <br>is
 <br>multiline
 <br>string.

При использовании <br> вывод вашего браузера будет выглядеть так:

This
is
multiline
string.

Точный

Ruby производит: "This\nIs\nA\nMultiline\nString\n" - ниже JS создает точно такую ​​же строку

text = `This
Is
A
Multiline
String
`

// TEST
console.log(JSON.stringify(text));
console.log(text);

Это улучшение Лонни Лучший ответ, потому что символы новой строки в его ответе не совсем те же позиции, что и в выводе ruby.

Я думаю, что этот обходной путь должен работать в IE, Chrome, Firefox, Safari, Opera -

Использование jQuery:

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert($('#unique_id').html());
</script>

Использование чистого Javascript:

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert(document.getElementById('unique_id').innerHTML);
</script>

Ваше здоровье!!

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

Например:

// Merging multiple whitespaces and trimming the output

const t = (strings) => { return strings.map((s) => s.replace(/\s+/g, ' ')).join("").trim() }
console.log(t`
  This
  Is
  A
  Multiline
  String
`);
// Output: 'This Is A Multiline String'

// Similar but keeping whitespaces:

const tW = (strings) => { return strings.map((s) => s.replace(/\s+/g, '\n')).join("").trim() }
console.log(tW`
  This
  Is
  A
  Multiline
  String
`);
// Output: 'This\nIs\nA\nMultiline\nString'

Просто попробовал анонимный ответ и обнаружил, что здесь есть небольшая хитрость, он не работает, если после обратной косой черты есть пробел \
Итак, следующее решение не работает -

var x = { test:'<?xml version="1.0"?>\ <-- One space here
            <?mso-application progid="Excel.Sheet"?>' 
};

Но когда пространство удалено, это работает -

var x = { test:'<?xml version="1.0"?>\<-- No space here now
          <?mso-application progid="Excel.Sheet"?>' 
};

alert(x.test);​

Надеюсь, это поможет !!

Я программирую так:

sys = {
    layout: null,
    makeLayout: function (obCLS) {
        this.layout = $('<div />').addClass('editor').appendTo($(obCLS)).append(

            /* Cargador */
            /* @this.layout.find('> div:nth-of-child(1)'); */
            '<div>' +
            '   <p>Seleccione la imagen que desea procesar.</p>' +
            '   <input type="button" value="Seleccionar" class="btn btn-xlarge btn-success" />' +
            '   <span></span>' +
            '</div>' +

            /* Cargador - Progreso */
            /* @this.layout.find('> div:nth-of-child(2)'); */
            '<div>' +
            '   <div>' +
            '       <div></div>' +
            '       <div>' +
            '           <div></div>' +
            '       </div>' +
            '   </div>' +
            '</div>' +

            /* Editor */
            /* @this.layout.find('> div:nth-of-child(3)');
             * @sidebar = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(1)');
             * @body    = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(2) > div'); */
            '<div>' +
            '   <div>' +
            '       <div>' +
            '           <div></div>' +
            '           <div>' +
            '               <div></div>' +
            '           </div>' +
            '       </div>' +
            '   </div>' +
            '</div>'
        );
    }
}

sys.makeLayout('#div');

Думаю, я нашел другой способ сделать это встроенным без какого-либо инвазивного синтаксиса в каждой строке. Используйте возможность Javascript для преобразования функции в строку и создания многострочного комментария с синтаксисом /**/, затем удалите «function () {/ * \ n» и «\ n * /}».

var multiline = function(string) { return string.toString().replace(/(^[^\n]*\n)|(\n\*\/\})/g, ""); };

console.log(multiline(function() {/*
Hello world!
I'm a multiline string!

Tada!
*/}));

Единственная ошибка, которую я вижу в этом, - это подсветка синтаксиса.

РЕДАКТИРОВАТЬ: если бы я прокрутил еще немного, я бы увидел, что этот ответ делает то же самое: https://stackoverflow.com/a/5571069/916553

Если вы работаете только в Node, вы можете использовать модуль fs для чтения многострочной строки из файла:

var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
  if (err) {
    throw err; 
  }
  diagram = data.toString();
});

Это довольно экономичный подход, по крайней мере, с точки зрения исходного кода:

function s() {
    var args = [],index;
    for (index = 0; index< arguments.length; index++) {
        args.push (arguments [index]);
    }
    return args.join ("\n");
}
console.log (s (
    "This is the first line",
    "and this is the second",
    "finally a third"
));

function s() {return arguments.join ("\n")} 

было бы, конечно, лучше, если бы свойство «arguments» было правильным массивом.

Вторая версия может использовать "" для объединения в случаях, когда вы хотите контролировать разрывы строк в очень длинной строке.

Правило: внутри строки используйте \ n везде, где хотите новую строку; вам не нужно ставить пробел до или после \ n, интерпретатор JavaScript достаточно умен, чтобы знать, как долго длится непечатаемое символьное представление.

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

этот код javascript должен оставаться внутри тегов скрипта.

var html=<?php echo json_encode("

        <div class=container>
            <div class=area1>
                xxx
            </div>
            <div class=area2>
                ".$someVar."
            </div>
        </div>

"); ?>

в своем выходном HTML вы увидите что-то вроде

var html="\r\n\r\n\t\t\t<div class=container>\r\n\t\t\t\t<div class=area1>\r\n\t\t\t\t\txxx\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=area2>\r\n\t\t\t\t\t44\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t";  

и et voilà!, это обеспечивает читаемость кода в вашем файле.

pD: в этом примере используется функция PHP json_encode (), но, безусловно, существуют эквиваленты функций для языков ASP, Ruby и JSP.

pD: однако у этого решения тоже есть свои ограничения, одно из них - вы не можете использовать переменные javascript внутри инкапсулированного кода.

Это не очень элегантно, но для меня достаточно чистое:

Будьте осторожны: некоторые браузеры будут вставлять новые строки при продолжении, некоторые нет.

var myString = "First line" + "\n";
var myString = myString + "Second line" + "\n";
var myString = myString + "Third line" + "\n";