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


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

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

1924
2018-04-30 02:11


походження


Побачити stackoverflow.com/a/6247331/632951 - Pacerier
Перевірте це, використовуючи різні способи досягнення цього. Я також додав ефективність кожного методу stackoverflow.com/a/23867090/848841 - Vignesh Subramanian


Відповіді:


Оновлення:

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

Буквальний шаблон розділений на заставки:

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

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

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


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

Javascript не має синтаксису here-document. Ви можете уникнути буквального нового рядка, однак, що наближається:

"foo \
bar"

2303
2018-04-30 02:15



Будьте обережні: деякі веб-переглядачі будуть вставляти нові рядки безперервно, деякі не будуть. - staticsan
Схоже, що Visual Studio 2010 заплутаний і цим синтаксисом. - jcollum
dresende: це дві рядки коду. Це єдиний вираз. - Anonymous
@Nate Вказано в ECMA-262 5th Edition розділ 7.8.4 і викликається Linecontinuation : "Символ термінатора лінії не може відображатися в буквальному рядку рядків, крім як частини a Linecontinuation для отримання порожньої послідовності символів. Правильний спосіб викликати, що символ лінійного термінатора є частиною значення String буквенного ряду, - це використання ескізи, такі як \ n або \ u000A. " - some
Я не розумію, чому б ви це робили, коли веб-переглядачі ставляться до неї непослідовно. "line1 \ n" + "line2" в декількох рядках достатньо для читання, і ви гарантуєте постійну поведінку. - SamStephens


Оновлення:

Як згадує перша відповідь, за допомогою 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.';

1120
2018-06-06 02:30



