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

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

text = <<"HERE"
This
Is
A
Multiline
String
HERE
Источник

43 ответа

Решение

Обновить:

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:

Руководство по стилю 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.';
Источник

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

Источник

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

Источник

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

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 id с помощью 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>
Источник

Простой способ печатать многострочные строки в JavaScript — использовать литералы шаблонов (строки шаблонов), обозначаемые обратными кавычками (` `). вы также можете использовать переменные внутри строкового шаблона (` name is ${value}`)

Вы также можете

Источник

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

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

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

Источник

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>
    </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'));
Источник

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

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:

       let str = `Multiline string.
            foo.
            bar.`

который в конечном итоге регистрирует:

      Multiline string.
           foo.
           bar.

2:

      let str = `Multiline string.
foo.
bar.`

Это регистрирует это правильно, но это некрасиво в файле сценария, если str вложен внутри функций / объектов и т.д ...:

      Multiline string.
foo.
bar.

Мой действительно простой ответ с регулярным выражением, которое правильно регистрирует str:

      let str = `Multiline string.
           foo.
           bar.`.replace(/\n +/g, '\n');

Обратите внимание, что это не идеальное решение, но оно работает, если вы уверены, что после новой строки (\n) появится хотя бы один пробел (+ означает хотя бы одно вхождение). Он также будет работать с * (ноль или больше).

Вы можете быть более явным и использовать {n,}, что означает как минимум n вхождений.

Источник

Эквивалент в javascript:

var text = `
This
Is
A
Multiline
String
`;

Вот спецификация. Смотрите поддержку браузера внизу этой страницы. Вот также несколько примеров.

Источник

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

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

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

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

Источник

Точный

Рубиновые продукты:"This\nIs\nA\nMultiline\nString\n" - ниже JS создает точно такую ​​же строку

text = `This
Is
A
Multiline
String
`

// TEST
console.log(JSON.stringify(text));
console.log(text);

Это улучшение ответа Лонни Бест

Источник

Это работает в 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>
Источник

Мое расширение на /questions/48038511/sozdanie-mnogostrochnyih-strok-v-javascript/48038935#48038935. Ожидается комментарий в форме /*! 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.

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

Использование 'text' плагина require.js с многострочным шаблоном в 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');

Легко.

Источник

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

Источник

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

Источник

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

const str = `This 

is 

a

multiline text`; 

console.log(str);
Источник

Вы можете использовать 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 позволяет использовать обратную галочку для указания строки в несколько строк. Это называется литералом шаблона. Как это:

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

Источник

Вы можете использовать шаблоны с тегами, чтобы получить желаемый результат.

Например:

// Merging multiple whitespaces and trimming the output

const t = (strings) => { return strings.map((s) => s.replace(/\s+/g, ' ')).join("").trim() }
console.log(t`
  This
  Is
  A
  Multiline
  String
`);
// Output: 'This Is A Multiline String'

// Similar but keeping whitespaces:

const tW = (strings) => { return strings.map((s) => s.replace(/\s+/g, '\n')).join("").trim() }
console.log(tW`
  This
  Is
  A
  Multiline
  String
`);
// Output: 'This\nIs\nA\nMultiline\nString'
Источник

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

Пример:

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

Источник

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

var string = "line1\  // comment, space or tabs here raise error
line2";
Источник

Многострочная строка с переменными

      var x = 1
string = string + `<label class="container">
                       <p>${x}</p>
                   </label>`;
Источник
Другие вопросы по тегам