Câu hỏi Tạo 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

1924
2018-04-30 02:11


gốc


Xem stackoverflow.com/a/6247331/632951 - Pacerier
Kiểm tra điều này trên nhiều cách khác nhau để đạt được điều tương tự. Tôi cũng đã thêm hiệu suất của từng phương thức stackoverflow.com/a/23867090/848841 - Vignesh Subramanian


Các câu trả lời:


Cập nhật:

ECMAScript 6 (ES6) giới thiệu một loại chữ mới, cụ thể là mẫu chữ. Họ có nhiều tính năng, nội suy thay đổi trong số những người khác, nhưng quan trọng nhất cho câu hỏi này, họ có thể được nhiều.

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

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

(Lưu ý: Tôi không chủ trương sử dụng HTML theo chuỗi)

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


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

Javascript không có cú pháp ở đây. Tuy nhiên, bạn có thể thoát khỏi dòng chữ mới, gần đến:

"foo \
bar"

2303
2018-04-30 02:15



Được cảnh báo: một số trình duyệt sẽ chèn dòng mới vào lúc tiếp tục, một số sẽ không. - staticsan
Visual Studio 2010 dường như bị nhầm lẫn bởi cú pháp này. - jcollum
dresende: Đó là hai dòng mã. Đó là một biểu hiện duy nhất. - Anonymous
@Nate Nó được chỉ định trong ECMA-262 5th Edition phần 7.8.4 và được gọi là LineContinuation : "Ký tự dấu ngắt dòng không thể xuất hiện trong chuỗi ký tự, ngoại trừ một phần của LineContinuation để tạo ra chuỗi ký tự trống. Cách chính xác để tạo một ký tự đầu cuối dòng là một phần của giá trị Chuỗi của một chuỗi ký tự là sử dụng một chuỗi thoát như \ n hoặc \ u000A. " - some
Tôi không hiểu tại sao bạn lại làm điều này khi các trình duyệt xử lý nó không nhất quán. "line1 \ n" + "line2" trên nhiều dòng có thể đọc đủ và bạn được đảm bảo hành vi nhất quán. - SamStephens


Cập nhật:

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

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 được phân tách bằng dấu kiểm sau:

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

Điều này chỉ cần transpiles xuống để nối:

user.name + ' liked your post about strings'

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

Hướng dẫn kiểu JavaScript của Google khuyên bạn nên sử dụng nối chuỗi thay vì thoát khỏi 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ể được rút ra một cách an toàn vào 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 phức tạp; và trong khi hầu hết các công cụ script 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 vào đó:

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

1120
2018-06-06 02:30



