Membuat string multiline dalam JavaScript


2612

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


Lihat ini pada berbagai cara untuk mencapai hal yang sama. Saya telah menambahkan kinerja setiap metode juga stackoverflow.com/a/23867090/848841
Vignesh Subramanian

Jawaban:


3319

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"

231
Berhati-hatilah: beberapa browser akan menyisipkan baris baru di lanjutan, sebagian tidak.
staticsan

35
Visual Studio 2010 tampaknya bingung dengan sintaks ini juga.
jcollum

47
@Nate Ini ditentukan dalam bagian ECMA-262 Edisi ke-5 7.8.4 dan disebut LineContinuation : "Karakter terminator garis tidak dapat muncul dalam string literal, kecuali sebagai bagian dari LineContinuation untuk menghasilkan urutan karakter kosong. Cara yang benar untuk menyebabkan karakter terminator baris untuk menjadi bagian dari nilai String dari string literal adalah dengan menggunakan urutan escape seperti \ n atau \ u000A. "
sekitar

16
Saya tidak mengerti mengapa Anda melakukan ini ketika browser memperlakukannya dengan tidak konsisten. "line1 \ n" + "line2" melintasi beberapa baris sudah cukup mudah dibaca dan Anda dijamin perilaku yang konsisten.
SamStephens

11
"Dukungan browser tidak apa-apa" ... tidak didukung oleh IE11 - tidak OK
Tom Andraszek

1318

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

19
Saya tidak mengerti rekomendasi Google. Semua browser kecuali yang sangat lama mendukung backslash diikuti oleh pendekatan baris baru, dan akan terus melakukannya di masa depan untuk kompatibilitas mundur. Satu-satunya waktu Anda harus menghindarinya adalah jika Anda perlu memastikan bahwa satu dan hanya satu baris baru (atau tidak ada baris baru) ditambahkan di akhir setiap baris (lihat juga komentar saya pada jawaban yang diterima).
Matt Browne

6
Perhatikan bahwa string templat tidak didukung di IE11, Firefox 31, Chrome 35, atau Safari 7. Lihat kangax.github.io/compat-table/es6
EricP

