Создание многострочных строк в JavaScript - PullRequest
Новая
       224

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

2266 голосов
/ 30 апреля 2009

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

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

Ответы [ 36 ]

2798 голосов
/ 30 апреля 2009

Обновление:

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

Литерал шаблона отделяется обратными чертами : 

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

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

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

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

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

"foo \
bar"
1220 голосов
/ 06 июня 2011

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:

Руководство по стилю Google в 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.';
659 голосов
/ 30 апреля 2009

шаблон 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

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 Примечание: это будет потеряно после минимизации / обфускации вашего кода

337 голосов
/ 06 апреля 2011

Вы можете иметь многострочные строки в чистом 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

Будьте осторожны с миниатором, хотя. Это имеет тенденцию удалять комментарии. Для YUI компрессора комментарий, начинающийся с /*! (как и тот, который я использовал), будет сохранен.

Я думаю, реальным решением было бы использовать CoffeeScript .

194 голосов
/ 30 апреля 2009

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

var string = 'This is\n' +
'a multiline\n' + 
'string';
133 голосов
/ 22 марта 2013

Я придумал этот очень фальсифицированный метод многослойной струны. Поскольку преобразование функции в строку также возвращает любые комментарии внутри функции, вы можете использовать комментарии в качестве строки, используя многострочный комментарий / ** /. Вы просто должны обрезать концы, и у вас есть строка. 

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)
88 голосов
/ 03 января 2012

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

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

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

50 голосов
/ 17 августа 2012

Я решил эту проблему, выведя 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

27 голосов
/ 23 августа 2012

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

  • добавить блок <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 голосов
/ 26 мая 2014

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

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>
  `
Страница:
...