Tạo các chuỗi nhiều dòng trong JavaScript

Tôi có đoạn mã sau trong Ruby. Tôi muốn chuyển đổi mã này thành JavaScript. Mã tương đương trong JS là gì?

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

Cập nhật:

ECMAScript 6 (ES6) giới thiệu một loại chữ mới, cụ thể là chữ mẫu . Chúng có nhiều tính năng, nội suy biến đổi giữa các loại khác, nhưng quan trọng nhất đối với câu hỏi này, chúng có thể là đa dòng.

Một mẫu chữ được phân định bởi backticks :

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

(Lưu ý: Tôi không ủng hộ việc sử dụng HTML trong chuỗi)

Hỗ trợ trình duyệt là OK , nhưng bạn có thể sử dụng các bộ chuyển đổi để tương thích hơn.

Câu trả lời ES5 gốc:

Javascript không có cú pháp tài liệu ở đây. Bạn có thể thoát khỏi dòng mới theo nghĩa đen, tuy nhiên, nó đến gần:

"foo \
bar"

Cập nhật ES6:

Như câu trả lời đầu tiên đề cập, với ES6 / Babel, giờ đây bạn có thể tạo các chuỗi nhiều dòng chỉ bằng cách sử dụng backticks:

const htmlString = `Say hello to 
multi-line
strings!`;

Biến nội suy là một tính năng mới phổ biến đi kèm với các chuỗi phân cách back-tick:

const htmlString = `${user.name} liked your post about strings`;

Điều này chỉ chuyển xuống để ghép nối:

user.name + ' liked your post about strings'

Câu trả lời ES5 gốc:

Hướng dẫn về kiểu JavaScript của Google khuyên bạn nên sử dụng nối chuỗi thay vì thoát các dòng mới:

Đừng làm điều này:

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.';

Khoảng trắng ở đầu mỗi dòng không thể bị xóa một cách an toàn tại thời gian biên dịch; khoảng trắng sau dấu gạch chéo sẽ dẫn đến các lỗi khó khăn; và trong khi hầu hết các công cụ tập lệnh hỗ trợ điều này, nó không phải là một phần của ECMAScript.

Sử dụng nối chuỗi thay thế:

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.';

mô hình text = <<"HERE" This Is A Multiline String HERE không có sẵn trong js (tôi nhớ sử dụng nó nhiều trong những ngày Perl cũ tốt của tôi).

Để giám sát các chuỗi đa dòng phức tạp hoặc dài, đôi khi tôi sử dụng một mẫu mảng:

var myString = 
   ['<div id="someId">',
    'some content<br />',
    '<a href="#someRef">someRefTxt</a>',
    '</div>'
   ].join('\n');

hoặc mẫu ẩn danh đã được hiển thị (thoát dòng mới), có thể là một khối xấu xí trong mã của bạn:

    var myString = 
       '<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';

Đây là một 'mẹo' kỳ lạ nhưng hoạt động ¹ :

var myString = (function () {/*
   <div id="someId">
     some content<br />
     <a href="#someRef">someRefTxt</a>
    </div>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

chỉnh sửa bên ngoài: jsfiddle

ES20xx hỗ trợ kéo dài chuỗi trên nhiều dòng bằng chuỗi mẫu :

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

¹ Lưu ý: điều này sẽ bị mất sau khi thu nhỏ / làm xáo trộn mã của bạn

Bạn có thể có các chuỗi nhiều dòng trong JavaScript thuần.

Phương pháp này dựa trên việc tuần tự hóa các chức năng, được xác định là phụ thuộc vào việc thực hiện . Nó hoạt động trong hầu hết các trình duyệt (xem bên dưới), nhưng không có gì đảm bảo rằng nó sẽ vẫn hoạt động trong tương lai, vì vậy đừng dựa vào nó.

Sử dụng chức năng sau:

function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*!?/, '').
      replace(/\*\/[^\/]+$/, '');
}

Bạn có thể có tài liệu ở đây:

var tennysonQuote = hereDoc(function() {/*!
  Theirs not to make reply,
  Theirs not to reason why,
  Theirs but to do and die
*/});

