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

У меня есть следующий код в Ruby. Я хочу преобразовать этот код в JavaScript. какой эквивалентный код в JS?

text = <<"HERE"
This
Is
A
Multiline
String
HERE

Обновить:

ECMAScript 6 (ES6) представляет новый тип литералов, а именно шаблонные литералы . У них много функций, среди которых переменная интерполяция, но, что важнее всего, для этого вопроса они могут быть многострочными.

Литерал шаблона отделяется обратными чертами :

var html = `
  <div>
    <span>Some HTML here</span>
  </div>
`;

(Примечание: я не рекомендую использовать HTML в строках)

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

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

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

"foo \
bar"

Обновление 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:

Руководство по стилю Google для 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
• Опера 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

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

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

ES6 ОБНОВЛЕНИЕ: Вы можете использовать backtick вместо создания функции с комментарием и запуска toString для комментария. Регулярное выражение должно быть обновлено, чтобы удалить только пробелы. Вы также можете иметь метод прототипа строки для этого:

let foo = `
  bar loves cake
  baz loves beer
  beer loves people
`.removeIndentation()

Это было бы круто. Кто-то должен написать этот строковый метод .removeIndentation ...;)

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

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

Я получил:

Есть несколько способов добиться этого

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

С точки зрения производительности конкатенация Slash (первая) - самая быстрая.

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

Обновить:

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

Пример:

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

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

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

• получить ваш многострочный текст как есть ... (обратите внимание на кодировку текста: 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>

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

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> ago
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
document.querySelector("ul").innerHTML=new_comment.replace('$text','This is a dynamically created text');

<ul></ul>

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

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

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

Это не работает на Firefox или Opera; только на IE, Chrome и Safari.

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

Мое расширение на 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();

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

require.js: 'требуют текст'.

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

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

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

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

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

Легко.

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

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

var text = `
This
Is
A
Multiline
String
`;

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

Это работает в 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>

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

ES6 может сделать это, используя литералы шаблонов:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Больше ссылки здесь

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 можно узнать здесь

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

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

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

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

<!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вашего исходного кода будет выглядеть так -

Эта 
 <br> является
 <br> многострочный
 <br> строка.

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

Эта
является
многострочный
строка.

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

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