điều này không hiệu quả với tôi trong chrome canary cho windows ngay cả sau khi bật JavaScript thử nghiệm - Inuart
Tôi không hiểu đề xuất của Google. Tất cả các trình duyệt ngoại trừ các trình duyệt cực kỳ cũ đều hỗ trợ dấu gạch chéo ngược theo sau là cách tiếp cận dòng mới và sẽ tiếp tục làm như vậy trong tương lai để tương thích ngược. Thời gian duy nhất bạn cần tránh nó là nếu bạn cần đảm bảo rằng một và chỉ một dòng mới (hoặc không có dòng mới) được thêm vào cuối mỗi dòng (xem thêm nhận xét của tôi về câu trả lời được chấp nhận). - Matt Browne
Những người muốn thử các nội dung này, hãy nhớ kiểm tra [Chrome Canary] [1] [1]: google.com/intl/vi/chrome/browser/canary.html - Sazid
Lưu ý rằng các chuỗi mẫu không được hỗ trợ trong IE11, Firefox 31, Chrome 35 hoặc Safari 7. Xem kangax.github.io/compat-table/es6 - Dwayne
@MattBrowne Đề xuất của Google đã được tài liệu hóa bởi chúng, theo thứ tự tầm quan trọng của lý do: (1) Khoảng trống ở đầu mỗi dòng [trong ví dụ này, bạn không muốn khoảng trống đó trong chuỗi của mình nhưng trông đẹp hơn trong mã ] (2) khoảng trống sau dấu gạch chéo sẽ dẫn đến các lỗi phức tạp [nếu bạn kết thúc một dòng với \  thay vì `\` thật khó để nhận ra] và (3) trong khi hầu hết các công cụ script hỗ trợ điều này, nó không phải là một phần của ECMAScript [tức là lý do tại sao sử dụng các tính năng không chuẩn?] Hãy nhớ rằng đó là một hướng dẫn về phong cách, đó là về làm cho mã dễ đọc + duy trì + gỡ lỗi: không chỉ "nó hoạt động" chính xác. - ShreevatsaR


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

Để duy trì sự giám sát với các chuỗi 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 đã hiển thị (thoát khỏi dòng mới), có thể là một khối xấu trong mã của bạn:

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

Đây là một 'thủ thuật' kỳ lạ nhưng hoạt động khác1:

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

[Ngoài ra năm 2015]
ES6 hỗ trợ mở rộng chuỗi trên nhiều dòng bằng cách sử dụ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.`;

1 Lưu ý: điều này sẽ bị mất sau khi rút gọn / làm xáo trộn mã của bạn


634
2018-04-30 07:22



Vui lòng không sử dụng mẫu mảng. Nó sẽ chậm hơn so với kết nối chuỗi đồng bằng cũ trong hầu hết các trường hợp. - BMiner
Có thật không? jsperf.com/join-concat/24 - KooiInc
Mẫu mảng có thể đọc được nhiều hơn và mất hiệu suất cho một ứng dụng thường không đáng kể. Như kiểm tra perf cho thấy, ngay cả IE7 có thể làm hàng chục ngàn hoạt động mỗi giây. - Ben Atkin
1 cho một thay thế thanh lịch không chỉ hoạt động theo cùng một cách trong tất cả các trình duyệt, mà còn là tương lai. - Pavel
@KooiInc Các thử nghiệm của bạn bắt đầu với mảng đã được tạo, điều đó làm lệch kết quả. Nếu bạn thêm khởi tạo của mảng, nối thẳng sẽ nhanh hơn jsperf.com/string-concat-without-sringbuilder/7 Xem stackoverflow.com/questions/51185/… Là một thủ thuật cho các dòng mới, nó có thể được chấp nhận, nhưng nó chắc chắn đang làm nhiều công việc hơn là - Juan Mendes


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

Phương pháp này dựa trên việc tuần tự hóa các hàm, đó là được định nghĩa là phụ thuộc vào việc triển khai 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ó 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ó các tài liệu ở đây như sau:

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 minifier của bạn, mặc dù. Nó có xu hướng xóa nhận xét. Cho Máy nén YUI, nhận xét bắt đầu bằng /*!(giống như cái tôi đã sử dụng) sẽ được giữ nguyên.

Tôi nghĩ một thực giải pháp sẽ được sử dụng CoffeeScript.


327
2018-04-06 18:16



+ 1 + 1 thông minh! (hoạt động trong Node.JS) - George Bailey
Gì!? tạo và dịch ngược một chức năng để hack một bình luận nhiều dòng thành một chuỗi nhiều dòng? Hiện nay đó là xấu xí. - fforw
Nó thực sự vượt ra ngoài xấu xí ... Mặc dù, không có giải mã có tính liên quan... - Jordão
jsfiddle.net/fqpwf hoạt động trong Chrome 13 và IE8 / 9, chứ không phải FF6. Tôi ghét phải nói, nhưng tôi thích nó, và nếu nó có thể là một tính năng có chủ ý của mỗi trình duyệt (để nó không biến mất), tôi sẽ sử dụng nó. - Jason Kleban
Cực kỳ tiện dụng. Tôi đang sử dụng nó cho (Jasmine) đơn vị kiểm tra, nhưng tránh nó cho mã sản xuất. - Jason


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

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

187
2018-03-21 21:05



Ví dụ đầu tiên là tuyệt vời và đơn giản. Tốt hơn nhiều so với \ phương pháp tiếp cận như tôi không chắc chắn như thế nào trình duyệt sẽ xử lý dấu gạch chéo ngược như một ký tự thoát và như là một nhân vật đa dòng. - Matt K
Mã CDATA (E4X) là lỗi thời và sẽ sớm ngừng hoạt động ngay cả trong Firefox. - Brock Adams
e4x.js sẽ là giải pháp tốt trong tương lai - Paul Sweatte


Tôi đã nghĩ ra phương pháp rất cứng nhắc này của một chuỗi đa lót. Vì việc 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 chú thích làm chuỗi của bạn bằng cách sử dụng một chú thích đa cấp / ** /. Bạn chỉ cần cắt bỏ các đầu 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)

107
2018-01-03 19:51



Điều này là hoàn toàn đáng sợ. Tôi thích nó (mặc dù bạn có thể cần phải làm một trận đấu regex bởi vì tôi không chắc chắn cách chính xác khoảng trống cho toString() Là. - Kevin Cox
stackoverflow.com/a/5571069/499214 - John Dvorak
Giải pháp này dường như không hoạt động trong firefox, có thể đó là một tính năng bảo mật cho trình duyệt? EDIT: Nevermind, nó chỉ không hoạt động cho Firefox Phiên bản 16. - Bill
Ngoài ra hãy cẩn thận của minifiers mà dải bình luận ...: D - jondavidjohn
@ KevinCox bạn có thể sử dụng trim(). - schmijos


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

<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 mà có HTML nhưng nó không hoạt động?


82
2017-08-17 14:25



Bất cứ nơi nào bạn không muốn đặt dây của bạn vào các yếu tố kịch bản riêng biệt và xa xôi. - Lodewijk
Một phản đối hợp lệ! Nó không hoàn hảo. Nhưng đối với các mẫu, sự tách biệt đó không chỉ là ok, mà thậm chí có thể được khuyến khích. - Peter V. Mørch
Tôi thích chia nhỏ mọi thứ hơn 80/120 ký tự thành nhiều dòng, tôi e rằng đó không chỉ là các mẫu. Bây giờ tôi thích cú pháp 'line1' + 'line2'. Nó cũng là nhanh nhất (mặc dù điều này có thể cạnh tranh nó cho các văn bản thực sự lớn). Đó là một mẹo tốt đẹp mặc dù. - Lodewijk
trên thực tế, đây là HTML không phải Javascript: - / - CpILL
tuy nhiên, nhiệm vụ lấy chuỗi đa dòng trong javascript có thể được thực hiện theo cách này - Davi Fiamenghi


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

ví dụ.

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

Sau đó, khi tôi cần để có được 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ó:

enter image description here


46
2017-08-23 18:30



Cám ơn vì cái này! Đó là câu trả lời duy nhất tôi thấy rằng giải quyết vấn đề của tôi, liên quan đến các chuỗi không xác định có thể chứa bất kỳ sự kết hợp nào giữa các dấu nháy đơn và kép được chèn trực tiếp vào mã mà không có cơ hội mã hóa trước. (nó đến từ một ngôn ngữ tạo khuôn mẫu tạo JS - vẫn từ một nguồn đáng tin cậy chứ không phải là một biểu mẫu gửi đi, vì vậy nó không hoàn toàn bị mất trí nhớ). - octern
Đây là phương pháp duy nhất thực sự làm việc cho tôi để tạo một biến chuỗi javascript nhiều dòng từ một chuỗi Java. - beginner_
Nếu chuỗi là HTML thì sao? - Dan Dascalescu
$ ('# UniqueID'). Nội dung () - mplungjan
@Pacerier Tất cả mọi thứ tôi đã đọc, từ Google cũng như các trang web khác, nói rằng ngày nay Google không lập chỉ mục display:none nội dung, rất có thể là do tính phổ biến của giao diện người dùng theo kiểu JavaScript. (Ví dụ, một trang FAQ với chức năng ẩn / hiển thị.) Bạn cần phải cẩn thận, bởi vì Google nói rằng họ có thể trừng phạt bạn nếu nội dung ẩn dường như được thiết kế để tăng giả tạo thứ hạng SEO của bạn. - Gavin


Sử dụng thẻ tập lệnh:

  • thêm một <script>...</script> khối chứa văn bản nhiều dòng của bạn vào head nhãn;
  • nhận được văn bản đa nguyên của bạn như ... (xem ra để 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>
    

27
2018-05-26 09:34



Tôi nghĩ chiến lược này là sạch sẽ và không được sử dụng nhiều. jsrender sử dụng cái này. - xdhmoore
Tôi đang sử dụng điều này với innerText iso innerHTML, Nhưng làm cách nào để đảm bảo rằng các khoảng trắng được giữ nguyên? - David Nouls
Vì xà phòng dựa trên XML nên nó phải bảo quản <![CDATA[.....]]> . - jpfreire
Ngoài ra các truy vấn ajax trong trường hợp bạn đang sử dụng chúng. Bạn có thể thử thay đổi tiêu đề của mình xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); Tôi không nhớ có vấn đề gì khác hơn là gõ nhận xét trong JS. Không gian không có vấn đề gì. - jpfreire


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

1. Slash nối

  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. Array Tham gia nối

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

Hiệu suât khôn ngoan, Slash nố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>
  `

25
2017-12-13 20:09



Tôi nghĩ rằng bạn vừa mới làm lại những gì đã có trên trang trong năm năm, nhưng theo một cách rõ ràng hơn. - RandomInsano
sẽ không cắt nối cũng bao gồm khoảng trắng ở đầu dòng? - f.khantsis


Tôi thích cú pháp và sự tán thành này:

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

(nhưng thực sự không thể được coi là chuỗi nhiều dòng)


24
2018-04-25 11:34



Tôi sử dụng điều này, ngoại trừ tôi đặt dấu '+' ở cuối dòng trước, để làm cho nó rõ ràng câu lệnh được tiếp tục trên dòng kế tiếp. Cách của bạn không xếp hàng indents đồng đều hơn mặc dù. - Sean
@Sean tôi sử dụng điều này quá, và tôi vẫn thích đặt '+' ở đầu mỗi dòng mới được thêm vào, và cuối cùng ';' trên một dòng mới, tôi đã tìm thấy nó chính xác hơn. - AgelessEssence
đặt dấu + ở đầu cho phép một chú thích ra dòng đó mà không phải chỉnh sửa các dòng khác khi dòng đầu tiên / cuối cùng của chuỗi. - moliad
Tôi thích các + ở phía trước quá là trực quan tôi không cần phải quét đến cuối dòng để biết tiếp theo là một sự tiếp nối. - Daniel Sokolowski