Створення багаторядкових рядків у JavaScript

У мене в Ruby є такий код. Я хочу перетворити цей код у JavaScript. який еквівалентний код у JS?

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

Оновлення:

ECMAScript 6 (ES6) вводить новий тип літералу, а саме літералі шаблону . Вони мають багато особливостей, змінну інтерполяцію серед інших, але найголовніше для цього питання вони можуть бути багатолінійними.

Буквал шаблону розмежовано за допомогою зворотних посилань :

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

(Примітка. Я не виступаю за використання HTML в рядках)

Підтримка веб-переглядача нормально , але ви можете використовувати транспілятори, щоб бути більш сумісними.

Оригінальна відповідь ES5:

У JavaScript немає синтаксису тут-документа. Однак ви можете уникнути буквального нового рядка, який наближається:

"foo \
bar"

Оновлення 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.';

візерунок 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');

або анонімний шаблон вже показаний (рядок нового рядка), який може бути некрасивим блоком у вашому коді:

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

¹ Примітка: це буде втрачено після мінімізації / оскарження вашого коду

Ви можете мати багаторядкові рядки в чистому 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
• Опера 9.50 - 12 (не в 9-)
• Сафарі 4 - 6 (не в 3-)
• Хром 1 - 45
• Firefox 17 - 21 ( не в 16- )
• Rekonq 0.7.0 - 0.8.0
• Не підтримується в Konqueror 4.7.4

Але будьте обережні зі своїм мініфікатором. Він, як правило, видаляє коментарі. Для компресора YUI коментар, що починається з /*!(як той, який я використав), буде збережений.

Я думаю, що справжнім рішенням було б використання CoffeeScript .

ОНОВЛЕННЯ ES6: Ви можете використовувати backtick замість створення функції з коментарем та запуску доString на коментарі. Регекс потрібно буде оновити лише до пробілів. Для цього також може бути метод рядкового прототипу:

let foo = `
  bar loves cake
  baz loves beer
  beer loves people
`.removeIndentation()

Це було б круто. Хтось повинен написати цей .removeIndentation метод рядка ...;)

Ви можете це зробити ...

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

Я придумав цей дуже джіммі сфальсифікований метод багаторядкової струни. Оскільки перетворення функції в рядок також повертає будь-які коментарі всередині функції, ви можете використовувати коментарі як рядок за допомогою багатомовного коментаря / ** /. Вам просто потрібно обрізати кінці і у вас є струна.

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)

Я здивований, що цього не бачив, оскільки він працює скрізь, де я його перевірив, і дуже корисний, наприклад, для шаблонів:

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

Хтось знає про середовище, де є HTML, але він не працює?

Я вирішив це, випустивши div, зробивши його прихованим і зателефонувавши до ідентифікатора div jQuery, коли мені це було потрібно.

напр

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

Тоді, коли мені потрібно отримати рядок, я просто використовую такий jQuery:

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

Що повертає мій текст у декількох рядках. Якщо я зателефоную

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

Я отримав:

Існує кілька способів досягти цього

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('');

Виконання продуктивності, Slash об'єднання (перша) є найшвидшим.

Детальнішу інформацію щодо продуктивності див. У цьому тестовому випадку

Оновлення:

За допомогою ES2015 ми можемо скористатися його функцією рядків шаблонів. З його допомогою нам просто потрібно використовувати зворотні тики для створення багаторядкових рядків

Приклад:

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

Використання тегів сценарію:

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

Мені подобається цей синтаксис і відступ:

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

(але насправді не можна розглядати як багаторядковий рядок)

Є ця бібліотека, яка робить її красивою:

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

Корота : Цей код надається лише для інформації.

Це було перевірено на 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> ago
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
document.querySelector("ul").innerHTML=new_comment.replace('$text','This is a dynamically created text');

<ul></ul>

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

• ця не спрацювала: Створення багаторядкових рядків у JavaScript
• це спрацювало досить добре, я також з’ясував, як зробити так, щоб це виглядало добре в режимі перегляду джерел Notepad ++: Створення рядків у JavaScript

Тому я рекомендую працюючий підхід для користувачів JS користувача Opera. На відміну від того, що говорив автор:

Це не працює на Firefox або Opera; тільки на IE, хром і сафарі.

Він працює в Opera 11. Принаймні в сценаріях користувачів JS. Шкода, що я не можу коментувати індивідуальні відповіді чи підтверджувати відповідь, я б це зробив негайно. Якщо можливо, хтось із вищими привілеями, будь ласка, зробіть це для мене.

Моє розширення на 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();

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

Requ.js: 'вимагати текст'.

Використовуючи плагін "text" requ.js з багаторівневим шаблоном у template.html

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

NPM / перегляньте: модуль 'brfs'

Browrify використовує модуль 'brfs' для завантаження текстових файлів. Це фактично вбудує ваш шаблон у ваш пакетний HTML.

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

Легко.

Якщо ви готові скористатися новими рядками, що вийшли, їх можна буде використовувати чудово . Він схожий на документ із рамкою сторінки .

Еквівалент у javascript:

var text = `
This
Is
A
Multiline
String
`;

Ось специфікація . Дивіться підтримку браузера внизу цієї сторінки . Ось також кілька прикладів .

Це працює в 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>

Ви можете використовувати 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

Спосіб ES6 зробити це можна за допомогою літеральних шаблонів:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Більше довідки тут

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

Найпростіший спосіб зробити багаторядкові рядки в 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 тут

Моя версія з'єднання на основі масиву для рядка 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 елементів - я уникаю цього на користь індексованих додавань для більших масивів.

Ви можете використовувати +=для об'єднання рядків, схоже, ніхто не відповів, що буде читабельним, а також акуратним ... щось подібне

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

можна також записати як

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

console.log(hello);

Також зауважте, що при розширенні рядка по декількох рядках із застосуванням прямої косої риски в кінці кожного рядка будь-які додаткові символи (переважно пробіли, вкладки та коментарі, додані помилково) після зворотної косої риски спричинить несподівану помилку символу, на що мені знадобилася година, щоб знайти з

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вашого вихідного коду буде виглядати так:

Це 
 <br> є
 <br> багаторядковий
 <br> рядок.

За допомогою <br>браузера вихід буде виглядати так:

Це
є
багаторядковий
рядок.

Я думаю, що це рішення має працювати в 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>

Ура !!

Просто спробував відповідь "Анонімний" і виявив, що тут є невелика хитрість, вона не спрацьовує, якщо після зворотної косої риби є пробіл. \
Отже, наступне рішення не працює -

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

Сподіваюся, це допомагає !!