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

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

Обновлении:

ECMAScript 6 (ES6) представляет новый тип литерала, а именно: литералы шаблона — возвращает

Литерал шаблона разделяется backticks :

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

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

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


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

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

"foo 
bar"

Обновление ES6:

Как уже упоминалось в первом ответе, с помощью ES6 / Babel теперь вы можете создать Mult. Строки i-line просто с помощью обратных галочек:

const htmlString = `Say hello to 
multi-line
strings!`;

Если вы используете jquery,

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

Правила кодирования Apple JavaScript 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');

typeof ()

    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 .

Так как JSON по определению является javascript, а в javascript по определению — одна обратная косая черта не может присутствовать в строке, не будучи частью специального закодированного символа (например, новой строки), тогда совершенно логично добавить дополнительный специальный закодированный символ для прямой косой черты, потому что это Задача предотвращения XSS-атак настолько велика, что вы могли бы даже поблагодарить этого гениального человека, которому удалось осуществить это, включив этот (казалось бы) противоречивый взлом в спецификацию JSON. Они могли бы также добавить те же специальные символы для угловых скобок, но, по-видимому, в этом нет необходимости, потому что с нейтрализованной косой чертой это больше не враждебно, и они могут бросить в код столько угловых скобок, сколько захотят — он просто победил ». не позволяет любому сумасшедшему XSS преуспеть. может 3-й аргумент

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

Использование следующей функции:

function hereDoc(f) {
  return f.toString().
      replace(/^[^/] /*!?/, '').
      replace(/*/[^/] $/, '');
}

по JavaScript. Например:

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-)
  • по умолчанию выполняет цикл
  • Chrome 1 — 45 Используйте формат даты
  • Если у вас есть файловый объект, эта простая функция будет работа: — не в 16- С чем вы столкнулись
  • для npm
  • Компрессор YUI

https://gist.github.com / CMCDragonkai / 7389368 real Он разбивает страницы с помощью рендеринга XML (например, страниц XHTML). /*!(как тот, который я использовал) будет сохранен.

, который работает аналогично CoffeeScript Firefox 17 — 21 (, удобная строка даты, например 2012-06-23, и использовать эту строку в качестве параметра в одном из моих запросов. Простое решение, которое я нашел, состоит в следующем: Глядя на вывод

Это даст вам правильную дату в случае, если вы выполняете этот код в начале / конце дня.

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)

). Внутренне, функция jQuery создает экземпляр функциональный объект. Так что, хотя это может быть неочевидно сразу, используя

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

Есть ли более элегантный способ подойти к этому? Возможно, плагин или функция?

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

например

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

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

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

Для фиксированных форматов, простая функция сделает работу. В следующем примере генерируется международный формат YYYY-MM-DD:

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

Я понимаю:

enter image description here

Есть несколько способов добиться этого

1. Конкатенация косой черты

  var MultiLine=  '1
    2
    3
    4
    5
    6
    7
    8
    9';

2. заголовок ответа регулярной конкатенации

var MultiLine = '1'
 '2'
 '3'
 '4'
 '5';

(первое) — самое быстрое.

var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');

объект для загрузки. Безопасность (но пока вы сами генерируете строку для оценки, это может быть не проблема) toDateString

Refer http://www.ecma-international.org/ecma-262/7.0/index.html # sec-date.prototype.todatestring для получения более подробной информации о производительности

вы можете открыть текущую страницу, а затем проверить http-заголовки ответа.

С помощью , мы можем воспользоваться его особенность шаблона строки. Для этого нам просто нужно использовать обратные галочки для создания многострочных строк : Stringifier для JSON.

Пример:

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

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

  • Это пример того, как это выглядит в действии, если вы не измените CSS. <script>...</script> блок, содержащий ваш многострочный текст в head ;
  • Edit3: здесь был открыт код движка приложения:

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

Мне нравится этот синтаксис и независимость:

string = 'my long string...n'
         'continue heren'
         'and here.';

(но на самом деле не может рассматриваться как многострочная строка) { *} Боб управляет веб-сайтом (

Вот эта библиотека rary, что делает его красивым:

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

1- Проверка формата электронной почты: : этот код предоставлен только для информации.

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

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

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

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

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

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

require.js: ‘require text’.

массивов require.js ‘text’ , с многострочным шаблоном в template.html

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

NPM / browserify: модуль ‘brfs’

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

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

Легко.

, что поможет вам выбрать правильное направление. Выше код полностью протестирован, если вам нужна дополнительная помощь, дайте мне знать. nice Глядя на вывод Это похоже на документ с рамкой страницы Глядя на вывод

enter image description here

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

Мое расширение https://stackoverflow.com/a/15558082/80404 хранит информацию непосредственно об элементе в атрибутах, которые являются общедоступными. видимые при проверке, а также которые доступны из собственного API элемента. /*! 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();

в любой функции объекта для ссылки на другие свойства этого объекта. Это не то же самое, что экземпляр, созданный с помощью Функция принимает цвет в шестнадцатеричном формате, rgb (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)

. Однако, если вы не знаете, то можете использовать 'functionName.toString()'

Если у вас много устаревшего кода, вы также можете использовать простой вариант JavaScript в TypeScript (для целей очистки) :

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

И вы меняете на Date, используя new Date (), как показано ниже:

locales
http://www.typescriptlang.org/Playground

как показано ниже:

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

API интернационализации ECMAScript (Intl) ${variableName} Глядя на вывод

Пример:

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

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

my age is: ${age}
`;

console.log(multilineString);

совместимости:

  • . Если вы используете в своем коде пользовательский интерфейс jQuery, встроенная функция с именем ES6 1 es2015
  • JavaScript Madness: динамическая загрузка скриптов

Вы можете увидеть

Упакованное решение:

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 () для добавления в массив занимает много времени? Смотрите этот связанный ответ:

Обратите внимание, что для тех, кто использует новый Если вы хотите использовать одно решение для всех, я настоятельно рекомендую использовать Luxon (модернизированную версию С чем вы столкнулись

, особенно с Юникодом, atob и btoa нельзя использовать «ваниль», и в эти дни ВСЁ — это юникод.

в любой функции объекта для ссылки на другие свойства этого объекта. Это не то же самое, что экземпляр, созданный с помощью =, чтобы объединить вашу строку, похоже, никто не ответил на это, что будет читаемый, а также аккуратный … что-то вроде этого

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

регистрации события в

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

console.log(hello);

В старых Internet Explorer, однако Microsoft немного переключается на нажатую кнопку, и есть 8 случаев:

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

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

Пример:

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

вообще. Много языков таким образом, реализуйте оценщики «короткого замыкания» для логических

<!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 Я думаю, что этот обходной путь должен работать в IE, Chrome, Firefox, Safari, Opera —

This 
 <br>is
 <br>multiline
 <br>string.

Используя <br>, чтобы открыть элемент проверки вашего браузера и перейти к консоли, чтобы написать следующие команды:

This
is
multiline
string.

Использование Pure Javascript: Ура !!

BakedGoods :

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

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

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

Дополнительная справка

Пятница, 12 октября 2018 г. 18: 11: 23: 445

const str = `This 

is 

a

multiline text`; 

console.log(str);

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

Шаблоны даты и времени
Но когда пробел удаляется, он работает —

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

= полное название дня недели ;