Phương pháp đã được thử nghiệm thành công trong các trình duyệt sau (không được đề cập = không được kiểm tra):

• IE 4 - 10
• Opera 9,50 - 12 (không phải trong 9-)
• Safari 4 - 6 (không phải trong 3-)
• Chrome 1 - 45
• Firefox 17 - 21 ( không phải trong 16- )
• Rekonq 0.7.0 - 0.8.0
• Không được hỗ trợ trong Konqueror 4.7.4

Hãy cẩn thận với công cụ khai thác của bạn, mặc dù. Nó có xu hướng loại bỏ ý kiến. Đối với máy nén YUI , một nhận xét bắt đầu bằng/*! (như cái tôi đã sử dụng) sẽ được giữ nguyên.

Tôi nghĩ rằng một giải pháp thực sự sẽ là sử dụng CoffeeScript .

CẬP NHẬT ES6: Bạn có thể sử dụng backtick thay vì tạo một chức năng với một bình luận và chạy toString trên bình luận. Các regex sẽ cần phải được cập nhật để chỉ dải không gian. Bạn cũng có thể có một phương thức nguyên mẫu chuỗi để làm điều này:

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

Điều đó sẽ rất tuyệt. Ai đó nên viết phương thức chuỗi .removeInentation này ...;)

Bạn có thể làm được việc này...

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

Tôi đã đưa ra phương pháp gian lận rất linh hoạt của một chuỗi nhiều hàng. Vì chuyển đổi một hàm thành một chuỗi cũng trả về bất kỳ nhận xét nào bên trong hàm, bạn có thể sử dụng các nhận xét làm chuỗi của mình bằng cách sử dụng một nhận xét đa biến / ** /. Bạn chỉ cần cắt bỏ các kết thúc và bạn có chuỗi của bạn.

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)

Tôi ngạc nhiên tôi đã không thấy điều này, bởi vì nó hoạt động ở mọi nơi tôi đã thử nghiệm và rất hữu ích cho các ví dụ:

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

Có ai biết về một môi trường có HTML nhưng nó không hoạt động không?

Tôi đã giải quyết điều này bằng cách xuất ra một div, làm cho nó bị ẩn và gọi id div bằng jQuery khi tôi cần.

ví dụ

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

Sau đó, khi tôi cần lấy chuỗi, tôi chỉ cần sử dụng jQuery sau đây:

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

Trả về văn bản của tôi trên nhiều dòng. Nếu tôi gọi

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

Tôi có:

Có nhiều cách để đạt được điều này

1. Chém chém

  var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';

2. nối thường xuyên

var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';

3. Mảng tham gia nối

var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');

Hiệu suất khôn ngoan, Slash concatenation (cái đầu tiên) là nhanh nhất.

Tham khảo trường hợp thử nghiệm này để biết thêm chi tiết về hiệu suất

Cập nhật:

Với ES2015 , chúng ta có thể tận dụng tính năng chuỗi Mẫu của nó. Với nó, chúng ta chỉ cần sử dụng back-tick để tạo chuỗi nhiều dòng

Thí dụ:

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

Sử dụng thẻ script:

• thêm một <script>...</script>khối chứa văn bản nhiều dòng của bạn vào headthẻ;

• nhận được văn bản đa dòng của bạn như ... (coi chừng mã hóa văn bản: 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>

Tôi thích cú pháp và sự bổ sung này:

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

(nhưng thực tế không thể được coi là chuỗi đa dòng)

Có thư viện này làm cho nó đẹp:

https://github.com/sindresorhus/multiline

Trước

var str = '' +
'<!doctype html>' +
'<html>' +
'   <body>' +
'       <h1>❤ unicorns</h1>' +
'   </body>' +
'</html>' +
'';

Sau

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});

Downvoters : Mã này chỉ được cung cấp cho thông tin.

Điều này đã được thử nghiệm trong Fx 19 và Chrome 24 trên Mac

BẢN GIỚI THIỆU

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>

Tóm lại, tôi đã thử 2 cách tiếp cận được liệt kê ở đây trong lập trình javascript của người dùng (Opera 11.01):

• cái này không hoạt động: Tạo các chuỗi nhiều dòng trong JavaScript
• điều này hoạt động khá tốt, tôi cũng đã tìm ra cách làm cho nó trông đẹp hơn trong chế độ xem nguồn của Notepad ++: Tạo các chuỗi nhiều dòng trong JavaScript

Vì vậy, tôi khuyên bạn nên sử dụng phương pháp làm việc cho người dùng Opera của người dùng Opera. Không giống như những gì tác giả đã nói:

Nó không hoạt động trên firefox hoặc opera; chỉ trên IE, chrome và safari.

Nó KHÔNG hoạt động trong Opera 11. Ít nhất là trong các tập lệnh JS của người dùng. Quá tệ Tôi không thể nhận xét về câu trả lời cá nhân hoặc nêu lên câu trả lời, tôi sẽ làm ngay lập tức. Nếu có thể, ai đó có đặc quyền cao hơn xin vui lòng làm điều đó cho tôi.

Tiện ích mở rộng của tôi tới https://stackoverflow.com/a/15558082/80404 . Nó mong nhận xét ở dạng /*! any multiline comment */biểu tượng! được sử dụng để ngăn chặn loại bỏ bằng cách thu nhỏ (ít nhất là cho máy nén 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));
};

