Создание многострочных строк в JavaScript - PullRequest
2266 голосов
/ 30 апреля 2009

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

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

Ответы [ 36 ]

24 голосов
/ 14 декабря 2011

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

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

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

17 голосов
/ 25 апреля 2014

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

https://github.com/sindresorhus/multiline

До

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>❤ unicorns</h1>' +
'   </body>' +
'</html>' +
'';

* После 1009 * var str = multiline(function(){/* <!doctype html> <html> <body> <h1>❤ unicorns</h1> </body> </html> */});

13 голосов
/ 17 февраля 2013

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'));
10 голосов
/ 20 мая 2011

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

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

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

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

9 голосов
/ 10 февраля 2014

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

require.js: 'require text'.

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

Easy.

9 голосов
/ 28 апреля 2015

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

enter image description here

8 голосов
/ 23 ноября 2010

Это работает в 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>
8 голосов
/ 04 ноября 2015

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

var text = `
This
Is
A
Multiline
String
`;

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

8 голосов
/ 11 декабря 2013

Мое расширение до 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();
7 голосов
/ 21 сентября 2015

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

...