Soru JavaScript'te çok satırlı dizeler oluşturma


Ruby'de aşağıdaki kodum var. Bu kodu JavaScript’e dönüştürmek istiyorum. JS'de eşdeğer kod nedir?

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

1924
2018-04-30 02:11


Menşei


Görmek stackoverflow.com/a/6247331/632951 - Pacerier
Bunu başarmak için farklı yollarla kontrol edin. Her yöntemin performansını da ekledim stackoverflow.com/a/23867090/848841 - Vignesh Subramanian


Cevaplar:


Güncelleştirme:

ECMAScript 6 (ES6) yeni bir türden sözel, yani şablon değişmezleri. Pek çok özelliği var, diğerleri arasında değişken enterpolasyon var, ama en önemlisi bu soru için çok satırlı olabilirler.

Bir şablon literal tarafından sınırlanır backticks:

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

(Not: HTML'yi dizelerde kullanmayı savunmuyorum)

Tarayıcı desteği tamamama sen kullanabilirsin transpilers daha uyumlu olmak.


Orijinal es5 cevap:

Javascript'in burada bir belge sözdizimi yok. Bununla birlikte, söz konusu yeni satırdan kurtulabilirsiniz;

"foo \
bar"

2303
2018-04-30 02:15



Uyarın: Bazı tarayıcılar devamlı olarak yeni satırlar ekleyecek, bazıları olmayacak. - staticsan
Visual Studio 2010 da bu sözdizimi ile karıştırılmış gibi görünüyor. - jcollum
dresende: Bu iki kod satırı. Bu tek bir ifade. - Anonymous
@Nate belirtildi ECMA-262 5. Baskı bölüm 7.8.4 ve çağrıldı LineContinuation : "Bir satır sonlandırıcı karakteri, bir dizinin bir parçası dışında, bir dizede değişmez. LineContinuation boş karakter dizisini üretmek için. Bir satır sonlandırıcı karakterinin bir dize değişmezinin String değerinin bir parçası olmasına yol açmanın doğru yolu, \ n veya \ u000A gibi bir çıkış dizisi kullanmaktır. - some
Tarayıcılar tutarsız bir şekilde ele aldığında bunu neden yaptığınızı görmüyorum. "line1 \ n" + "line2", birden çok satırda yeterince okunabilir ve tutarlı bir davranış garanti edersiniz. - SamStephens


Güncelleştirme:

İlk cevap olarak, ES6 / Babel ile, artık backticks kullanarak çok satırlı dizeler oluşturabilirsiniz:

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

İnterpolasyon değişkenleri, back-tick sınırlandırılmış dizeleriyle gelen popüler yeni bir özelliktir:

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

Bu sadece birleşme noktasına geçer:

user.name + ' liked your post about strings'

Orijinal es5 cevap:

Google’ın JavaScript stili rehberi yeni satırlardan kaçmak yerine dize birleştirme kullanılmasını önerir:

Bunu yapma:

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

Her hattın başlangıcındaki beyaz boşluk derleme zamanında güvenli bir şekilde sıyrılmaz; eğik çizgiden sonra boşluk, zor hatalarla sonuçlanır; ve çoğu betik motoru bunu desteklerken, ECMAScript'in bir parçası değildir.

Bunun yerine dize birleştirme kullanın:

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



Bu, Experimental JavaScript'i etkinleştirdikten sonra bile pencereler için kanarya kromunda çalışmıyor - Inuart
Google’ın önerisini anlamıyorum. Oldukça eski olanlar dışındaki tüm tarayıcılar, ters eğik çizgiyi ve ardından yeni çizgi yaklaşımını destekler ve ileride geriye dönük uyumluluk için bunu yapmaya devam eder. Bundan kaçınmanız gereken tek şey, her satırın sonunda bir ve bir satırın (veya yeni satırın) eklendiğinden emin olmanız gerektiğidir (ayrıca kabul edilen yanıt hakkındaki yorumuma da bakın). - Matt Browne
Bu maddeleri denemek isteyenler, [Chrome Canary] [1] [1] adresini kontrol ettiğinizden emin olun: google.com/intl/en/chrome/browser/canary.html - Sazid
Şablon dizelerinin IE11, Firefox 31, Chrome 35 veya Safari 7'de desteklenmediğini unutmayın. Bkz. kangax.github.io/compat-table/es6 - Dwayne
@MattBrowne Google'ın önerisi, nedenlerin önem sırasına göre kendileri tarafından zaten belgelenmiştir: (1) Her satırın başlangıcındaki boşluk (örnekte, bu boşluğun dizinin içinde olmasını istemiyorsunuz ancak kodda daha güzel görünüyor) ] (2) bölü çizgisinden sonraki boşluklar, zorlu hatalarla sonuçlanır. \ `\` bunu fark etmek zordur] ve (3) çoğu betik motoru bunu desteklerken, ECMAScript'in bir parçası değildir [i.e. Neden standart olmayan özellikler kullanırız?] Bu kodun okunması + bakımı + hata ayıklaması yapmakla ilgili olan bir stil kılavuzu olduğunu unutmayın: sadece "işe yaramaz" doğru değil. - ShreevatsaR


desen text = <<"HERE" This Is A Multiline String HERE js'de mevcut değil (eski eski Perl günlerinde bunu hatırlıyorum).

Karmaşık veya uzun çok satırlı dizeleriyle denetimi sağlamak için bazen bir dizi modeli kullanırım:

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

ya da anonim desen zaten kodunuzda çirkin bir blok olabilir (newline kaçış) gösterdi:

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

İşte başka garip ama çalışan 'hile'1:

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

harici düzenleme: jsfiddle

[2015 ek]
ES6, birden çok satırda yayılan dizeleri destekler şablon dizeleri:

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 Not: Bu, kodunuzu küçültme / gizleme işleminden sonra kaybolacaktır.


634
2018-04-30 07:22



Lütfen dizi desenini kullanmayın. Çoğu durumda düz eski dize birleştirme işleminden daha yavaş olacaktır. - BMiner
Gerçekten mi? jsperf.com/join-concat/24 - KooiInc
Dizi modeli daha okunabilir ve bir uygulama için performans kaybı genellikle ihmal edilebilir. Bu mükemmel testin gösterdiği gibi, IE7 bile saniyede on binlerce işlemi yapabilir. - Ben Atkin
Sadece tüm tarayıcılarda aynı şekilde çalışan, aynı zamanda geleceğe dönük olmayan zarif bir alternatif için +1. - Pavel
@KooiInc Testleriniz, halihazırda oluşturulmuş olan ve sonuçları çarpıtan diziyle başlar. Dizinin başlatılmasını eklerseniz, düz birleştirme daha hızlıdır jsperf.com/string-concat-without-sringbuilder/7 Görmek stackoverflow.com/questions/51185/... Yeni satırlar için bir numara olarak, Tamam olabilir, ama kesinlikle daha fazla iş yapması gereken - Juan Mendes


Sen kutu saf JavaScript'te çok satırlı dizeleri var.

Bu yöntem, işlevlerin serileştirilmesine dayanır. uygulamaya bağlı olarak tanımlanmış. Çoğu tarayıcıda çalışır (aşağıya bakın), ancak gelecekte çalışmaya devam edeceğine dair bir garanti yoktur, bu yüzden ona güvenmeyin.

Aşağıdaki işlevi kullanarak:

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

Buradaki belgeleriniz şöyle olabilir:

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

Yöntem, aşağıdaki tarayıcılarda başarıyla test edilmiştir (söz konusu değil = test edilmemiştir):

  • IE 4 - 10
  • Opera 9.50 - 12 (9'da değil)
  • Safari 4 - 6 (3'te değil)
  • Chrome 1 - 45
  • Firefox 17 - 21 (16'da değil)
  • Rekonq 0.7.0 - 0.8.0
  • Konqueror 4.7.4'te desteklenmiyor

Yine de, kıymetçinize dikkat edin. Yorumları kaldırmaya eğilimlidir. İçin YUI kompresörüile başlayan bir yorum /*!(Kullandığım gibi) korunacak.

Bence bir gerçek çözüm kullanmak olurdu CoffeeScript.


327
2018-04-06 18:16



+ 1 + 1 Zeki! (Node.JS içinde çalışır) - George Bailey
Ne!? Çok satırlı bir dizgeyi çok satırlı bir dizeye dönüştürmek için bir İşlev oluşturmak ve yeniden derlemek şimdi işte çirkin. - fforw
Aslında ötesinde çirkin ... Yine de, hayır Dekompilasyon yer ... - Jordão
jsfiddle.net/fqpwf Chrome 13 ve IE8 / 9'da çalışıyor, ancak FF6 değil. Bunu söylemekten nefret ediyorum, ama hoşuma gidiyor ve eğer her tarayıcının kasıtlı bir özelliği olabilirse (ki kaybolmaz), onu kullanırdım. - Jason Kleban
Son derece kullanışlı. Bunu (Jasmine) birim testleri için kullanıyorum ama üretim kodu için kullanmaktan kaçınıyorum. - Jason


Bunu yapabilirsiniz...

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

187
2018-03-21 21:05



İlk örnek harika ve basittir. \ 'Yaklaşımından çok daha iyi, tarayıcının ters eğik çizgiyi kaçış karakteri olarak ve çok satırlı karakter olarak nasıl kullanacağından emin değilim. - Matt K
CDATA kodu (E4X) modası geçmiş ve yakında Firefox'ta çalışmayı bırakacak. - Brock Adams
e4x.js geleceğe yönelik iyi bir çözüm olurdu - Paul Sweatte


Çok çizgili bir dizginin bu çok yetenekli bir yöntemle ortaya çıktım. Bir işlevi bir dizgeye dönüştürdüğünüzde, işlevin içerisindeki tüm yorumları döndürdüğünüzde, yorumları çok satırlı bir açıklama / ** / kullanarak dizginiz olarak kullanabilirsiniz. Sadece uçları kesmek zorundasın ve dizinin var.

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



Bu kesinlikle dehşet verici. Ben onu seviyorum (çünkü bir regex maçı yapmak gerekebilir, çünkü ne kadar kesin bir boşluk için emin değilim toString() olduğunu. - Kevin Cox
stackoverflow.com/a/5571069/499214 - John Dvorak
Bu çözüm, firefox'ta çalışmıyor gibi görünüyor, belki de tarayıcı için bir güvenlik özelliği var mı? DÜZENLEME: Nevermind, sadece Firefox Sürüm 16 için çalışmıyor. - Bill
Ayrıca yorum yapan striptizcilere de dikkat edin ...: D - jondavidjohn
@KevinCox kullanabilirsiniz trim(). - schmijos


Bunu görmediğime şaşırdım çünkü test ettiğim her yerde çalışıyor ve örn. şablonlar:

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

HTML'nin bulunduğu bir ortam bilen var mı ama çalışmıyor mu?


82
2017-08-17 14:25



Dizelerinizi ayrı ve uzak komut dosyaları içine koymak istemediğiniz herhangi bir yer. - Lodewijk
Geçerli bir itiraz! Mükemmel değil. Ancak şablonlar için, bu ayrılık sadece iyi değil, belki de teşvik edilir. - Peter V. Mørch
Her şeyi 80/120 karakterden çok satırlara ayırmayı tercih ediyorum, korkarım ki bu sadece şablonlardan daha fazlası. Şimdi 'line1' + 'line2' sözdizimini tercih ediyorum. Aynı zamanda en hızlısıdır (ancak bu gerçekten büyük metinler için rekabet edebilir). Yine de güzel bir numara. - Lodewijk
aslında, bu HTML değil Javascript: - / - CpILL
Ancak, javascript bir çok satırlı dize alma görevi bu şekilde yapılabilir - Davi Fiamenghi


Bunu bir div vererek, onu gizleyerek ve ihtiyacım olduğunda jQuery tarafından div kimliğini çağırarak çözdüm.

Örneğin.

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

Sonra dize almam gerektiğinde, sadece aşağıdaki jQuery'yi kullanıyorum:

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

Metni birden çok satırda döndürür. Eğer ararsam

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

Alırım:

enter image description here


46
2017-08-23 18:30



Bunun için teşekkürler! Sorunu çözdüğüm tek cevabı, kodun içine kodlama yapılmadan tek ve çift tırnakların doğrudan eklenmesini içeren bilinmeyen dizeleri içerir. (JS'yi oluşturan bir şablonlama dilinden geliyor - hala güvenilir bir kaynaktan değil, form gönderiminden değil, bu yüzden TAMAMEN bunaltıcı değil). - octern
Bu, bir Java Dizesinden çok satırlı bir javascript dizesi değişkeni oluşturmak için aslında benim için çalışan tek yöntemdi. - beginner_
Dize HTML ise ne olur? - Dan Dascalescu
$ ( '# Uniqueıd'). Içeriği () - mplungjan
@Pacerier Google’dan ve diğer sitelerden okuduğum her şey, bugünlerde Google’ın dizinin olduğunu söylüyor display:none JavaScript tarzı ön uçların popülaritesinden dolayı büyük olasılıkla içerik. (Örneğin, gizleme / gösterme işlevine sahip bir SSS sayfası.) Bununla birlikte, dikkatli olmanız gerekir; çünkü Google, gizli içeriğin SEO sıralamalarınızı yapay olarak şişirmek için tasarlandığı takdirde sizi cezalandırabileceklerini söylüyor. - Gavin