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

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

text = <<"HERE"
This
Is
A
Multiline
String
HERE
1981
задан 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
ответ дан 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
ответ дан 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
ответ дан 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
ответ дан 06 апр. '11 в 21:16
источник

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

var string = 'This is\n' +
'a multiline\n' + 
'string';
186
ответ дан 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
ответ дан 22 марта '13 в 0:05
источник

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

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

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

82
ответ дан 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
ответ дан 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
ответ дан 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
ответ дан 26 мая '14 в 12:34
источник

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

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

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

24
ответ дан 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
ответ дан 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
ответ дан 17 февр. '13 в 12:56
источник

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

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

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

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

10
ответ дан 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
ответ дан 10 февр. '14 в 14:13
источник

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

enter image description here

8
ответ дан 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
ответ дан 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
ответ дан 21 сент. '15 в 18:23
источник

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

var text = `
This
Is
A
Multiline
String
`;

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

7
ответ дан 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
ответ дан 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
ответ дан 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
ответ дан 09 сент. '18 в 14:00
источник

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

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

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

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

console.log(hello);
3
ответ дан 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
ответ дан 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
ответ дан 12 окт. '17 в 2:28
источник

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

var string = "line1\  // comment, space or tabs here raise error
line2";
3
ответ дан 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
ответ дан 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
ответ дан 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
ответ дан 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
ответ дан 23 нояб. '12 в 16:10
источник
  • 1
  • 2

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