Thí dụ:

var tmpl = function() { /*!
 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    </ul>
 </div>
*/}.extractComment();

Cập nhật cho năm 2015 : bây giờ là sáu năm sau: hầu hết mọi người sử dụng trình tải mô-đun và mỗi hệ thống mô-đun chính đều có cách tải mẫu. Nó không phải là nội tuyến, nhưng loại chuỗi đa dòng phổ biến nhất là các mẫu và nói chung các mẫu nên được loại bỏ khỏi JS .

Yêu cầu: 'yêu cầu văn bản'.

Sử dụng plugin 'text' của request.js , với mẫu nhiều dòng trong template.html

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

NPM / browserify: mô-đun 'brfs'

Browserify sử dụng mô-đun 'brfs' để tải các tệp văn bản. Điều này thực sự sẽ xây dựng mẫu của bạn vào HTML kèm theo của bạn.

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

Dễ dàng.

Nếu bạn sẵn sàng sử dụng các dòng mới thoát, chúng có thể được sử dụng độc đáo . Nó trông giống như một tài liệu với một đường viền trang .

Tương đương trong javascript là:

var text = `
This
Is
A
Multiline
String
`;

Đây là đặc điểm kỹ thuật . Xem hỗ trợ trình duyệt ở dưới cùng của trang này . Dưới đây là một số ví dụ .

Điều này hoạt động trong IE, Safari, Chrome và 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>

Bạn có thể sử dụng TypeScript (JavaScript Superset), nó hỗ trợ các chuỗi đa dòng và chuyển mã trở lại thành JavaScript thuần mà không cần phí:

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

Nếu bạn muốn thực hiện tương tự với JavaScript đơn giản:

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)

Lưu ý rằng iPad / Safari không hỗ trợ 'functionName.toString()'

Nếu bạn có nhiều mã kế thừa, bạn cũng có thể sử dụng biến thể JavaScript đơn giản trong TypeScript (cho mục đích dọn dẹp):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

và bạn có thể sử dụng đối tượng chuỗi đa dòng từ biến thể JavaScript đơn giản, nơi bạn đặt các mẫu vào một tệp khác (mà bạn có thể hợp nhất trong gói).

Bạn có thể thử TypeScript tại
http://www.typescriptlang.org/Playground

Cách làm ES6 sẽ là bằng cách sử dụng các mẫu chữ:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Tham khảo thêm tại đây

ES6 cho phép bạn sử dụng backtick để chỉ định một chuỗi trên nhiều dòng. Nó được gọi là một mẫu chữ. Như thế này:

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

