Создание многострочных строк в JavaScript

Обновление ES6:

Как упоминается в первом ответе, с ES6/Babel вы можете теперь создавать многострочные строки просто используя обратные ссылки:

const htmlString = 'Say hello to 
multi-line
strings!';

Интерполирующие переменные являются популярной новой функцией, которая поставляется с строками с ограниченным типом:

const htmlString = '${user.name} liked your post about strings';

Это просто сводится к конкатенации:

user.name + ' liked your post about strings'

Оригинальный ответ ES5:

В руководстве по стилю JavaScript в JavaScript рекомендуется использовать конкатенацию строк вместо экранирования строк:

Не делай это:

var myString = 'A rather long string of English text, an error message \
                actually that just keeps going and going -- an error \
                message to make the Energizer bunny blush (right through \
                those Schwarzenegger shades)! Where was I? Oh yes, \
                you\'ve got an error and all the extraneous whitespace is \
                just gravy.  Have a nice day.';

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

Вместо этого используйте конкатенацию строк:

var myString = 'A rather long string of English text, an error message ' +
               'actually that just keeps going and going -- an error ' +
               'message to make the Energizer bunny blush (right through ' +
               'those Schwarzenegger shades)! Where was I? Oh yes, ' +
               'you\'ve got an error and all the extraneous whitespace is ' +
               'just gravy.  Have a nice day.';

шаблон text = <<"HERE" This Is A Multiline String HERE недоступна в js (я помню, как много использовал ее в старые добрые дни Perl).

Чтобы следить за сложными или длинными многострочными строками, я иногда использую шаблон массива:

var myString = 
   ['<div id="someId">',
    'some content<br />',
    '<a href="#someRef">someRefTxt</a>',
    '</div>'
   ].join('\n');

или анонимный шаблон уже показал (escape newline), который может быть уродливым блоком в вашем коде:

    var myString = 
       '<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';

Вот еще один странный, но рабочий "трюк" ¹:

var myString = (function () {/*
   <div id="someId">
     some content<br />
     <a href="#someRef">someRefTxt</a>
    </div>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

внешнее редактирование: jsfiddle

ES20xx поддерживает привязку строк к нескольким строкам с использованием строк шаблонов:

let str = 'This is a text
    with multiple lines.
    Escapes are interpreted,
    \n is a newline.';
let str = String.raw'This is a text
    with multiple lines.
    Escapes are not interpreted,
    \n is not a newline.';

¹ Примечание: это будет потеряно после сведения/обфускации кода

Вы можете иметь многострочные строки в чистом JavaScript.

Этот метод основан на сериализации функций, которая определена как зависящая от реализации. Он работает в большинстве браузеров (см. Ниже), но нет гарантии, что он все равно будет работать в будущем, поэтому не полагайтесь на него.

Используя следующую функцию:

function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*!?/, '').
      replace(/\*\/[^\/]+$/, '');
}

У вас могут быть следующие документы:

var tennysonQuote = hereDoc(function() {/*!
  Theirs not to make reply,
  Theirs not to reason why,
  Theirs but to do and die
*/});

Метод успешно протестирован в следующих браузерах (не упомянуто = не проверено):

• IE 4 - 10
• Opera 9.50 - 12 (не в 9 -)
• Safari 4 - 6 (не в 3 -)
• Chrome 1 - 45
• Firefox 17 - 21 (не в 16 -)
• Rekonq 0.7.0 - 0.8.0
• Не поддерживается в Konqueror 4.7.4

Будьте осторожны с вашим minifier. Он имеет тенденцию удалять комментарии. Для компрессора YUI комментарий, начинающийся с /*! (как тот, который я использовал), будет сохранен.

Я думаю, что реальным решением было бы использовать CoffeeScript.

Вы можете сделать это...

var string = 'This is\n' +
'a multiline\n' + 
'string';

Я придумал этот очень сложный метод многослойной строки. Поскольку преобразование функции в строку также возвращает любые комментарии внутри функции, вы можете использовать комментарии в качестве своей строки, используя многострочный комментарий /**/. Вам просто нужно обрезать концы, и у вас есть строка.

var 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(myString)

Я удивлен, что не видел этого, потому что он работает везде, где я его тестировал, и очень полезен, например. шаблоны:

<script type="bogus" id="multi">
    My
    multiline
    string
</script>
<script>
    alert($('#multi').html());
</script>

Кто-нибудь знает об окружающей среде, где есть HTML, но он не работает?

Я решил это, выведя div, сделав его скрытым и вызвав div id jQuery, когда мне это нужно.

например.

<div id="UniqueID" style="display:none;">
     Strings
     On
     Multiple
     Lines
     Here
</div>

Затем, когда мне нужно получить строку, я просто использую следующий jQuery:

$('#UniqueID').html();

Который возвращает мой текст на нескольких строках. Если я позвоню

alert($('#UniqueID').html());

Я получаю:

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

• добавьте блок <script>...</script>, содержащий ваш многострочный текст, в тег head;