29
@MattBrowne Rekomendasi Google sudah didokumentasikan oleh mereka, sesuai dengan alasan pentingnya: (1) Ruang putih di awal setiap baris [dalam contoh, Anda tidak ingin spasi putih di string Anda tetapi terlihat lebih bagus dalam kode ] (2) spasi putih setelah slash akan menghasilkan kesalahan yang rumit [jika Anda mengakhiri garis dengan \ bukannya `\` sulit untuk diperhatikan] dan (3) sementara sebagian besar mesin skrip mendukung ini, itu bukan bagian dari ECMAScript [yaitu alasannya menggunakan fitur yang tidak standar?] Ingat ini adalah panduan gaya, yaitu tentang membuat kode mudah dibaca + memelihara + debug: bukan hanya "berfungsi" dengan benar.
ShreevatsaR

1
luar biasa bahwa setelah bertahun-tahun ini penggabungan string masih merupakan cara terbaik / teraman / paling patuh untuk melakukannya. templat literal (jawaban di atas) tidak berfungsi di IE dan melarikan diri dari baris hanya kekacauan yang akan segera Anda sesali
Tiago Duarte

1
Menemukan cara yang sulit bahwa Android versi lama tidak mendukung backticks jadi jika Anda memiliki aplikasi Android menggunakan webView backticks Anda menyebabkan aplikasi Anda tidak berjalan!
Michael Fever

684

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

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

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


34
Tolong jangan gunakan pola array. Ini akan lebih lambat daripada penggabungan string yang lama dan polos dalam banyak kasus.
BMiner

73
Pola array lebih mudah dibaca dan kehilangan kinerja untuk suatu aplikasi sering diabaikan. Seperti yang ditunjukkan oleh tes perf, bahkan IE7 dapat melakukan puluhan ribu operasi per detik.
Benjamin Atkin

19
Memberi +1 untuk alternatif elegan yang tidak hanya berfungsi dengan cara yang sama di semua peramban, tetapi juga tahan masa depan.
Pavel

26
@ KooiInc Tes Anda dimulai dengan larik yang sudah dibuat, yang membuat hasilnya miring. Jika Anda menambahkan inisialisasi array, penggabungan lurus lebih cepat jsperf.com/string-concat-without-sringbuilder/7 Lihat stackoverflow.com/questions/51185/… Sebagai trik untuk baris baru, mungkin OK, tapi pasti melakukan lebih banyak pekerjaan daripada yang seharusnya
Juan Mendes

9
@BMiner: 1) "Optimalisasi prematur adalah akar dari semua kejahatan" - Donald Knuth, dan 2) 'keterbacaan' ada di mata yang melihatnya
Paul Bennett

348

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


232
Apa!? membuat dan mendekompilasi suatu Fungsi untuk meretas komentar multiline menjadi string multiline? Nah, itu jelek.
fforw

4
jsfiddle.net/fqpwf bekerja di Chrome 13 dan IE8 / 9, tetapi tidak untuk FF6. Saya benci mengatakannya, tapi saya menyukainya, dan jika itu bisa menjadi fitur yang disengaja dari setiap browser (sehingga tidak akan hilang), saya akan menggunakannya.
Jason Kleban

2
@ uosɐſ: agar disengaja, harus dalam spesifikasi; atau lebih luas digunakan, bahwa pembuat browser tidak ingin menghapus fitur "tidak disengaja" ini. Terima kasih atas eksperimennya ... Cobalah beberapa kopi script.
Jordão

1
a.toString (). substring (15, a.toString (). length-4) juga berfungsi, dan tidak perlu memindai seluruh string (meskipun kemungkinan besar akan terjadi dan penghitungannya membuatnya tetap melakukan pemindaian lain. Oh well .)
Lodewijk

2
Sangat berguna. Saya menggunakannya untuk tes unit (Jasmine), tetapi menghindarinya untuk kode produksi.
Jason


139

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)

37
Ini benar-benar menakutkan. Saya menyukainya (walaupun Anda mungkin perlu melakukan pertandingan regex karena saya tidak yakin seberapa tepat ruang putih toString()itu
Kevin Cox

Solusi ini sepertinya tidak berfungsi di firefox, mungkin ini fitur keamanan untuk browser? EDIT: Nevermind, itu hanya tidak berfungsi untuk Firefox Versi 16.
Bill Software Engineer

45
Waspadalah terhadap minifiers yang menghapus komentar ...: D
jondavidjohn

3
Inilah mengapa kita tidak bisa memiliki hal-hal yang baik.
Danilo M. Oliveira

4
Anda dapat melakukan beberapa hal aneh di tanah javascript. Meskipun dalam semua kejujuran, Anda tidak boleh menggunakan ini.
Lukas

88

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?


23
Di mana pun Anda tidak ingin meletakkan string ke elemen skrip terpisah dan jauh.
Lodewijk

9
Keberatan yang valid! Itu tidak sempurna. Tetapi untuk templat, pemisahan itu tidak hanya baik-baik saja, tetapi bahkan mungkin dianjurkan.
Peter V. Mørch

1
Saya lebih suka membagi semuanya lebih dari 80/120 karakter menjadi multiline, saya khawatir itu lebih dari sekadar templat. Sekarang saya lebih suka sintaks 'line1' + 'line2'. Ini juga yang tercepat (walaupun ini mungkin menyaingi teks yang sangat besar). Ini trik yang bagus.
Lodewijk

27
sebenarnya, ini HTML bukan Javascript: - /
CpILL

5
namun, tugas mendapatkan string multiline dalam javascript dapat dilakukan dengan cara ini
Davi Fiamenghi

52

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:

masukkan deskripsi gambar di sini


2
Terima kasih untuk ini! Ini satu-satunya jawaban yang saya temukan yang menyelesaikan masalah saya, yang melibatkan string yang tidak diketahui yang mungkin berisi kombinasi tanda kutip tunggal dan ganda yang langsung dimasukkan ke dalam kode tanpa peluang pra-pengkodean. (itu berasal dari bahasa templating yang menciptakan JS - masih dari sumber tepercaya dan bukan pengiriman formulir, jadi ini tidak benar-benar gila).
octern

Ini adalah satu-satunya metode yang benar-benar bekerja bagi saya untuk membuat variabel string javascript multi-baris dari Java String.
beginner_

4
Bagaimana jika string itu HTML?
Dan Dascalescu

4
$ ('# UniqueID').
Content

1
@Pacerier Semua yang saya baca, dari Google dan juga situs lain, mengatakan bahwa saat ini Google mengindeks display:nonekonten, kemungkinan besar karena popularitas front-end bergaya JavaScript. (Misalnya, halaman FAQ dengan fungsi sembunyikan / tampilkan.) Namun Anda perlu berhati-hati, karena Google mengatakan mereka dapat menghukum Anda jika konten tersembunyi tampaknya dirancang untuk secara artifisial meningkatkan peringkat SEO Anda.
Gavin

31

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

11
Saya pikir Anda baru saja memuntahkan apa yang sudah ada di halaman selama lima tahun, tetapi dengan cara yang lebih bersih.
RandomInsano

bukankan slash concatenation juga termasuk spasi di awal baris?
f.khantsis

29

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 pikir strategi ini bersih & jauh kurang dimanfaatkan. jsrender menggunakan ini.
xdhmoore

Saya menggunakan ini dengan innerText iso innerHTML, Tapi bagaimana saya memastikan bahwa spasi putih dipertahankan?
David Nouls

Juga ajax kueri jika Anda menggunakannya. Anda dapat mencoba mengubah tajuk Anda. xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");Saya tidak ingat memiliki masalah lain selain salah ketik komentar di JS. Ruang di mana tidak ada masalah.
jpfreire

24

Saya suka sintaks dan indendasi ini:

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

(tapi sebenarnya tidak bisa dianggap sebagai string multiline)


3
Saya menggunakan ini, kecuali saya meletakkan '+' di akhir baris sebelumnya, untuk memperjelas pernyataan tersebut dilanjutkan pada baris berikutnya. Cara Anda membuat barisan indentasi lebih merata.
Sean

@Sean saya menggunakan ini juga, dan saya masih lebih suka menempatkan '+' di awal setiap baris baru ditambahkan, dan final ';' pada baris baru, karena saya menemukannya lebih 'benar'.
AgelessEssence

7
menempatkan tanda + di awal memungkinkan seseorang untuk mengomentari baris itu tanpa harus mengedit baris lain ketika baris pertama / terakhir dari urutan tersebut.
moliad

3
Saya lebih suka tanda + di bagian depan juga karena secara visual saya tidak perlu memindai ke akhir baris untuk mengetahui yang berikutnya adalah kelanjutan.
Daniel Sokolowski

18

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>
*/});

1
Dukungan ini dalam nodejs, menggunakan di browser harus diperhatikan.
Huei Tan

3
@HueiTan Documents menyatakan ini juga berfungsi di browser. Yang masuk akal - hanya saja Function.prototype.String().
mikemaccana

ya tapi katanya "Walaupun itu berfungsi dengan baik di browser, ini terutama dimaksudkan untuk digunakan di Node.js. Gunakan dengan risiko Anda sendiri. Meskipun itu berfungsi dengan baik di browser, ini terutama dimaksudkan untuk digunakan di Node.js. Gunakan dengan risiko Anda sendiri. " (Just becareful XD)
Huei Tan

@HueiTanYep saya membaca bagian itu. Tapi Function.prototype.toString () cukup stabil dan terkenal.
mikemaccana

1
Jawaban terbaik bagi saya karena setidaknya mencapai multiline tanpa semua sampah di tengah (Sampah di awal dan akhir yang bisa saya tangani).
Damien Golding

14

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>


13
Mengerikan sekali. +1. Dan Anda dapat menggunakan document.currentScript alih-alih getElement ...
Orwellophile

1
Unduhan "Anda" di chrome untuk osx
mplungjan

1
jsfiddle-fix - Saya pasti sudah mendefinisikan "Anda" secara global di konsol saya. Bekerja sekarang (chrome / osx). Yang menyenangkan tentang menambahkan komentar untuk var adalah bahwa Anda tidak dalam konteks fungsi, jsfiddle-fungsi-heredoc meskipun hal fungsi akan menjadi dingin untuk metode kelas. mungkin lebih baik untuk meneruskannya ganti objek {this: that}. senang untuk mendorong sesuatu yang gila sampai batasnya :)
Orwellophile

1
Lupakan para pembenci. Ini adalah satu-satunya bar jawaban yang benar ES6. Semua jawaban lain membutuhkan gabungan, perhitungan atau semacamnya, atau melarikan diri. Ini sebenarnya sangat keren dan saya akan menggunakannya sebagai cara untuk menambahkan dokumentasi ke permainan yang saya kerjakan sebagai hobi. Selama trik ini tidak digunakan untuk apa pun yang bisa memicu bug (saya bisa melihat bagaimana seseorang akan pergi "Titik koma, derp. Mari kita beri komentar di baris berikutnya." Dan kemudian itu merusak kode Anda.) Tapi, apakah itu benar-benar masalah besar dalam game hobi saya? Tidak, dan saya bisa menggunakan trik keren untuk sesuatu yang bermanfaat. Jawaban yang bagus
Thomas Dignan

2
Saya tidak pernah cukup berani untuk menggunakan teknik ini dalam kode produksi, tetapi di mana saya sering menggunakannya dalam pengujian unit, di mana seringkali lebih mudah untuk membuang nilai beberapa struktur sebagai string (cukup panjang) dan membandingkannya dengan apa yang 'seharusnya'.
Ben McIntyre

10

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

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.


Ini komentar pertama saya yang sebenarnya. Saya telah mendapatkan hak upvote 2 hari yang lalu jadi saya segera memutus satu jawaban yang saya sebutkan di atas. Terima kasih kepada siapa pun yang telah membantu upaya saya yang lemah untuk membantu.
Tyler

Terima kasih kepada semua orang yang benar-benar meningkatkan jawaban ini: Saya sekarang memiliki cukup hak istimewa untuk mengirim komentar normal! Jadi terima kasih lagi
Tyler

10

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();

9

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.


9

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

masukkan deskripsi gambar di sini


2
Bukankah ini akan menambah ruang kosong yang tidak tersedia?
TomByrer

1
@ TomByrer Ya, pengamatan yang baik. Ini hanya baik untuk string yang tidak Anda pedulikan ruang kosong, misalnya HTML.
seo


8

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>

6
Pikirkan saja itu. Apakah Anda pikir itu valid? Tidakkah Anda pikir itu dapat menyebabkan masalah tampilan?
Sk8erPeter

5
Mengapa downvotes? Ini adalah jawaban yang kreatif, jika tidak terlalu praktis!
dotancohen

2
tidak, tidak. Orang sebaiknya menggunakan templat: $ .tmpl () ( api.jquery.com/tmpl ), atau EJS ( embeddedjs.com/getting_started.html ), dll. Salah satu alasan untuk downvotes adalah bahwa itu sangat jauh dari kode yang valid dan menggunakan ini dapat menyebabkan masalah tampilan yang sangat besar.
Sk8erPeter

Saya harap tidak ada yang pernah menggunakan jawaban ini dalam praktek, tapi itu ide yang bagus
DCShannon

7

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


Adakah dokumentasi tentang batasan iPad / Safari? MDN tampaknya berpikir itu semua baik - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Campbeln

@ Campbeln: Rekan kerja memberitahu saya ini (dia menggunakan kode). Belum mengujinya sendiri. Mungkin juga tergantung pada versi iPad / Safari - jadi mungkin tergantung.
Stefan Steiger

6

Cara ES6 melakukannya adalah dengan menggunakan literal templat:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Lebih banyak referensi di sini


Jawaban ini tidak hanya kecil, tidak lengkap dan berformat buruk, tetapi juga tidak menambahkan apa pun pada jawaban sebelumnya. Menandainya dan melompat untuk dihapus.
Victor Schröder


4

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


Apakah ini sekarang kompatibel dengan semua browser terbaru? Atau ada beberapa browser yang masih tidak mendukung sintaks ini?
cmpreshn

Maaf atas komentar saya yang sangat terlambat, edit jawaban yang ditambahkan info kompatibilitas;)
Willem van der Veen

3

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.


3

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

3

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

3

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


3
sementara saya setuju dengan poin Anda, saya tidak akan menyebut javascript "baik" ol
user151496

2

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.

1

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


<xmp>sangat usang. Mungkin diizinkan dalam HTML, tetapi tidak boleh digunakan oleh penulis mana pun. Lihat stackoverflow.com/questions/8307846/…
Bergi

@Bergi, Anda benar .. dan menggunakan <pre>;dengan lolos tidak akan membantu dalam solusi saya .. Saya menemukan masalah yang sama hari ini dan mencoba mencari solusi .. tapi dalam kasus saya, saya menemukan satu cara yang sangat n00bish untuk memperbaiki masalah ini dengan menempatkan output dalam komentar html alih-alih <xmp> atau tag lainnya. lol. Saya tahu ini bukan cara standar untuk melakukan ini, tetapi saya akan mengerjakan masalah ini lagi besok pagi .. Bersorak-sorai !!
Aditya Hajare

Sayangnya bahkan dengan style="display:none"Chrome mencoba memuat <img>gambar apa pun yang disebutkan dalam contoh blok.
Jesse Glick

0

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


7
Yah jelas jika Anda memiliki ruang setelah backslash, backslash lolos dari ruang. Seharusnya untuk menghindari linebreak, bukan ruang.
Sejanus
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.