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

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

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

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

интерполяция переменных-популярная новая функция, которая поставляется с строками с разделителями:

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

это просто transpiles до конкатенации:

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

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

вы can имеют многострочные строки в чистом 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

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

Я думаю реальные решение было бы использовать 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>
  `

Мне нравится этот синтаксис и indendation:

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

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

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

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

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

требуют.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();

можно использовать машинопись (JavaScript и Суперсет), он поддерживает многострочные строки, и transpiles обратно на чистом 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 позволяет использовать backtick для указания строки на нескольких строках. Это называется шаблонным литералом. Вот так:

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

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

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

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
• теперь он изначально поддерживается всеми основными поставщиками браузеров (кроме интернета explorer)

Проверьте точную совместимость в 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();
});