Pertanyaan Membuat string multiline di JavaScript


Saya memiliki kode berikut di Ruby. Saya ingin mengubah kode ini menjadi JavaScript. apa kode setara di JS?

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

1920
2018-04-30 02:11


asal


Jawaban:


Memperbarui:

ECMAScript 6 (ES6) memperkenalkan jenis literal baru, yaitu literal template. Mereka memiliki banyak fitur, interpolasi variabel antara lain, tetapi yang paling penting untuk pertanyaan ini, mereka bisa multiline.

Sebuah literal template dibatasi oleh backticks:

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

(Catatan: Saya tidak menganjurkan untuk menggunakan HTML dalam string)

Dukungan browser cukup baik, tetapi Anda bisa menggunakannya transpilers agar lebih kompatibel.


Jawaban ES5 asli:

Javascript tidak memiliki sintaks di sini-dokumen. Anda dapat melarikan diri dari baris baru, namun, yang mendekati:

"foo \
bar"

2293
2018-04-30 02:15



Memperbarui:

Sebagai jawaban pertama menyebutkan, dengan ES6 / Babel, Anda sekarang dapat membuat string multi-baris hanya dengan menggunakan tanda kutip:

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

Interpolasi variabel adalah fitur baru yang populer yang dilengkapi dengan string yang dipisahkan dengan tanda-kembali:

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

Ini hanya transpiles ke penggabungan:

user.name + ' liked your post about strings'

Jawaban ES5 asli:

Panduan gaya JavaScript Google merekomendasikan untuk menggunakan penggabungan string alih-alih keluar dari baris baru:

Jangan lakukan ini:

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

Ruang putih di awal setiap baris tidak dapat dengan aman dilucuti pada waktu kompilasi; spasi setelah garis miring akan menghasilkan kesalahan yang rumit; dan sementara sebagian besar mesin skrip mendukung ini, itu bukan bagian dari ECMAScript.

Gunakan rangkaian string sebagai gantinya:

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

1117
2018-06-06 02:30



pola text = <<"HERE" This Is A Multiline String HERE tidak tersedia di js (Saya ingat menggunakannya dalam banyak hari-hari Perl lama saya).

Untuk menjaga pengawasan dengan string multiline yang kompleks atau panjang saya terkadang menggunakan pola larik:

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

atau pola anonim sudah menunjukkan (escape newline), yang dapat menjadi blok jelek dalam kode Anda:

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

Berikut ini satu lagi 'trik' aneh tapi berhasil1:

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

edit eksternal: jsfiddle

[penambahan 2015]
ES6 mendukung string spanning melalui beberapa jalur menggunakan string template:

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 Catatan: ini akan hilang setelah memperkecil / mengaburkan kode Anda


634
2018-04-30 07:22



Kamu bisa memiliki string multiline di JavaScript murni.

Metode ini didasarkan pada serialisasi fungsi, yaitu didefinisikan sebagai tergantung pada implementasi. Ia bekerja di sebagian besar browser (lihat di bawah), tetapi tidak ada jaminan bahwa itu akan tetap berfungsi di masa depan, jadi jangan bergantung padanya.

Menggunakan fungsi berikut:

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

Anda dapat memiliki dokumen-dokumen di sini seperti ini:

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

Metode ini telah berhasil diuji di browser berikut (tidak disebutkan = tidak diuji):

  • IE 4 - 10
  • Opera 9.50 - 12 (tidak dalam 9-)
  • Safari 4 - 6 (tidak dalam 3-)
  • Chrome 1 - 45
  • Firefox 17 - 21 (tidak dalam 16-)
  • Rekonq 0.7.0 - 0.8.0
  • Tidak didukung di Konqueror 4.7.4

Hati-hati dengan minifier Anda. Ini cenderung menghapus komentar. Untuk Kompresor YUI, komentar yang dimulai dengan /*!(seperti yang saya gunakan) akan dipertahankan.

Saya pikir a nyata solusi akan digunakan CoffeeScript.


327
2018-04-06 18:16



Kamu bisa melakukan ini...

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

187
2018-03-21 21:05



Saya datang dengan metode yang sangat jimmy dicurangi dari string multi-berjajar. Karena mengonversi fungsi menjadi string juga mengembalikan komentar apa pun di dalam fungsi, Anda dapat menggunakan komentar sebagai string Anda menggunakan komentar multilined / ** /. Anda hanya perlu memangkas ujungnya dan Anda memiliki tali.

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



Saya terkejut saya tidak melihat ini, karena berfungsi di mana saja saya telah mengujinya dan sangat berguna untuk misalnya. templat:

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

Adakah yang tahu lingkungan di mana ada HTML tetapi tidak berfungsi?


82
2017-08-17 14:25



Saya memecahkan ini dengan mengeluarkan div, membuatnya tersembunyi, dan memanggil div id oleh jQuery ketika saya membutuhkannya.

misalnya

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

Lalu ketika saya perlu mendapatkan string, saya hanya menggunakan jQuery berikut:

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

Yang mengembalikan teks saya di beberapa baris. Jika saya menelepon

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

Saya mendapat:

enter image description here


46
2017-08-23 18:30



Menggunakan tag skrip:

  • tambah sebuah <script>...</script> blok yang berisi teks multiline Anda head menandai;
  • dapatkan teks multiline Anda seperti ... (hati-hati untuk enkode teks: 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



Ada banyak cara untuk mencapai ini

1. Rangkaian Slash

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

2. Rangkaian reguler

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

3. Array Bergabung dengan Rangkaian

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

Kinerja bijaksana, Rangkaian Slash (yang pertama) adalah yang tercepat.

Lihat  test case ini untuk rincian lebih lanjut mengenai kinerja

Memperbarui:

Dengan ES2015, kita dapat memanfaatkan fitur string Templatnya. Dengan itu, kita hanya perlu menggunakan back-ticks untuk membuat string multi-garis

Contoh:

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