це не працює для мене в charn for canary for windows навіть після ввімкнення експериментального JavaScript - Inuart
Я не розумію рекомендації Google. Усі веб-переглядачі, за винятком надзвичайно старих, підтримують зворотну скісну смугу, а потім - нову лінію, і надалі будуть робити це для подальшої сумісності. Єдиний раз, коли вам потрібно уникнути цього, вам слід переконатися, що в кінці кожного рядка було додано один і тільки один новий рядок (або не було нової лінії) (див. Також мій коментар до прийнятої відповіді). - Matt Browne
Ті, хто хоче спробувати ці продукти, обов'язково перевірте [Chrome Canary] [1] [1]: google.com/intl/en/chrome/browser/canary.html - Sazid
Зауважте, що рядки шаблонів не підтримуються в IE11, Firefox 31, Chrome 35 або Safari 7. Див kangax.github.io/compat-table/es6 - Dwayne
@MattBrowne Рекомендація Google вже задокументована ними, в порядку важливості причин: (1) пробіл у початку кожного рядка [у прикладі ви не хочете, щоб пробіл у вашому рядку, але це виглядає краще в коді ] (2) пробіл після косу риски призведе до складних помилок [якщо ви закінчите рядок з \  замість `\ 'це важко помітити) і (3), хоча більшість движків скриптів підтримують це, це не є частиною ECMAScript [тобто. чому користуєтеся нестандартними функціями?] Пам'ятайте, що це стиль керівництва, який полягає в тому, щоб полегшити читання коду + підтримувати + налагоджувати: це не просто "працює" правильно. - ShreevatsaR


малюнок 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>';

Ось ще одна дивна, але робоча "трюк"1:

var myString = (function () {/*
   <div id="someId">
     some content<br />
     <a href="#someRef">someRefTxt</a>
    </div>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

зовнішнє редагування: jsfiddle

[Додаток 2015]
ES6 підтримує прокрутку рядків за допомогою декількох рядків шаблонні рядки:

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 Примітка. Це буде втрачено після того, як ви видалите / заплутуєте ваш код


634
2018-04-30 07:22



Не використовуйте шаблон масиву. У більшості випадків це буде повільніше, ніж звичайна стадія конкатенації. - BMiner
Дійсно? jsperf.com/join-concat/24 - KooiInc
Матричний малюнок є більш читабельним, а втрата продуктивності для програми часто незначна. Як показує цей аналіз, навіть IE7 може виконувати десятки тисяч операцій в секунду. - Ben Atkin
+1 для елегантної альтернативи, яка не тільки працює однаково в усіх браузерах, але також є надійною у майбутньому. - Pavel
@KooiInc Ваші тести починаються з уже створеного масиву, який нахиляє результати. Якщо ви додаєте ініціалізацію масиву, пряма конкатенація швидше jsperf.com/string-concat-without-sringbuilder/7 Побачити stackoverflow.com/questions/51185/... Як трюк для нових рядків, це може бути добре, але це, безумовно, робить більше роботи, ніж це потрібно - Juan Mendes


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

Будьте обережні з вашим minifier, хоч. Вона має тенденцію видаляти коментарі. Для Компресор YUI, коментар, починаючи з /*!(як і той, який я використовував) буде збережено.

Я думаю a реальний Рішення буде використовувати CoffeeScript.


327
2018-04-06 18:16



+ 1 + 1 розумний! (працює в Node.JS) - George Bailey
Що!? Створення та декомпіляція функції, щоб зламати багаторядковий коментар у тому, що це багаторядковий рядок? Зараз це все потворний. - fforw
Це насправді далі потворний ... Хоча нічого немає декомпіляція участь ... - Jordão
jsfiddle.net/fqpwf працює в Chrome 13 і IE8 / 9, але не в FF6. Я ненавиджу це сказати, але мені це подобається, і якщо це може бути навмисною особливістю кожного веб-переглядача (щоб вона не зникала), я б її використала. - Jason Kleban
Надзвичайно зручно. Я використовую його для (Jasmine) одиничних тестів, але уникаючи його для виробничого коду. - Jason


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

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

187
2018-03-21 21:05



Перший приклад чудовий і простий. Набагато краще, ніж \ підхід, тому що я не впевнений, як браузер буде обробляти зворотну косу риску в якості рятувальної символів і як багаторядковий символ. - Matt K
Код CDATA (E4X) - це застаріла і незабаром перестане працювати навіть у Firefox. - Brock Adams
e4x.js буде гарним майбутнім рішенням - Paul Sweatte


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

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
2018-01-03 19:51



Це абсолютно жахливо. Я люблю це (хоча вам може знадобитися зробити повторення регулярного виразу, тому що я не впевнений, наскільки точні пробіли для toString() є - Kevin Cox
stackoverflow.com/a/5571069/499214 - John Dvorak
Це рішення, здається, не працює в Firefox, може це функція безпеки для браузера? EDIT: не пам'ятайте, це не працює лише для Firefox версії 16. - Bill
Також будьте обережні з мініфайлами, які стрибають коментарі ... D: - jondavidjohn
@ KevinCox ви могли б використовувати trim(). - schmijos


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

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

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


82
2017-08-17 14:25



У будь-якому місці, де ви не хочете поміщати свої рядки в окремі та віддалені елементи сценарію. - Lodewijk
Дійсне заперечення! Це не ідеально. Але для шаблонів це розділення не тільки добре, але, можливо, навіть заохочується. - Peter V. Mørch
Я вважаю за краще розбити все, що перевищує 80/120 символів, у багаторядкові, боюся, що це більше, ніж просто шаблони. Я зараз віддаю перевагу синтаксису 'line1' + 'line2'. Це також найшвидший (хоча це може конкурувати за дійсно великі тексти). Це хороший трюк, хоча. - Lodewijk
власне, це HTML не Javascript: - / - CpILL
однак, завдання отримати багаторядковий рядок в javascript можна зробити таким чином - Davi Fiamenghi


Я вирішив це, видавши div, приховавши його, і зателефонувавши на id-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
2017-08-23 18:30



Дякую за це! Це єдина відповідь, яку я виявив, що вирішує мою проблему, яка включає в себе невідомі рядки, які можуть містити будь-яку комбінацію одиночних та подвійних лапок, які безпосередньо вставляються в код без можливості попереднього кодування. (це відбувається з мови шаблонів, який створює JS - все ще з надійного джерела, а не форми подання, так що це не ДУЖЕ СМЕРТІ). - octern
Це був єдиний метод, який насправді працював для створення багаторядкової рядкової змінної javascript з Java String. - beginner_
Що робити, якщо рядок HTML? - Dan Dascalescu
$ ('# UniqueID'). Content () - mplungjan
@Pacerier Усе, що я читав з Google та інших сайтів, каже, що в даний час Google індексує display:none контент, швидше за все, через популярність інтерфейсів стилів JavaScript. (Наприклад, сторінка з частотою показів із функціями hide / show). Однак ви повинні бути обережними, оскільки Google каже, що вони можуть покарати вас, якщо прихований вміст, як видається, розроблений, щоб штучно завищити ваші рейтинги SEO. - Gavin


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

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

27
2018-05-26 09:34



Я думаю, ця стратегія є чистою та набагато недостатньою. jsrender використовує це. - xdhmoore
Я використовую це з innerText iso innerHTML, але як я можу переконатися, що пробіли зберігаються? - David Nouls
Оскільки мило в основі XML, воно повинно зберігатись <![CDATA[.....]]> . - jpfreire
Також ajax запити, якщо ви використовуєте їх. Ви можете спробувати змінити заголовки xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); Я не пам'ятаю інших проблем, ніж помилкові коментарі в JS. Простори, де немає проблем. - jpfreire


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

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

Продуктивність мудрим Конкатенація слэша (перший) є найшвидшим.

Зверніться  цей тестовий випадок для більш детальної інформації про продуктивність

Оновлення:

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

Приклад:

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

25
2017-12-13 20:09



Я думаю, це те, що ви тільки що випрямили те, що вже було на сторінці протягом п'яти років, але чистішим способом. - RandomInsano
не перетягує конкатенацію, також включати пробіл у початок рядків? - f.khantsis