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


2614

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

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


Проверьте это по-разному, чтобы достичь того же. Я добавил производительность каждого метода тоже stackoverflow.com/a/23867090/848841
Vignesh Subramanian

Ответы:


3321

Обновить:

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

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

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

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

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


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

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

"foo \
bar"

231
Будьте осторожны: некоторые браузеры будут вставлять переводы строк, а некоторые нет.
staticsan

35
Visual Studio 2010, похоже, смущен и этим синтаксисом.
Jcollum

47
@Nate Это указано в разделе 7.8.4 5-го издания ECMA-262 и называется LineContinuation : « Символ конца строки не может появляться в строковом литерале , кроме как как часть LineContinuation для создания пустой последовательности символов. Правильный способ вызвать Символ конца строки, который должен быть частью значения String строкового литерала, должен использовать escape-последовательность, такую ​​как \ n или \ u000A. "
некоторые

16
Я не понимаю, почему вы делаете это, когда браузеры обрабатывают это непоследовательно. "line1 \ n" + "line2" на нескольких строках достаточно читабелен, и вам гарантировано согласованное поведение.
SamStephens

11
«Поддержка браузера в порядке» ... не поддерживается IE11 - не в порядке
Tom Andraszek

1318

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

19
Я не понимаю рекомендации Google. Все браузеры, кроме очень старых, поддерживают обратную косую черту с последующим подходом новой строки и будут продолжать делать это в будущем для обратной совместимости. Единственный раз, когда вам нужно этого избегать, это если вам нужно быть уверенным, что в конце каждой строки был добавлен только один и только один символ новой строки (или нет символа новой строки) (см. Также мой комментарий к принятому ответу).
Мэтт Браун

6
Обратите внимание, что строки шаблонов не поддерживаются в IE11, Firefox 31, Chrome 35 или Safari 7. См. Kangax.github.io/compat-table/es6
EricP

