Membuat string multiline dalam JavaScript

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

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

Memperbarui:

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

Literal template dibatasi oleh backticks :

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

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

Dukungan peramban tidak masalah , tetapi Anda dapat menggunakan transponder agar lebih kompatibel.

Jawaban ES5 asli:

Javascript tidak memiliki sintaksis di sini-dokumen. Namun, Anda dapat keluar dari baris baru literal yang mendekati:

"foo \
bar"

Pembaruan ES6:

Seperti jawaban pertama yang disebutkan, dengan ES6 / Babel, Anda sekarang dapat membuat string multi-line hanya dengan menggunakan backticks:

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

Variabel interpolasi adalah fitur baru yang populer yang dilengkapi dengan string pembatas back-tick:

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

Ini hanya berubah menjadi rangkai:

user.name + ' liked your post about strings'

Jawaban ES5 asli:

Panduan gaya JavaScript Google merekomendasikan untuk menggunakan rangkaian 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.';

Spasi pada awal setiap baris tidak dapat dengan aman dilucuti pada waktu kompilasi; spasi putih setelah slash akan menghasilkan kesalahan rumit; dan sementara kebanyakan mesin skrip mendukung ini, ini bukan bagian dari ECMAScript.

Gunakan gabungkan string:

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

polanya text = <<"HERE" This Is A Multiline String HEREtidak tersedia dalam js (saya ingat sering menggunakannya di hari Perl saya yang lama).

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

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

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

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

Berikut ini 'trik' aneh tapi berhasil ¹ :

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

sunting eksternal: jsfiddle

ES20xx mendukung spanning string melalui beberapa baris 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.`;

¹ Catatan: ini akan hilang setelah mengecilkan / mengaburkan kode Anda

Anda dapat memiliki string multiline dalam JavaScript murni.

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

Menggunakan fungsi berikut:

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

Anda dapat memiliki di sini-dokumen 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 ( bukan di 16- )
• Rekonq 0.7.0 - 0.8.0
• Tidak didukung di Konqueror 4.7.4

Berhati-hatilah dengan minifier Anda. Itu cenderung menghapus komentar. Untuk kompresor YUI , komentar yang dimulai dengan /*!(seperti yang saya gunakan) akan dipertahankan.

Saya pikir solusi nyata adalah menggunakan CoffeeScript .

ES6 UPDATE: Anda dapat menggunakan backtick alih-alih membuat fungsi dengan komentar dan menjalankan toString pada komentar. Regex harus diperbarui hanya ke ruang strip. Anda juga dapat memiliki metode prototipe string untuk melakukan ini:

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

Itu akan keren. Seseorang harus menulis metode string .removeIndentation ...;)

Kamu bisa melakukan ini...

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

Saya datang dengan metode yang sangat jimmy ini dari string multi-baris. Karena mengubah fungsi menjadi string juga mengembalikan komentar apa pun di dalam fungsi tersebut, Anda dapat menggunakan komentar sebagai string menggunakan komentar multilined / ** /. Anda hanya perlu memotong 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)

Saya terkejut saya tidak melihat ini, karena berfungsi di mana-mana saya sudah mengujinya dan sangat berguna untuk template misalnya:

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

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

Saya memecahkan ini dengan mengeluarkan div, membuatnya tersembunyi, dan memanggil id id dengan 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 menelpon

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

Saya mendapat:

Ada beberapa cara untuk mencapai ini

1. Rangkaian slash

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

2. penggabungan teratur

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

3. Array Bergabung dalam rangkaian

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

Dari segi kinerja, gabungan Slash (yang pertama) adalah yang tercepat.

Rujuk test case ini untuk detail lebih lanjut mengenai kinerja

Memperbarui:

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

Contoh:

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

Menggunakan tag skrip:

• tambahkan <script>...</script>blok berisi teks multiline Anda ke dalam headtag;

• dapatkan teks multiline Anda apa adanya ... (hati-hati terhadap penyandian 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>

Saya suka sintaks dan indendasi ini:

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

(tapi sebenarnya tidak bisa dianggap sebagai string multiline)

Ada perpustakaan yang membuatnya indah:

https://github.com/sindresorhus/multiline

Sebelum

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

Setelah

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

Downvoters : Kode ini disediakan hanya untuk informasi.

Ini telah diuji dalam Fx 19 dan Chrome 24 di Mac

DEMO

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>

Singkatnya, saya telah mencoba 2 pendekatan yang tercantum di sini dalam pemrograman javascript pengguna (Opera 11.01):

• ini tidak berfungsi: Membuat string multiline dalam JavaScript
• ini bekerja dengan cukup baik, saya juga menemukan cara untuk membuatnya terlihat baik di tampilan sumber Notepad ++: Membuat string multiline di JavaScript

Jadi saya merekomendasikan pendekatan kerja untuk pengguna Opera JS pengguna. Berbeda dengan apa yang penulis katakan:

Itu tidak bekerja pada firefox atau opera; hanya pada IE, chrome dan safari.

Ini TIDAK bekerja di Opera 11. Setidaknya dalam skrip JS pengguna. Sayang sekali saya tidak bisa mengomentari jawaban individu atau membatalkan jawaban, saya akan segera melakukannya. Jika memungkinkan, seseorang dengan hak istimewa yang lebih tinggi tolong lakukan untuk saya.

Ekstensi saya ke https://stackoverflow.com/a/15558082/80404 . Itu mengharapkan komentar dalam bentuk di /*! any multiline comment */mana simbol! digunakan untuk mencegah penghapusan dengan minifikasi (setidaknya untuk kompresor 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));
};

Contoh:

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

Diperbarui untuk 2015 : sekarang enam tahun kemudian: kebanyakan orang menggunakan pemuat modul, dan sistem modul utama masing-masing memiliki cara memuat templat. Ini bukan inline, tetapi tipe multiline string yang paling umum adalah templat, dan templat umumnya harus dijauhkan dari JS .

require.js: 'memerlukan teks'.

Menggunakan plugin 'text' require.js , dengan template multiline di template.html

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

NPM / browserify: modul 'brfs'

Browserify menggunakan modul 'brfs' untuk memuat file teks. Ini sebenarnya akan membangun template Anda ke dalam HTML bundel Anda.

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

Mudah.

Jika Anda bersedia menggunakan baris baru yang lolos, mereka dapat digunakan dengan baik . Itu terlihat seperti dokumen dengan batas halaman .

Setara dalam javascript adalah:

var text = `
This
Is
A
Multiline
String
`;

Berikut spesifikasinya . Lihat dukungan browser di bagian bawah halaman ini . Berikut ini beberapa contohnya .

Ini berfungsi di IE, Safari, Chrome dan 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>

Anda dapat menggunakan TypeScript (JavaScript SuperSet), itu mendukung string multiline, dan transpiles kembali ke JavaScript murni tanpa overhead:

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

alert(templates.myString);

Jika Anda ingin mencapai hal yang sama dengan JavaScript biasa:

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)

Perhatikan bahwa iPad / Safari tidak mendukung 'functionName.toString()'

Jika Anda memiliki banyak kode lawas, Anda juga dapat menggunakan varian JavaScript biasa di TypeScript (untuk tujuan pembersihan):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

dan Anda dapat menggunakan objek multiline-string dari varian JavaScript polos, tempat Anda meletakkan templat ke file lain (yang dapat Anda gabungkan dalam bundel).

Anda dapat mencoba TypeScript di
http://www.typescriptlang.org/Playground

Cara ES6 melakukannya adalah dengan menggunakan literal templat:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Lebih banyak referensi di sini

ES6 memungkinkan Anda untuk menggunakan backtick untuk menentukan string pada banyak baris. Ini disebut Templat Literal. Seperti ini:

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

Menggunakan backtick berfungsi di NodeJS, dan didukung oleh Chrome, Firefox, Edge, Safari, dan Opera.

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

Cara termudah untuk membuat string multiline dalam Javascrips adalah dengan menggunakan backticks (``). Ini memungkinkan Anda membuat string multiline tempat Anda dapat memasukkan variabel ${variableName}.

Contoh:

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

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

my age is: ${age}
`;

