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

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

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

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

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

Ответы [ 36 ]

5 голосов
/ 09 сентября 2018

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

5 голосов
/ 28 марта 2016

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://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

3 голосов
/ 12 октября 2017

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

Пример:

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

3 голосов
/ 13 июля 2016

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

var string = "line1\  // comment, space or tabs here raise error
line2";
3 голосов
/ 14 октября 2013

Моя версия объединения на основе массива для строки 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 голосов
/ 18 января 2014

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

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

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

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

console.log(hello);
2 голосов
/ 14 августа 2017

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

<!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 ваш исходный код будет выглядеть как - 

This 
 <br>is
 <br>multiline
 <br>string.

При использовании <br> вывод вашего браузера будет выглядеть как - 

This
is
multiline
string.
1 голос
/ 13 июля 2018

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

const str = `This 

is 

a

multiline text`; 

console.log(str);

Подробнее здесь

1 голос
/ 28 января 2013

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

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

Ура !!

0 голосов
/ 27 августа 2013

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

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

Страница:
...