29
@MattBrowne Рекомендации Google уже задокументированы ими, в порядке важности причин: (1) Пробел в начале каждой строки [в примере, вам не нужен этот пробел в вашей строке, но он выглядит лучше в коде ] (2) пробел после косой черты приведет к хитрым ошибкам [если вы заканчиваете строку с помощью \ `\`, это трудно заметить] и (3) хотя большинство скриптовых движков поддерживают это, это не является частью ECMAScript [т.е. почему использовать нестандартные функции?] Помните, что это руководство по стилю, которое делает код легким для чтения + сопровождения + отладки, а не просто «все работает» правильно.
ShreevatsaR

1
Удивительно, что после всех этих лет конкатенация строк по-прежнему остается лучшим / самым безопасным / наиболее совместимым способом. шаблонные литералы (ответ выше) не работают в IE, а экранирование строк - это просто беспорядок, о котором вы скоро пожалеете
Tiago Duarte

1
Узнайте, как старые версии Android не поддерживают обратные ссылки, поэтому, если у вас есть приложение Android, использующее webView, обратные ссылки приводят к тому, что ваше приложение не запускается!
Майкл Лихорадка

684

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

или анонимный шаблон, уже показанный (escape newline), который может быть уродливым блоком в вашем коде:

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


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

73
Шаблон массива более читабелен, а потеря производительности для приложения часто незначительна. Как показывает этот тест, даже IE7 может выполнять десятки тысяч операций в секунду.
Бенджамин Аткин

19
+1 за элегантную альтернативу, которая не только работает одинаково во всех браузерах, но и ориентирована на будущее.
Павел

26
@KooiInc Ваши тесты начинаются с уже созданного массива, который искажает результаты. Если добавить инициализацию массива, прямая конкатенация быстрее jsperf.com/string-concat-without-sringbuilder/7 См stackoverflow.com/questions/51185/... Как трюк для переноса строк, это может быть хорошо, но это, безусловно , делает больше работы, чем следовало
Хуан Мендес

9
@BMiner: 1) «Преждевременная оптимизация - корень всего зла» - Дональд Кнут, и 2) «удобочитаемость» в глазах смотрящего
Пол Беннетт

348

Вы можете иметь многострочные строки в чистом 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-)
  • Хром 1 - 45
  • Firefox 17 - 21 ( не в 16- )
  • Rekonq 0.7.0 - 0.8.0
  • Не поддерживается в Konqueror 4.7.4

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

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

ES6 ОБНОВЛЕНИЕ: Вы можете использовать backtick вместо создания функции с комментарием и запуска toString для комментария. Регулярное выражение должно быть обновлено, чтобы удалить только пробелы. Вы также можете иметь метод прототипа строки для этого:

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

Это было бы круто. Кто-то должен написать этот строковый метод .removeIndentation ...;)


232
Какая!? создать и декомпилировать функцию, чтобы взломать многострочный комментарий в многострочную строку? Теперь это безобразно.
16

4
jsfiddle.net/fqpwf работает в Chrome 13 и IE8 / 9, но не в FF6. Ненавижу это говорить, но мне это нравится, и если бы это могло быть преднамеренной функцией каждого браузера (чтобы он не исчезал), я бы использовал это.
Джейсон Клебан

2
@ uosɐſ: чтобы это было преднамеренно, это должно быть в спецификации; или настолько широко используется, что производители браузеров не захотят удалять эту «случайную» функцию. Спасибо за эксперименты, хотя ... Попробуйте немного кофе.
Джордан,

1
a.toString (). substring (15, a.toString (). length-4) также работает, и ему не нужно сканировать всю строку (хотя это, скорее всего, будет, а подсчет делает это еще одним сканированием в любом случае. .)
Lodewijk

2
Очень удобно. Я использую его для (Jasmine) модульных тестов, но избегаю его для производственного кода.
Джейсон

207

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

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

Первый пример отличный и простой. Гораздо лучше, чем \ подход, поскольку я не уверен, как браузер будет обрабатывать обратную косую черту как escape-символ и как многострочный символ.
Мэтт К


e4x.js было бы хорошим решением для будущего
Пол Свитт

139

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

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)

37
Это абсолютно ужасно. Мне это нравится (хотя вам, возможно, потребуется выполнить регулярное выражение, потому что я не уверен, насколько точен пробел для этого toString().
Кевин Кокс

Это решение, похоже, не работает в Firefox, может быть, это функция безопасности для браузера? РЕДАКТИРОВАТЬ: Неважно, это не работает только для Firefox версии 16.
Билл Software Engineer

45
Также остерегайтесь
минифайеров, которые отбрасывают

3
Вот почему у нас не может быть хороших вещей.
Данило М. Оливейра,

4
Вы можете делать некоторые странные вещи на земле javascript. Хотя, честно говоря, вы никогда не должны использовать это.
Люк

88

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

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

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


23
Везде, где вы не хотите помещать свои строки в отдельные и удаленные элементы скрипта.
Lodewijk

9
Действительное возражение! Это не идеально. Но для шаблонов такое разделение не только хорошо, но, возможно, даже поощряется.
Питер В. Мёрч

1
Я предпочитаю разбивать все более 80/120 символов на многострочные, боюсь, это больше, чем просто шаблоны. Теперь я предпочитаю синтаксис 'line1' + 'line2'. Это также самый быстрый (хотя это может конкурировать с действительно большими текстами). Это хороший трюк, хотя.
Lodewijk

27
на самом деле это HTML, а не Javascript: - /
CpILL

5
тем не менее, задача получения многострочной строки в javascript может быть выполнена таким образом
Дэви Фьяменги

52

Я решил эту проблему, выведя div, сделав его скрытым, и вызвав div id с помощью jQuery, когда мне это нужно.

например

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

Затем, когда мне нужно получить строку, я просто использую следующий jQuery:

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

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

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

Я получил:

введите описание изображения здесь


2
Спасибо за это! Это единственный ответ, который я нашел, который решает мою проблему, которая включает в себя неизвестные строки, которые могут содержать любую комбинацию одинарных и двойных кавычек, вставляемых непосредственно в код без возможности предварительного кодирования. (это исходит из языка шаблонов, который создает JS - все еще из надежного источника, а не отправки формы, так что это не ПОЛНОСТЬЮ безумно).
2013 года

Это был единственный метод, который действительно помог мне создать многострочную строковую переменную javascript из строки Java.
beginner_

4
Что если строка является HTML?
Дан Даскалеску

4
$ ('# UniqueID'). Content ()
mplungjan

1
@Pacerier Все, что я прочитал, как от Google, так и от других сайтов, говорит о том, что в настоящее время Google индексирует display:noneконтент, скорее всего, из-за популярности интерфейсов в стиле JavaScript. (Например, страница часто задаваемых вопросов с функцией скрытия / показа.) Вы должны быть осторожны, потому что Google говорит, что они могут наказать вас, если скрытый контент, похоже, предназначен для искусственного завышения вашего рейтинга SEO.
Гэвин

31

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

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

11
Я думаю, это то, что вы только что отрыгнули то, что уже есть на странице в течение пяти лет, но более чистым способом.
RandomInsano

не будет ли косая конкатенация также включать пробелы в начале строк?
ф.ханцис

29

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

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

Я думаю, что эта стратегия является чистой и недостаточно используемой. JSrender использует это.
xdhmoore

Я использую это с innerText iso innerHTML, но как мне убедиться, что пробелы сохраняются?
Дэвид Ноулс

Также ajax запрашивает, если вы их используете. Вы можете попытаться изменить свои заголовки. xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");Я не помню, чтобы у меня были другие проблемы, кроме неправильного ввода комментариев в JS. Пространства, где нет проблем.
jpfreire

24

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

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

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


3
Я использую это, за исключением того, что я поставил «+» в конце предыдущей строки, чтобы было ясно, что утверждение продолжается на следующей строке. Ваш путь выстраивает отступы более равномерно, хотя.
Шон

@Sean, я тоже этим пользуюсь, и все же предпочитаю ставить '+' в начале каждой новой добавленной строки и в конце ';' на новой линии, потому что я нашел это более «правильным».
AgelessEssence

7
положив + в начале, можно закомментировать эту строку без необходимости редактировать другие строки, когда это первая / последняя строка последовательности.
Молиада

3
Я также предпочитаю знак + на передней панели, так как визуально мне не нужно сканировать до конца строки, чтобы знать, что следующая является продолжением.
Даниэль Соколовский

18

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

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
Эта поддержка в nodejsиспользовании в браузере должна быть полезной.
Хуэй Тан

3
@HueiTan Документы утверждают, что он также работает в браузере. Что имеет смысл - это просто Function.prototype.String().
mikemaccana

да, но он сказал: «Хотя он отлично работает в браузере, он в основном предназначен для использования в Node.js. Используйте на свой страх и риск. Хотя он отлично работает в браузере, он в основном предназначен для использования в Node.js. Использование на свой страх и риск." (Просто будьте осторожны, XD)
Хуэй Тан

@HueiTanYep Я прочитал эту часть. Но Function.prototype.toString () довольно стабилен и хорошо известен.
mikemaccana

1
Лучший ответ для меня, потому что он по крайней мере достигает многострочного без всего мусора в середине (мусор в начале и в конце, с которым я могу иметь дело).
Дэмиен Голдинг

14

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


13
Это ужасно +1. И вы можете использовать document.currentScript вместо getElement ...
Orwellophile

1
Неопределенное «вы» в chrome для osx
mplungjan

1
jsfiddle-fixed - у меня должно быть глобально определено «ты» в моей консоли. Работает сейчас (chrome / osx). Хорошая вещь о добавлении комментария к var состоит в том, что вы не находитесь в контексте функции, jsfiddle-function-heredoc, хотя функция функции была бы классной для методов класса. в любом случае лучше передать ему объект замены {this: that}. В любом случае,
интересно доводить до безумия

1
Забудь ненавистников. Это единственный правильный ответ панели ES6. Все остальные ответы требуют объединения, каких-либо вычислений или экранирования. Это на самом деле довольно круто, и я собираюсь использовать его для добавления документации в игру, над которой я работаю в качестве хобби. Пока этот трюк не используется для чего-либо, что может вызвать ошибку (я вижу, как кто-то скажет: «Точка с запятой, сумасшедший. Позволяет поместить комментарий в следующую строку.», А затем он нарушает ваш код.) Но, есть это действительно большое дело в моей хобби? Нет, и я могу использовать крутой трюк для чего-то полезного. Отличный ответ.
Томас Диньян

2
Я никогда не был достаточно смелым, чтобы использовать эту технику в производственном коде, но где я действительно использую ее часто в модульном тестировании, где часто проще всего вывести значение какой-либо структуры в виде (довольно длинной) строки и сравнить ее с каким он должен быть.
Бен Макинтайр

10

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

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

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

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


Это мой первый актуальный комментарий. Я получил привилегию upvote 2 дня назад, так что я сразу же проголосовал за один ответ, который я упомянул выше. Спасибо всем, кто поддержал мою слабую попытку помочь.
Тайлер

Спасибо всем, кто фактически проголосовал за этот ответ: у меня теперь достаточно привилегий, чтобы оставлять нормальные комментарии! Так что спасибо еще раз.
Тайлер

10

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

9

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

require.js: 'требуют текст'.

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

Легко.


9

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

введите описание изображения здесь


2
Не добавит ли это посторонние пробелы?
TomByrer

1
@tomByrer Да, хорошее наблюдение. Это хорошо только для строк, которые вас не интересуют, например HTML.
SEO


8

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

6
Просто подумай об этом. Как вы думаете, это действительно? Вы не думаете, что это может вызвать проблемы с отображением?
Sk8erPeter

5
Почему отрицательные? Это креативный ответ, если не очень практичный!
dotancohen

2
нет, это не так. Лучше использовать шаблоны: $ .tmpl () ( api.jquery.com/tmpl ) или EJS ( embeddedjs.com/getting_started.html ) и т. Д. Одной из причин отрицательных голосов является то, что это действительно далеко от правильного кода и использования это может вызвать огромные проблемы с отображением.
Sk8erPeter

Я надеюсь, что никто никогда не использует этот ответ на практике, но это
хорошая

7

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


Любая документация об ограничении iPad / Safari? Кажется, MDN считает, что все хорошо - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Кэмпбелн

@Campbeln: CoWorker сказал мне об этом (он использовал код). Сам не проверял. Может также зависеть от версии для iPad / Safari - так что, вероятно, зависит.
Stefan Steiger

6

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

const str = `This 

is 

a

multiline text`; 

console.log(str);

Больше ссылки здесь


Этот ответ не только маленький, неполный и плохо отформатированный, но и не добавляет абсолютно ничего к предыдущим ответам. Отметить его и прыгать, чтобы быть удаленным.
Виктор Шредер

5

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


4

Самый простой способ создания многострочных строк в 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 можно узнать здесь


Это теперь совместимо со всеми последними браузерами? Или есть браузеры, которые еще не поддерживают этот синтаксис?
cmpreshn

Извините за мой крайний поздний комментарий, отредактировал ответ, добавил информацию о совместимости;)
Виллем ван дер Веен

3

Моя версия объединения на основе массива для строки 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 элементов - я буду избегать этого в пользу индексированных надстроек для больших массивов.


3

Вы можете использовать +=для объединения вашей строки, кажется, что никто не ответил на это, что будет читабельным, а также аккуратным ... что-то вроде этого

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

можно также записать как

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

console.log(hello);

3

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

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

3

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

Пример:

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


3
хотя я согласен с вашей точкой зрения, я бы не назвал javascript «хорошим» ol
user151496

2

Вы должны использовать оператор конкатенации '+'.

<!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>вашего браузера вывод будет выглядеть так:

Эта
является
многострочный
строка.

1

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

Ура !!


<xmp>так устарела. Это может быть разрешено в HTML, но не должно использоваться любыми авторами. См. Stackoverflow.com/questions/8307846/…
Bergi

@ Bergi, вы правы ... и использование <pre>;с escape-символами не поможет в моем решении ... Сегодня я столкнулся с подобной проблемой и пытался найти обходной путь ... но в моем случае я нашел один очень хороший способ исправить эту проблему путем: положить вывод в html-комментариях вместо <xmp> или любого другого тега. лол. Я знаю, что это не стандартный способ сделать это, но я буду работать над этим вопросом больше завтра утром .. Ура!
Адитья Хаджаре

К сожалению, даже с style="display:none"Chrome пытается загрузить любые <img>изображения, упомянутые в примере блока.
Джесси Глик

0

Просто попробовал анонимный ответ и обнаружил, что здесь есть небольшая хитрость, она не работает, если после обратной косой черты есть пробел, \
поэтому следующее решение не работает:

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

Надеюсь, поможет !!


7
хорошо, если после обратной косой черты есть пробел, обратная косая черта выходит за пределы пробела. Предполагается избежать разрыва строки, а не космоса.
Сеянус
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.