console.log(multilineString);

kompatibilitas:

• Itu diperkenalkan di ES6//es2015
• Sekarang secara native didukung oleh semua vendor browser utama (kecuali internet explorer)

Periksa kompatibilitas yang tepat dalam dokumen Mozilla di sini

Versi saya dari penggabungan berbasis array untuk string 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'));

Ini telah bekerja dengan baik untuk saya, terutama karena saya sering memasukkan nilai ke dalam html yang dibangun dengan cara ini. Tetapi memiliki banyak keterbatasan. Lekukan akan menyenangkan. Tidak harus berurusan dengan tanda kutip bersarang akan sangat bagus, dan hanya besarnya itu menggangguku.

Apakah .push () untuk menambah array membutuhkan banyak waktu? Lihat jawaban terkait ini:

( Apakah ada alasan pengembang JavaScript tidak menggunakan Array.push ()? )

Setelah melihat ini (berlawanan) uji coba berjalan, sepertinya .push () baik untuk array string yang tidak akan tumbuh lebih dari 100 item - saya akan menghindarinya dengan menambahkan indeks untuk array yang lebih besar.

Anda dapat menggunakannya +=untuk menyatukan string Anda, sepertinya tidak ada yang menjawab itu, yang akan dapat dibaca, dan juga rapi ... sesuatu seperti ini

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

dapat juga ditulis sebagai

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

console.log(hello);

Juga perhatikan bahwa, ketika memperluas string melalui beberapa baris menggunakan backslash maju di akhir setiap baris, karakter tambahan apa pun (kebanyakan spasi, tab, dan komentar ditambahkan secara tidak sengaja) setelah forward backslash akan menyebabkan kesalahan karakter yang tidak terduga, yang saya perlukan waktu satu jam untuk menemukan di luar

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

Tolong untuk cinta internet menggunakan penggabungan string dan memilih untuk tidak menggunakan solusi ES6 untuk ini. ES6 TIDAK didukung di seluruh papan, seperti CSS3 dan browser tertentu lambat beradaptasi dengan gerakan CSS3. Gunakan JavaScript polos, pengguna akhir Anda akan berterima kasih.

Contoh:

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

Anda harus menggunakan operator gabungan '+'.

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

Dengan menggunakan \nkode sumber Anda akan terlihat seperti -

Ini 
 Situs adalah
 <br> multiline
 <br> string

Dengan menggunakan <br>output browser Anda akan terlihat seperti -

Ini
adalah
multiline
tali.

Saya pikir solusi ini harus bekerja di IE, Chrome, Firefox, Safari, Opera -

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

Menggunakan Javascript Murni:

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

Bersulang!!

Coba saja jawaban Anonim dan temukan ada sedikit trik di sini, itu tidak berfungsi jika ada spasi setelah backslash \
Jadi solusi berikut tidak bekerja -

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

Tetapi ketika ruang dihapus itu berfungsi -

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

alert(x.test);​

Semoga ini bisa membantu !!