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

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

text = <<"HERE"
This
Is
A
Multiline
String
HERE
1981
задан Newy 30 апр. '09 в 5:11
источник поделиться
36 ответов
  • 1
  • 2

Обновить:

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

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

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

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

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


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

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

"foo \
bar"
2401
ответ дан Anonymous 30 апр. '09 в 5:15
источник поделиться

Обновление 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 в 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.';
1138
ответ дан Devin G Rhode 06 июня '11 в 5:30
источник поделиться

шаблон 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>';

Вот еще один странный, но рабочий "трюк" 1:

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

1 Примечание: это будет потеряно после сведения/обфускации кода

637
ответ дан KooiInc 30 апр. '09 в 10:22
источник поделиться

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

329
ответ дан Jordão 06 апр. '11 в 21:16
источник поделиться

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

var string = 'This is\n' +
'a multiline\n' + 
'string';
186
ответ дан alex 30 апр. '09 в 5:13
источник поделиться

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

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)
107
ответ дан Luke 22 марта '13 в 0:05
источник поделиться

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

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

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

82
ответ дан Peter V. Mørch 03 янв. '12 в 22:51
источник поделиться

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

например.

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

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

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

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

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

Я получаю:

enter image description here

46
ответ дан Tom Beech 17 авг. '12 в 17:25
источник поделиться

Использование тегов 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>
    
27
ответ дан jpfreire 23 авг. '12 в 21:30
источник поделиться

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

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>
  `
26
ответ дан Vignesh Subramanian 26 мая '14 в 12:34
источник поделиться

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

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

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

24
ответ дан semente 13 дек. '11 в 23:09
источник поделиться

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

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>
*/});
17
ответ дан mightyiam 25 апр. '14 в 14:34
источник поделиться

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'));
13
ответ дан mplungjan 17 февр. '13 в 12:56
источник поделиться

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

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

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

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

10
ответ дан Tyler 20 мая '11 в 16:10
источник поделиться

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

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

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

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

NPM/браузер: модуль 'brfs'

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

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

Легко.

8
ответ дан mikemaccana 10 февр. '14 в 14:13
источник поделиться

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

enter image description here

8
ответ дан seo 28 апр. '15 в 21:31
источник поделиться

Это работает в 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>
7
ответ дан stillatmycomputer 23 нояб. '10 в 19:46
источник поделиться

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

7
ответ дан Stefan Steiger 21 сент. '15 в 18:23
источник поделиться

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

var text = `
This
Is
A
Multiline
String
`;

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

7
ответ дан Lonnie Best 04 нояб. '15 в 16:59
источник поделиться

Мое расширение qaru.site/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();
7
ответ дан pocheptsov 11 дек. '13 в 20:30
источник поделиться

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

5
ответ дан earl3s 28 марта '16 в 21:43
источник поделиться

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

3
ответ дан Willem van der Veen 09 сент. '18 в 14:00
источник поделиться

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

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

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

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

console.log(hello);
3
ответ дан Mr. Alien 18 янв. '14 в 16:18
источник поделиться

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

3
ответ дан KTys 14 окт. '13 в 3:58
источник поделиться

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

Пример:

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

3
ответ дан Pragmatiq 12 окт. '17 в 2:28
источник поделиться

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

var string = "line1\  // comment, space or tabs here raise error
line2";
3
ответ дан Prakash GPz 13 июля '16 в 22:25
источник поделиться

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

<!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.
2
ответ дан Sonevol 14 авг. '17 в 1:57
источник поделиться

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

Ура!!

1
ответ дан Aditya Hajare 28 янв. '13 в 15:20
источник поделиться

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

var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
  if (err) {
    throw err; 
  }
  diagram = data.toString();
});
0
ответ дан Charles Brandt 09 сент. '14 в 3:02
источник поделиться

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

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

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

0
ответ дан Anmol Saraf 23 нояб. '12 в 16:10
источник поделиться
  • 1
  • 2

Другие вопросы по меткам или Задайте вопрос