Создание многострочных строк в 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 от Google рекомендует использовать строку конкатенация вместо экранирования новых строк:

не делайте этого:

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

или уже показанный шаблон anonymous (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
*/});

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

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

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

Я думаю реальные решение было бы использовать 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 по jQuery, когда мне это было нужно.

например

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

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

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

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

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

Я:

скрипт, используя теги:

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

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

  <script>
  
      // pure javascript
      var text = document.getElementById("mySoapMessage").innerHTML ;
  
      // using JQuery's 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. Объединение массива в конкатенацию

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

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

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

обновление:

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

пример:

 `<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

демо

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++ source view:создание многострочных строк в JavaScript

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

Он не работает в firefox или opera; только в IE, chrome и safari.

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

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

требуют.ДШ: 'требуется текст'.

используя требуют.JS' text ' плагин, С многострочным шаблоном внутри шаблон.HTML-код

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

NPM / browserify: модуль 'brfs'

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

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

легко.

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

это работает в 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 .00</span></td>
                        </tr>
                    </table>'></div>
<script type="text/javascript">
    alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>

мое расширение до https://stackoverflow.com/a/15558082/80404. Он ожидает комментарий в виде /*! 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();

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

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

var text = `
This
Is
A
Multiline
String
`;

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

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

моя версия на основе массива присоединиться к строку конкатенацию:

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 () отлично подходит для строковых массивов, которые вряд ли вырастут более чем на 100 элементов - я буду избегать его в пользу индексированных добавлений для больших массивов.

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

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

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

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

console.log(hello);

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

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";

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

пример:

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

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

my age is: ${age}
`;

console.log(multilineString);

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

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

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

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

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

Ура!!

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

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

надеюсь, что это помогает !!

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

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