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

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

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

Ответ 1

Обновить:

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

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

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

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

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

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

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

"foo \
bar"

Ответ 2

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

Ответ 3

the pattern 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.';

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

Ответ 4

Вы можете иметь многострочные строки в чистом 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.

Ответ 5

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

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

Ответ 6

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

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)

Ответ 7

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

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

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

Ответ 8

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

например.

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

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

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

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

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

Я получаю:

Ответ 9

Использование тегов 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>

Ответ 10

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

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

Ответ 11

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

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

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

Ответ 12

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

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>
*/});

Ответ 13

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

Ответ 14

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

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

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

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

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

Ответ 15

Обновлен в 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');

Легко.

Ответ 16

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

Ответ 17

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

Ответ 18

Мое расширение fooobar.com/questions/660/.... Он ожидает комментарий в форме /*! 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();

Ответ 19

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

var text = `
This
Is
A
Multiline
String
`;

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

Ответ 20

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

Ответ 21

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

Ответ 22

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

Пример:

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

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

my age is: ${age}
';

console.log(multilineString);

Ответ 23

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

Ответ 24

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

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

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

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

console.log(hello);

Ответ 25

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

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

Ответ 26

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

Пример:

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

Ответ 27

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

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

Ответ 28

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

const str = 'This 

is 

a

multiline text'; 

console.log(str);

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

Ответ 29

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

Ура!!

Ответ 30

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

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

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