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

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

text = <<"HERE"
This
Is
A
Multiline
String
HERE
вопрос задан 30.04.2009
Newy
11958 репутация

36 ответов


  • 2389 рейтинг

    Обновление:

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

    Литерал шаблона ограничен обратными метками :

    var html = `
      
    Some HTML here
     
    `;
    

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

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


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

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

    "foo \
    bar"
    
    ответ дан Anonymous, с репутацией 28255, 30.04.2009
  • 1135 рейтинг

    Обновление:

    Как первый ответ упоминает, с 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.';
    
    ответ дан Devin G Rhode, с репутацией 13850, 6.06.2011
  • 636 рейтинг

    шаблон text = <<"HERE" This Is A Multiline String HERE недоступен в js (я помню, что использовал его много в старые добрые времена Perl).

    Для контроля над сложными или длинными многострочными строками я иногда использую шаблон массива:

    var myString = 
       ['
    ', 'some content
    ', 'someRefTxt', '
    '
       ].join('\n');
    

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

        var myString = 
           '
    \ some content
    \ someRefTxt \
     ';
    

    Вот еще один странный, но работающий «трюк» 1 :

    var myString = (function () {/*
       
    some content
    someRefTxt
             
    */}).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 Примечание: это будет потеряно после минимизации / запутывания вашего кода

    ответ дан KooiInc, с репутацией 78093, 30.04.2009
  • 329 рейтинг

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

    ответ дан Jordão, с репутацией 44717, 6.04.2011
  • 186 рейтинг

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

    var string = 'This is\n' +
    'a multiline\n' + 
    'string';
    
    ответ дан alex, с репутацией 331547, 30.04.2009
  • 107 рейтинг

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

    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)
    
    ответ дан Luke, с репутацией 1095, 21.03.2013
  • 82 рейтинг

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

    
    
    
    

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

    ответ дан Peter V. Mørch, с репутацией 4618, 3.01.2012
  • 46 рейтинг

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

    эл. г.

     
    

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

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

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

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

    Я получаю:

    enter image description here

    ответ дан Tom Beech, с репутацией 1222, 17.08.2012
  • 27 рейтинг

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

    • добавьте блок , содержащий ваш многострочный текст, в тег head;
    • получите свой многострочный текст как есть. , , (обратите внимание на кодировку текста: UTF-8, ASCII)

      
      
      
      
      
    ответ дан jpfreire, с репутацией 1069, 23.08.2012
  • 26 рейтинг

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

    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 мы можем воспользоваться его функцией «Строки шаблона». При этом нам просто нужно использовать обратные галочки для создания многострочных строк

    Пример:

     `

    {{title}}

      

    {{hero.name}} details!

      
    {{hero.id}}
      
    {{hero.name}}
      `
    
    ответ дан Vignesh Subramanian, с репутацией 3542, 26.05.2014
  • 24 рейтинг

    Мне нравится этот синтаксис и отступ:

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

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

    ответ дан semente, с репутацией 4483, 13.12.2011
  • 17 рейтинг

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

    https: // github. com / sindresorhus / multiline

    До

    var str = '' +
    '' +
    '' +
    '   
    ' + '

    ❤ unicorns

    ' + ' ' + '' + '';

    после

    var str = multiline(function(){/*
    
    
        

    ❤ unicorns

    */});
    ответ дан mightyiam, с репутацией 1796, 25.04.2014
  • 13 рейтинг

    Downvoters : Этот код предоставлен только для информации.

    Это было проверено в Fx 19 и Chrome 24 на Mac

    DEMO

    var new_comment; /*<<
  • You $text 2d
  •  
    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'));
    
ответ дан mplungjan, с репутацией 84093, 17.02.2013
  • 10 рейтинг
    Чтобы подвести итог, я попробовал 2 подхода, перечисленных здесь в пользовательском программировании на JavaScript (Opera 11. 01):

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

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

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

    ответ дан Tyler, с репутацией 333, 20.05.2011
  • 8 рейтинг

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

    enter image description here

    ответ дан seo, с репутацией 1548, 28.04.2015
  • 8 рейтинг

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

    требуется. JS: «Требовать текст».

    Использование требуется. js 'text' плагин , с многострочным шаблоном в шаблоне . HTML

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

    NPM / browserify: модуль 'brfs'

    Browserify использует модуль 'brfs' для загрузки текстовых файлов. Это фактически встроит ваш шаблон в ваш связанный HTML.

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

    Легко.

    ответ дан mikemaccana, с репутацией 39644, 10.02.2014
  • 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. орг / игровая площадка

    ответ дан Stefan Steiger, с репутацией 42348, 21.09.2015
  • 7 рейтинг

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

    var text = `
    This
    Is
    A
    Multiline
    String
    `;
    

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

    ответ дан Lonnie Best, с репутацией 2462, 4.11.2015
  • 7 рейтинг

    Мое расширение до 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() { /*!
     
    */}.extractComment();
    
    ответ дан pocheptsov, с репутацией 1330, 11.12.2013
  • 7 рейтинг

    Это работает в IE, Safari, Chrome и Firefox:

    
    
    
    
    
    ответ дан stillatmycomputer, с репутацией 135, 23.11.2010
  • 5 рейтинг

    ES6 позволяет использовать обратную косую черту для указания строки в несколько строк. Это называется литералом шаблона. Как это:

    var multilineString = `One line of text
        second line of text
        third line of text
        fourth line of text`;
    

    Использование обратной галочки работает в NodeJS и поддерживается Chrome, Firefox, Edge, Safari и Opera.

    https: // разработчик. Mozilla. org / en-US / docs / Web / JavaScript / Справочник / Template_literals

    ответ дан earl3s, с репутацией 1910, 28.03.2016
  • 3 рейтинг

    Моя версия объединения на основе массива для строки concat:

    var c = []; //c stands for content
    c.push("
    ");
    c.push("
    ");
    $(body).append(c.join('\n'));
    

    Это хорошо сработало для меня, тем более что я часто вставляю значения в html, построенный таким образом. Но у этого есть много ограничений. Отступ был бы хорош. Не иметь дело с вложенными кавычками было бы очень хорошо, и только громоздкость этого беспокоит меня.

    Это. push () чтобы добавить в массив занимающий много времени? Смотрите этот связанный ответ:

    ( Есть ли причина, по которой разработчики JavaScript не используют Array. От себя()? )

    После просмотра этих (противоположных) тестовых прогонов это выглядит следующим образом. Функция push () хороша для строковых массивов, которые вряд ли вырастут более чем на 100 элементов - я буду избегать этого в пользу индексированных дополнений для больших массивов.

    ответ дан KTys, с репутацией 155, 14.10.2013
  • 3 рейтинг

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

    Пример:

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

    ответ дан Pragmatiq, с репутацией 47, 11.10.2017
  • 3 рейтинг

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

    var string = "line1\  // comment, space or tabs here raise error
    line2";
    
    ответ дан Prakash GPz, с репутацией 970, 13.07.2016
  • 3 рейтинг

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

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

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

    var hello = 'hello';
        hello += ' world';
        hello += ' blah';
    
    console.log(hello);
    
    ответ дан Mr. Alien, с репутацией 114476, 18.01.2014
  • 2 рейтинг

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

    
    
    
    Document
    
    
    

    При использовании \n ваш исходный код будет выглядеть так -

    This 
     
    is
    multiline
    string.

    С помощью
    ваш браузер будет выглядеть как -

    This
    is
    multiline
    string.
    
    ответ дан Sonevol, с репутацией 196, 13.08.2017
  • 2 рейтинг

    Самый простой способ создания многострочных строк в Javascrips - использование обратных кавычек (``). Это позволяет создавать многострочные строки, в которые вы можете вставлять переменные с ${variableName}.

    Пример:

    let name = 'Willem'; 
    let age = 26;
    
    let multilineString = `
    my name is: ${name}
    
    my age is: ${age}
    `;
    
    console.log(multilineString);
    ответ дан Willem van der Veen, с репутацией 2793, 9.09.2018
  • 1 рейтинг

    Я думаю, что этот обходной путь должен работать в IE, Chrome, Firefox, Safari, Opera -

    Использование jQuery :

    
    
    Использование чистого Javascript:
    
    
    ура! !
    
    
    
    
    
    
    ответ дан Aditya Hajare, с репутацией 170, 28.01.2013
  • 0 рейтинг

    Если вы работаете только в Node, вы можете использовать модуль fs для чтения многострочной строки из файла:

    var diagram;
    var fs = require('fs');
    fs.readFile( __dirname + '/diagram.txt', function (err, data) {
      if (err) {
        throw err; 
      }
      diagram = data.toString();
    });
    
    ответ дан Charles Brandt, с репутацией 368, 9.09.2014
  • 0 рейтинг

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

    var x = { test:'\ <-- One space here
                
    ' 
    };
    

    Но когда пространство удалено, оно работает -

    var x = { test:'\<-- No space here now
              
    ' 
    };
    
    alert(x.test);​
    

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

    ответ дан Anmol Saraf, с репутацией 8739, 23.11.2012
  • -1 рейтинг

    Это один довольно экономичный подход, по крайней мере с точки зрения исходного кода:

    function s() {
        var args = [],index;
        for (index = 0; index< arguments.length; index++) {
            args.push (arguments [index]);
        }
        return args.join ("\n");
    }
    console.log (s (
        "This is the first line",
        "and this is the second",
        "finally a third"
    ));
    
    function s() {return arguments.join ("\n")} 
    

    было бы лучше, если бы свойство «arguments» было правильным массивом.

    Вторая версия может использовать «» для выполнения соединения в тех случаях, когда вы хотите контролировать разрывы строк в очень длинной строке.

    ответ дан Iain MacKay, с репутацией 15, 7.03.2013
  • -1 рейтинг

    Я программирую таким образом:

    sys = {
        layout: null,
        makeLayout: function (obCLS) {
            this.layout = $('
    ').addClass('editor').appendTo($(obCLS)).append(
    
                /* Cargador */
                /* @this.layout.find('> div:nth-of-child(1)'); */
                '
    ' + '

    Seleccione la imagen que desea procesar.

    ' + ' ' + ' ' + '
    ' +
    
                /* Cargador - Progreso */
                /* @this.layout.find('> div:nth-of-child(2)'); */
                '
    ' + '
    ' + '' + '
    ' + '' + '
    ' + '
    ' + '
    ' +
    
                /* Editor */
                /* @this.layout.find('> div:nth-of-child(3)');
                 * @sidebar = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(1)');
                 * @body    = this.layout.find('> div:nth-of-child(3) > div > div > div:nth-of-type(2) > div'); */
                '
    ' + '
    ' + '
    ' + '' + '
    ' + '' + '
    ' + '
    ' + '
    ' + '
    '
            );
        }
    }
    
    sys.makeLayout('#div');
    
    ответ дан e-info128, с репутацией 1001, 2.08.2013
  • -1 рейтинг

    Способ ES6 сделать это будет с помощью литералов шаблона:

    const str = `This 
    
    is 
    
    a
    
    multiline text`; 
    
    console.log(str);
    
    ответ дан jenil christo, с репутацией 111, 13.07.2018
  • -1 рейтинг

    Я думаю, я нашел другой способ сделать это встроенным без какого-либо инвазивного синтаксиса в каждой строке. Используйте способность Javascript для преобразования функции в строку и создания многострочного комментария с синтаксисом /**/, а затем удалите «function () {/ *» и «* /}».

    var multiline = function(string) { return string.toString().replace(/(^[^\n]*\n)|(\n\*\/\})/g, ""); };
    
    console.log(multiline(function() {/*
    Hello world!
    I'm a multiline string!
    
    Tada!
    */}));
    

    Единственная ловушка, которую я вижу в этом, является подсветкой синтаксиса.

    РЕДАКТИРОВАТЬ: Если бы я прокрутил немного больше, я бы увидел, что этот ответ делает то же самое: https: // stackoverflow. com / a / 5571069/916553

    ответ дан AdrianCooney, с репутацией 555, 27.08.2013
  • -1 рейтинг

    Я нашел более элегантное решение, возможно, немного не связанное с темой, потому что оно использует PHP, но я уверен, что оно будет полезным и привлекательным * для некоторых из вас. , ,

    этот код JavaScript должен оставаться внутри тегов сценария

    var html=
                
    xxx
    ".$someVar."
    "); ?>

    в вашем выходном html вы увидите что-то вроде

    var html="\r\n\r\n\t\t\t
    \r\n\t\t\t\t
    \r\n\t\t\t\t\txxx\r\n\t\t\t\t<\/div>\r\n\t\t\t\t
    \r\n\t\t\t\t\t44\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t";

    и и вуаля! , это дает вам читабельность кода в вашем файле.

    pD: в этом примере используется функция PHP json_encode (), но, безусловно, существуют эквиваленты функций для языков ASP, Ruby и JSP.

    pD: однако, у этого решения также есть свои ограничения, одним из которых является то, что вы не можете использовать переменные javascript внутри инкапсулированного кода.

    ответ дан AgelessEssence, с репутацией 3545, 14.11.2013
  • -10 рейтинг

    Это не очень элегантно, но достаточно чисто для меня:

    var myString = "First line" + "\n";
    var myString = myString + "Second line" + "\n";
    var myString = myString + "Third line" + "\n";
    
    ответ дан BearCode, с репутацией 1099, 19.02.2013