Sử dụng backtick hoạt động trong NodeJS và được Chrome, Firefox, Edge, Safari và Opera hỗ trợ.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Cách dễ nhất để tạo các chuỗi nhiều dòng trong Javascrips là sử dụng backticks (``). Điều này cho phép bạn tạo các chuỗi nhiều dòng trong đó bạn có thể chèn các biến với${variableName} .

Thí dụ:

let name = 'Willem'; 
let age = 26;

let multilineString = `
my name is: ${name}

my age is: ${age}
`;

console.log(multilineString);

tương thích:

• Nó được giới thiệu trong ES6//es2015
• Hiện tại, nó được hỗ trợ bởi tất cả các nhà cung cấp trình duyệt lớn (trừ trình duyệt internet explorer)

Kiểm tra tính tương thích chính xác trong tài liệu Mozilla tại đây

Phiên bản tham gia dựa trên mảng của tôi cho chuỗi 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'));

Điều này đã làm việc tốt cho tôi, đặc biệt là khi tôi thường chèn các giá trị vào html được xây dựng theo cách này. Nhưng nó có rất nhiều hạn chế. Lõm sẽ là tốt đẹp. Không phải đối phó với dấu ngoặc kép lồng nhau sẽ thực sự tốt đẹp, và chỉ sự cồng kềnh của nó làm phiền tôi.

Là .push () để thêm vào mảng chiếm nhiều thời gian? Xem câu trả lời liên quan này:

( Có lý do gì các nhà phát triển JavaScript không sử dụng Array.push () không? )

Sau khi xem các lần chạy thử (đối lập) này, có vẻ như .push () vẫn ổn đối với các mảng chuỗi không có khả năng phát triển hơn 100 mục - tôi sẽ tránh nó để bổ sung cho các mảng lớn hơn.

Bạn có thể sử dụng +=để nối chuỗi của mình, dường như không ai trả lời rằng, điều này sẽ có thể đọc được và cũng gọn gàng ... đại loại như thế này

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

cũng có thể được viết là

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

console.log(hello);

Cũng lưu ý rằng, khi mở rộng chuỗi trên nhiều dòng bằng cách sử dụng dấu gạch chéo ngược ở cuối mỗi dòng, bất kỳ ký tự phụ nào (chủ yếu là khoảng trắng, tab và nhận xét được thêm do nhầm lẫn) sau dấu gạch chéo ngược sẽ gây ra lỗi ký tự không mong muốn, tôi mất một giờ để tìm ngoài

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

Xin vui lòng cho internet yêu thích sử dụng nối chuỗi và chọn không sử dụng các giải pháp ES6 cho việc này. ES6 KHÔNG được hỗ trợ trên tất cả các bảng, giống như CSS3 và một số trình duyệt nhất định chậm thích ứng với chuyển động CSS3. Sử dụng JavaScript đơn giản, người dùng cuối của bạn sẽ cảm ơn bạn.

Thí dụ:

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

Bạn phải sử dụng toán tử ghép nối '+'.

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

Bằng cách sử dụng \nmã nguồn của bạn sẽ trông như thế nào -

Điều này 
 <br> là
 <br> đa dòng
 chuỗi <br>.

Bằng cách sử dụng <br>đầu ra trình duyệt của bạn sẽ trông như thế nào -

Điều này
Là
đa dòng
chuỗi.

Tôi nghĩ cách giải quyết này sẽ hoạt động trong IE, Chrome, Firefox, Safari, Opera -

Sử dụng 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>

Sử dụng Javascript thuần túy:

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

Chúc mừng !!

Chỉ cần thử câu trả lời ẩn danh và thấy có một mẹo nhỏ ở đây, nó không hoạt động nếu có khoảng trống sau dấu gạch chéo ngược. \
Vì vậy, giải pháp sau không hiệu quả -

var x = { test:'<?xml version="1.0"?>\ <-- One space here
            <?mso-application progid="Excel.Sheet"?>' 
};

Nhưng khi không gian được loại bỏ, nó hoạt động -

var x = { test:'<?xml version="1.0"?>\<-- No space here now
          <?mso-application progid="Excel.Sheet"?>' 
};

alert(x.test);​

Hy vọng nó giúp !!