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

Question

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

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

Answer 1

Обновить:

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

Литерал шаблона разделяется символом обратные подсказки:

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

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

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

---

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

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

"foo \
bar"

Answer 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:

Руководство по стилю 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.';

Answer 3

закономерность 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.`;

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

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

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

• Т. е. 4 - 10
• Опера 9.50 - 12 (не в 9-)
• Сафари 4 - 6 (не в 3-х)
• Хром 1 - 45
• Firefox 17 - 21 (только не в 16-)
• Ответ 0.7.0 - 0.8.0
• Не поддерживается в Konqueror 4.7.4

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

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

Answer 5

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

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

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

Answer 7

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

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

Кто-нибудь знает о среде, где есть HTML, но она не работает?

Answer 8

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

например ,

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

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

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

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

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

Я получаю:

Answer 9

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

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

Answer 10

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

• добавить <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>
  

Answer 11

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

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

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

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

Answer 13

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

Это было протестировано в 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'));

Answer 14

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

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

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

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

Это ДЕЙСТВИТЕЛЬНО работает в Opera 11.По крайней мере, в пользовательских JS-скриптах.Жаль, что я не могу прокомментировать отдельные ответы или поддержать ответ, я бы сделал это немедленно.Если возможно, кто-нибудь с более высокими привилегиями, пожалуйста, сделайте это за меня.

Answer 15

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

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

Используя require.js плагин "text" (текст), с многострочным шаблоном в template.html

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

НПМ/browserify:модуль "brfs"

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

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

Легко.

Answer 16

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

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

Answer 18

Мой добавочный номер к 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();

Answer 19

Эквивалентом в javascript является:

var text = `
This
Is
A
Multiline
String
`;

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

Answer 20

Вы можете использовать Машинописный текст (надмножество JavaScript), он поддерживает многострочные строки и переходит обратно на чистый 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)

и вы можете использовать многострочный объект string из простого варианта JavaScript, где вы помещаете шаблоны в другой файл (который вы можете объединить в пакет).

Вы можете попробовать TypeScript по адресу
http://www.typescriptlang.org/Playground

Answer 21

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

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

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

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

Answer 22

Самый простой способ создать многострочные строки в Javascripts - это использовать backticks ( ` ).Это позволяет вам создавать многострочные строки, в которые вы можете вставлять переменные с ${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 docs здесь

Answer 23

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

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

Answer 24

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

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

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

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

console.log(hello);

Answer 25

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

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

Answer 26

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

Пример:

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

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

Answer 28

Способ ES6 сделать это - использовать шаблонные литералы:

const str = `This 

is 

a

multiline text`; 

console.log(str);

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

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

Ваше здоровье!!

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

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