• получить свой многострочный текст как есть... (обратите внимание на кодировку текста: UTF-8, ASCII)

  <script>
  
      // pure javascript
      var text = document.getElementById("mySoapMessage").innerHTML ;
  
      // using JQuery document ready for safety
      $(document).ready(function() {
  
          var text = $("#mySoapMessage").html(); 
  
      });
  
  </script>
  
  <script id="mySoapMessage" type="text/plain">
  
      <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:typ="...">
         <soapenv:Header/>
         <soapenv:Body>
            <typ:getConvocadosElement>
               ...
            </typ:getConvocadosElement>
         </soapenv:Body>
      </soapenv:Envelope>
  
      <!-- this comment will be present on your string -->
      //uh-oh, javascript comments...  SOAP request will fail 
  
  
  </script>
  

Существует несколько способов достижения этого

1. Конкатенация слэш

  var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';

2. регулярная конкатенация

var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';

3. Array Присоединиться к конкатенации

var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');

Производительность, Конкатенация слэш (первая) - самая быстрая.

Обратитесь этот тестовый пример для получения более подробной информации о производительности

Update:

С ES2015 мы можем воспользоваться функцией Template strings. При этом нам просто нужно использовать обратные тики для создания многострочных строк

Пример:

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

Мне нравится этот синтаксис и подзаголовок:

string = 'my long string...\n'
       + 'continue here\n'
       + 'and here.';

(но на самом деле нельзя рассматривать как многострочную строку)

Вот эта библиотека, которая делает ее красивой:

https://github.com/sindresorhus/multiline

Перед

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1> unicorns</h1>' +
'   </body>' +
'</html>' +
'';

После

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1> unicorns</h1>
    </body>
</html>
*/});

Downvoters. Этот код предоставляется только для информации.

Это было протестировано в Fx 19 и Chrome 24 на Mac

DEMO

var new_comment; /*<<<EOF 
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>
       </span>
       <span class="comment-text">
          $text
       </span>
       <span class="comment-time">
          2d
       </span>
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));

чтобы подвести итог, я пробовал 2 подхода, перечисленные здесь в программировании javascript пользователя (Opera 11.01):

• этот файл не работал: Создание многострочных строк в JavaScript
• Это работало довольно хорошо, я также выяснил, как сделать его хорошо выглядящим в исходном представлении Notepad ++: Создание многострочных строк в JavaScript

Поэтому я рекомендую рабочий подход для пользователей JS пользователей Opera. В отличие от того, что говорил автор:

Это не работает в firefox или opera; только на IE, хром и сафари.

Он работает в Opera 11. По крайней мере, в пользовательских сценариях JS. Жаль, что я не могу комментировать ответы на отдельные вопросы или отвечать на них, я бы сделал это немедленно. Если возможно, кто-то с более высокими привилегиями, пожалуйста, сделайте это для меня.

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

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

require.js: "требуется текст".

Используя require.js 'text' plugin, с многострочным шаблоном в template.html

var template = require('text!template.html')

NPM/браузер: модуль 'brfs'

Browserify использует модуль "brfs" для загрузки текстовых файлов. Это фактически создаст ваш шаблон в вашем комплекте HTML.

var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');

Легко.

Эквивалент в javascript:

var text = `
This
Is
A
Multiline
String
`;

Здесь спецификация. См. Поддержку браузера в нижней части этой страницы. Вот некоторые примеры.

Вы можете использовать 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

Мое расширение https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript. Он ожидает комментарий в форме /*! any multiline comment */, где символ! используется для предотвращения удаления путем минификации (по крайней мере, для компрессора YUI)

Function.prototype.extractComment = function() {
    var startComment = "/*!";
    var endComment = "*/";
    var str = this.toString();

    var start = str.indexOf(startComment);
    var end = str.lastIndexOf(endComment);

    return str.slice(start + startComment.length, -(str.length - end));
};

Пример:

var tmpl = function() { /*!
 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    </ul>
 </div>
*/}.extractComment();

Это работает в IE, Safari, Chrome и Firefox:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="crazy_idea" thorn_in_my_side='<table  border="0">
                        <tr>
                            <td ><span class="mlayouttablecellsdynamic">PACKAGE price $65.00</span></td>
                        </tr>
                    </table>'></div>
<script type="text/javascript">
    alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>

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

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

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

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

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

Пример:

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

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

my age is: ${age}
';

console.log(multilineString);

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

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

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

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

Пример:

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

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

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

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

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

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

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

console.log(hello);

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

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 не используют Array.push()?)

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

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

<!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.

Я думаю, что это обходное решение должно работать в 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>

Ура!!

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

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

Я думаю, что я обнаружил другой способ сделать это inline без какого-либо инвазивного синтаксиса в каждой строке. Используйте функцию 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!
*/}));

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

EDIT: Если бы я прокрутил немного больше, я бы увидел, что этот ответ делает то же самое: https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript

Просто попробовал анонимный ответ и нашел здесь небольшой трюк, он не работает, если есть пробел после обратного слэша \
Таким образом, следующее решение не работает -

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);​

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

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

const str = 'This 

is 

a

multiline text'; 

console.log(str);

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

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

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: этот пример использует функцию json_encode() PHP, но, безусловно, существуют эквиваленты функций для ASP, Ruby и JSP langs.

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

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

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');

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

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" было правильным массивом.

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

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

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