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

tarafından oluşturulan soru Wed, May 8, 2013 12:00 AM

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

 
text = <<"HERE"
This
Is
A
Multiline
String
HERE
    
2271
  1. Bkz. stackoverflow.com/a/6247331/632951
    2014-04-30 19: 25: 50Z
  2. Bunu başarmanın farklı yollarını inceleyin. Her yöntemin performansını da ekledim stackoverflow.com/a/23867090/848841
    2014-07-17 05: 42: 29Z
  3. 30 Yanıtlar                              30                         

    Güncelleme:

    ECMAScript 6 (ES6), yeni bir edebi tür ortaya çıkardı, yani şablon hazır bilgisi . Birçok özelliğe sahipler, diğerleri arasında değişken enterpolasyon var, ancak en önemlisi bu soru için çok satırlı olabilirler.

    Bir şablon değişmezi backticks ile sınırlandırılır:

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

    (Not: Dizelerde HTML kullanmayı savunmuyorum)

    Tarayıcı desteği iyi durumda , ancak alıcıların daha uyumlu olması.


    Orijinal ES5 cevabı:

    Javascript burada bir belge sözdizimine sahip değil. Bununla birlikte, değişmeyen yeni satırdan kaçabilirsiniz, ki bu da yaklaşıyor:

     
    "foo \
    bar"
    
        
    2809
    2018-02-14 16: 47: 51Z
    1. Dikkat edin: bazı tarayıcılar devamında yeni çizgiler ekleyecek, bazıları olmayacak.
      2009-04-30 02: 22: 58Z
    2. Visual Studio 2010 bu sözdizimiyle de karıştırılıyor gibi görünüyor.
      2011-04-17 21: 58: 58Z
    3. @ Nate ECMA-262 5. Baskı bölüm 7.8.4 ve LineContinuation olarak adlandırıldı:" Bir satır sonlandırıcı karakteri, bir dizgede değişmez Boş karakter dizisini üretmek için LineContinuation .Bir satır sonlandırıcı karakterinin bir dizgenin değişmez değerinin bir parçası olmasına neden olmanın doğru yolu \n veya \u000A gibi bir kaçış dizisi kullanmaktır. "
      2012-09-25 02: 28: 46Z
    4. Özet olarak, bu, en azından IE6’ya (ve muhtemelen daha önce) umursamadığınız sürece tüm tarayıcılarla uyumlu en basit yaklaşım gibi görünüyor. Her satırın sonuna fazladan yeni satır eklenebilir veya eklenmeyebilir. Hangi tarayıcıların /sürümlerin yeni satırlar eklediğini ve hangilerinin eklemediğini bilen var mı?
      2013-02-26 18: 35: 00Z
    5. Tarayıcılar tutarsız davrandığında bunu neden yaptığınızı anlamıyorum. Birden fazla satır boyunca "satır1 \n" + "satır2" yeterince okunabilir ve tutarlı bir davranış garanti edilir.
      2013-03-20 20: 14: 00Z

    ES6 Güncellemesi:

    İlk cevabın belirttiği gibi, ES6 /Babel ile artık basitçe backticks kullanarak çok satırlı dizeler oluşturabilirsiniz:

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

    Enterpolasyon değişkenleri, geriye tıklanmış dizelerle birlikte gelen popüler yeni bir özelliktir:

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

    Bu sadece aşağı naklibitiştirmek için:

     
    user.name + ' liked your post about strings'
    

    Orijinal ES5 cevabı:

      

    Google’ın JavaScript tarzı kılavuzu yerine ipucu birleştirme kullanmanız önerilir kaçış newlines:

         

    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 satırın başındaki boşluk, derleme zamanında güvenle sıyrılmaz; eğik çizgiden sonraki boşluk, zor hatalara neden olur; ve çoğu komut dosyası altyapısı 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.';
    
        
    1221
    2018-10-02 19: 26: 20Z
    1. bu, deneysel JavaScript'i etkinleştirdikten sonra bile pencereler için kanarya kromunda çalışmıyor.
      2012-11-20 01: 09: 08Z
    2. Google’ın önerisini anlamıyorum. Son derece eski olanlar hariç tüm tarayıcılar ters eğik çizgiyi ve ardından yeni satır yaklaşımını destekliyor ve gelecekte de geriye dönük uyumluluk için bunu yapmaya devam edecek. Bundan kaçınmanız gereken tek zaman, her satırın sonuna bir satırlık (veya yeni satır eklenmemiş) eklendiğinden emin olmanız gerektiğindeydi (ayrıca kabul edilen cevap hakkındaki yorumuma da bakın).
      2013-02-26 18: 40: 09Z
    3. Şablon dizelerinin IE11, Firefox 31, Chrome 35 veya Safari 7'de desteklenmediğini unutmayın. Bkz. kangax.github.io/compat-table/es6
      2014-05-24 02: 41: 39Z
    4. @ MattBrowne Google’ın önerisi, nedenlerinin önemi nedeniyle, onlar tarafından zaten belgelenmiştir: (1) Her satırın başındaki boşluk (örnekte, dizenizdeki boşluk değil, kodda daha güzel görünüyor] (2) eğik çizgiden sonra boşluk, hatalı hatalara neden olur [[\\`yerine \ ile bir satır sonlandırırsanız] ve (3) çoğu komut dosyası altyapısı bunu desteklerken, ECMAScript'in bir parçası değildir. neden standart olmayan özellikler kullanıyorsunuz?] Unutmayın, kodun okunmasını kolaylaştırmak + sürdürmek + hata ayıklamak yapmaktan ibaret bir stil rehberi: sadece "işe yarar" değil.
      2016-07-31 20: 29: 02Z
    5. şaşırtıcı, tüm bu yıllar sonra dize birleştirmenin hala bununla en iyi /en güvenli /en uyumlu yol olması şaşırtıcı. şablon değişmezleri (yukarıda verilen cevap) IE’de çalışmaz ve kaçan çizgiler kısa süre içinde pişman olacağınız bir karışıklıktır
      2016-11-11 12: 31: 51Z

    text = <<"HERE" This Is A Multiline String HERE kalıbı js'de mevcut değildir (eski Perl günlerimde çok kullandığımı hatırlıyorum).

    Karmaşık veya uzun çok satırlı dizelerle gözetimi sürdürmek için bazen bir dizi deseni kullanıyorum:

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

    veya anonim model zaten gösterilmiş (yeni satırdan çıkmış), bu kodunuzda çirkin bir engel olabilir:

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

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

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

    harici düzenleme: jsfiddle

    ES20xx , şablonunu kullanarak birden fazla satırda yayılan dizeleri destekler 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: kodunuzu küçültüp /şaşırtdıktan sonra bu kaybolacak

        
    659
    2018-08-24 06: 58: 06Z
    1. Lütfen dizi desenini kullanmayın. Çoğu durumda düz eski dize birleştirme işleminden daha yavaş olacaktır.
      2011-07-17 12: 39: 12Z
    2. 2011-07-17 13: 21: 01Z
    3. Dizi deseni daha okunaklıdır ve bir uygulama için performans kaybı genellikle ihmal edilebilir düzeydedir. Bu perf testinin gösterdiği gibi, IE7 bile saniyede on binlerce işlem yapabilir.
      2011-08-20 08: 16: 35Z
    4. + 1, yalnızca tüm tarayıcılarda aynı şekilde çalışan zarif bir alternatif için değil, aynı zamanda geleceğe yöneliktir.
      2012-05-21 06: 06: 14Z
    5. @ KooiInc Testleriniz daha önce oluşturulmuş bir diziyle başlar, sonuçları çarpıtır. Dizinin başlatılmasını eklerseniz, düz birleştirme daha hızlı olur. jsperf.com/string-concat -without-sringbuilder /7 Bkz. stackoverflow.com/questions/51185/… Newlines için bir numara olarak, tamam olabilir, ama kesinlikle yapması gerekenden daha fazla iş yapma
      2013-08-04 08: 02: 25Z

    Siz saf JavaScript'te çok satırlı dizelere sahip olabilirsiniz.

    Bu yöntem, uygulamaya bağlı olduğu tanımlanan işlevlerin seri hale getirilmesine dayanmaktadır . Çoğu tarayıcıda çalışır (aşağıya bakınız), ancak gelecekte çalışacağına dair hiçbir garanti yoktur, bu nedenle ona güvenmeyin.

    Aşağıdaki işlevi kullanma:

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

    Bu gibi belgeler burada olabilir:

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

    Yöntem, şu tarayıcılarda başarıyla test edildi (bahsedilmedi = test edilmedi):

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

    Yine de küçük sevgiline dikkat et. Yorumları kaldırma eğilimindedir. YUI kompresör için /*! ile başlayan bir yorum (kullandığım gibi) korunacaktır.

    Bir gerçek çözümünün CoffeeScript 'i kullanmak olacağını düşünüyorum.

        
    337
    2015-10-09 19: 00: 36Z
    1. + 1 + 1 Zeki! (Node.JS’de çalışır)
      2011-06-04 21: 57: 56Z
    2. Ne !? çok satırlı bir yorumu çok satırlı dize haline getirmek için bir İşlev oluşturma ve açma? Şimdi bu çirkin.
      2011-06-17 15: 49: 09Z
    3. Aslında çirkin ötesinde var ... Yine de, decompiling dahil yok ...
      2011-06-17 18: 39: 57Z
    4. jsfiddle.net/fqpwf Chrome'da çalışıyor 13 ve IE8 /9, fakat FF6 değildir. Söylemekten nefret ediyorum ama hoşuma gitti ve her tarayıcının kasıtlı bir özelliği olabilirse (kaybolmasın), kullanırdım.
      2011-09-09 21: 36: 57Z
    5. Son derece kullanışlı. (Yasemin) birim testleri için kullanıyorum, ancak üretim kodu için kaçınıyorum.
      2012-07-13 05: 23: 13Z

    Bunu yapabilirsin ...

     
    var string = 'This is\n' +
    'a multiline\n' + 
    'string';
    
        
    194
    2014-01-19 04: 14: 47Z
    1. İlk örnek harika ve basit. Tarayıcının ters eğik çizgiyi kaçış karakteri ve çok satırlı karakter olarak nasıl kullanacağından emin olamadığım için \yaklaşımından çok daha iyi.
      2011-11-03 19: 13: 15Z
    2. 2012-11-22 12: 16: 01Z
    3. e4x .js geleceğe dönük iyi bir çözüm olacaktır
      2013-01-19 02: 54: 47Z

    Çok çizgili bir dizgenin bu çok kasvetli arma yöntemiyle karşılaştım. Bir işlevi bir dizgeye dönüştürdüğünüz için, işlev içindeki yorumları da döndürür, çünkü çok satırlı bir yorum /** /kullanarak yorumları dizeniz olarak kullanabilirsiniz. Sadece ipuçlarını kesmeniz ve dizgenizin olması gerekir.

     
    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)
    
        
    133
    2013-03-21 21: 05: 15Z
    1. Bu kesinlikle korkutucu. Bayıldım (regex eşleşmesi yapmanız gerekebilir, çünkü toString() için boşlukların ne kadar kesin olduğundan emin değilim.
      2013-04-07 21: 53: 51Z
    2. 2013-06-05 11: 53: 16Z
    3. Ayrıca, yorumları soran küçük resimlere de dikkat edin ...: D
      2013-10-22 19: 07: 13Z
    4. Bu yüzden hoş şeyler alamayız.
      2018-10-15 18: 39: 53Z
    5. Javascript'te tuhaf şeyler yapabilirsiniz. Dürüst olmak gerekirse, bunu asla kullanmamalısın.
      2018-10-25 23: 25: 42Z

    Bunu göremediğim için şaşırdım, çünkü test ettiğim her yerde çalışıyor ve ör. şablonlar:

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

    HTML olan bir ortamdan bilen var mı ama çalışmıyor?

        
    88
    2012-01-03 19: 51: 51Z
    1. Dizelerinizi ayrı ve uzak komut dosyası öğelerine koymak istemediğiniz her yerde.
      2012-01-09 01: 12: 38Z
    2. Geçerli bir itiraz! Mükemmel değil. Ancak, şablonlar için bu ayrılık yalnızca tamam değil, hatta belki de teşvik edilir.
      2012-02-03 09: 03: 31Z
    3. 80/120 karakterleri aşan her şeyi multiline bölmeyi 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 (buna rağmen gerçekten büyük metinler için rakip olabilir). Yine de güzel bir numara.
      2012-02-03 22: 51: 18Z
    4. aslında, bu HTML Javascript değil: - /
      2012-05-22 08: 54: 45Z
    5. ancak, javascript'te çok satırlı bir dize alma görevi bu şekilde yapılabilir
      2013-07-30 21: 41: 11Z

    Bunu bir div çıktısı alarak, gizleyerek ve gerektiğinde jQuery ile div kimliğini arayarak çözdüm.

    örn.

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

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

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

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

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

    Anladım:

    resim tanımını buraya girin

        
    50
    2016-12-16 14: 20: 52Z
    1. Bunun için teşekkürler! Sorunumu çözdüğüm tek cevap, ön kodlama için hiçbir zaman doğrudan koda eklenmiş tek ve çift tırnaklı herhangi bir kombinasyonunu içerebilen bilinmeyen dizeleri içerir. (JS'yi oluşturan baştan çıkarıcı bir dilden geliyor - hala güvenilir bir kaynaktan ve form gönderiminden değil, bu yüzden TAMAMLANIYLA söylenmedi).
      2013-06-23 17: 19: 21Z
    2. Java Dizesi'nden çok satırlı bir javascript string değişkeni oluşturmak için gerçekten benim için çalışan tek yöntem buydu.
      2013-08-06 12: 06: 53Z
    3. Dize HTML ise?
      2014-01-24 08: 39: 37Z
    4. $('# UniqueID'). content ()
      2014-01-24 09: 28: 12Z
    5. @ Pacerier Google ve diğer sitelerden okuduğum her şey, Google’ın bugünlerde JavaScript’lerin popülerliğinden dolayı display:none içeriği dizine eklediğini söylüyor ön uçları. (Örneğin, gizleme /gösterme işlevine sahip bir SSS sayfası.) Yine de dikkatli olmanız gerekir; çünkü Google, gizli içeriğin SEO sıralamanızı yapay bir şekilde şişirmek için tasarlanmış gibi görünüp görünmeyeceğini cezalandırabileceğini söyler.
      2017-08-08 13: 12: 47Z

    Bunu başarmanın birden fazla yolu var

    1 . Eğik çizgi birleştirme

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

    2 . düzenli birleştirme

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

    3 . Dizi Birleştirmeye katıl

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

    Performansı akıllıca, Eğik çizgi birleştirme (ilk önce) en hızlısıdır.

    Performansa bakın , performansla ilgili daha fazla ayrıntı için bu test durumu

    Güncelleme:

    ES2015 ile, Şablon dizeleri özelliğinden yararlanabilirsiniz. Bununla beraber, çok satırlı dizeler oluşturmak için geri tıklamaları kullanmamız yeterlidir

    Örnek:

     
     `<h1>{{title}}</h1>
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div><label>name: </label>{{hero.name}}</div>
      `
    
        
    27
    2016-11-08 08: 33: 50Z
    1. Sanırım şu an sayfada zaten beş yıl boyunca olanları daha temiz bir şekilde temizlemişsin.
      2014-08-02 18: 22: 33Z
    2. birleştirmeyi kesmeyecek, satırların başındaki boşluk da dahil edilmeyecek mi?
      2017-05-09 23: 39: 33Z

    Komut dosyası etiketlerini kullanma:

    • çok satırlı metninizi içeren bir <script>...</script> bloğu head etiketine ekleyin;
    • çok satırlı metninizi olduğu gibi alın ... (metin kodlamasına dikkat edin: 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
    2017-01-03 13: 58: 41Z
    1. Bu stratejinin temiz olduğunu düşünüyorum & çok az kullanılmıştı. jsrender bunu kullanır.
      2015-01-09 15: 57: 07Z
    2. Bunu innerText iso innerHTML ile kullanıyorum, ancak boşlukların korunduğundan nasıl emin olabilirim?
      2015-07-16 08: 53: 07Z
    3. Sabun XML’de olduğundan, <![CDATA[.....]]>’u korumalı.
      2015-10-28 05: 30: 30Z
    4. Ayrıca bunları kullanıyorsanız ajax sorgular. Başlıklarını değiştirmeyi deneyebilirsin xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); JS’deki yorumları yanlış yazmaktan başka problemlerin olduğunu da hatırlamıyorum. Sorun çıkmayan yerler.
      2015-10-28 05: 40: 04Z

    Bu sözdizimini ve girintiyi beğendim:

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

    (ancak aslında çok satırlı dize olarak kabul edilemez)

        
    24
    2011-12-13 20: 09: 10Z
    1. Ben, bir sonraki satırda ifadeye devam edildiğini açıkça belirtmek için önceki satırın sonuna '+' işareti koymam dışında bunu kullanırım. Sizin yönteminiz girintileri daha eşit bir şekilde sıraya koyuyor.
      2012-10-04 08: 54: 22Z
    2. @ Sean Bunu da kullanıyorum ve hala eklenen her yeni satırın başına '+' işaretini ve son olarak ';' yeni bir satırda cuz daha 'doğru' buldum.
      2013-11-14 05: 06: 06Z
    3. + işaretini başlangıcına koymak, dizinin ilk /son satırı olduğunda diğer satırları düzenlemek zorunda kalmadan o satırın yorum yapmasına izin verir.
      2013-12-12 15: 38: 17Z
    4. Öndeki + 'yı görsel olarak da tercih ediyorum, bir sonrakinin devam ettiğini bilmek için satırın sonuna kadar taramaya ihtiyacım yok.
      2014-05-07 15: 40: 49Z

    Güzel kılan bu kitaplık var:

    https://github.com/sindresorhus/multiline

    Önce

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

    sonra

     
    var str = multiline(function(){/*
    <!doctype html>
    <html>
        <body>
            <h1>❤ unicorns</h1>
        </body>
    </html>
    */});
    
        
    17
    2014-04-25 11: 34: 57Z
    1. Bu desteği nodejs'da tarayıcıda kullanmak dikkatli olmalı.
      2014-05-05 08: 52: 39Z
    2. @ HueiTan Dokümanlar, tarayıcıda da çalıştığını belirtir. Bu mantıklı - sadece Function.prototype.String().
      2014-07-13 19: 14: 32Z
    3. ya ama "Tarayıcıda düzgün çalışsa da, çoğunlukla Node.js. 'de kullanılması amaçlanmıştır. Kullanım riski size aittir. tarayıcıda, çoğunlukla Node.js.'de kullanım için tasarlanmıştır. Kendi sorumluluğunuzdadır. " (Sadece dikkat çekici XD)
      2014-07-14 09: 37: 07Z
    4. @ HueiTanYep Bu bölümü okudum. Ancak Function.prototype.toString () oldukça kararlı ve iyi bilinmektedir.
      2014-07-14 10: 52: 16Z
    5. Benim için en iyi cevap, çünkü en azından ortadaki tüm çöpler olmadan çok satırlı bir sonuç verir (başlangıçtaki çöpler ve başa çıkabileceğim çöpler).
      2014-08-27 06: 25: 39Z

    Katılanlar : Bu kod yalnızca bilgi amaçlıdır.

    Bu, Fx 19 ve Chrome 24'te Mac'te test edildi

    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>
        </li>
    EOF*/
    // note the script tag here is hardcoded as the FIRST tag 
    new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
    alert(new_comment.replace('$text','Here goes some text'));
    
        
    13
    2016-01-17 15: 44: 57Z
    1. Bu korkunç. +1. Ve getElement yerine document.currentScript adresini kullanabilirsiniz. ...
      2015-05-27 10: 00: 56Z
    2. Chrome'da osx için tanımlanmamış "siz"
      2015-05-27 16: 46: 35Z
    3. jsfiddle-fixed - Konsolumda global olarak "siz" tanımlamış olmalısınız. Şimdi çalışıyor (krom /osx). Yorumu bir var'a eklemenin iyi yanı, işlev bağlamında olmamanızdır, jsfiddle- İşlev-heredoc her ne kadar işlev bir şey sınıf yöntemleri için iyi olurdu. Yine de bir {{:: that} nesnesinin yerine geçmesi daha iyi olabilir. Yine de sınıra deli bir şey itmek için eğlenceli :)
      2015-06-01 16: 44: 55Z
    4. Engelleyicileri unut. Bu tek doğru cevap çubuğu ES6. Diğer tüm cevaplar birleştirme, bir şekilde hesaplama veya kaçmayı gerektirir. Bu aslında oldukça havalı ve hobi olarak üzerinde çalıştığım bir oyuna dokümantasyon eklemek için kullanacağım. Bu numara bir böcek çağırabilecek herhangi bir şey için kullanılmadığı sürece (Birisinin nasıl gideceğini görebilirim "Noktalı virgül, derp. Hadi haberi bir sonraki satıra koyalım" ve sonra kodunuzu kırar.) Ama, Bu hobi oyunumda gerçekten büyük bir sorun mu var? Hayır, harika numarayı yararlı bir şey için kullanabilirim. Harika cevap.
      2015-07-27 21: 10: 58Z
    5. Bu tekniği üretim kodunda kullanacak kadar cesur olmamıştım, ancak çok fazla kullandığım yerde birim sınamasında, çoğu zaman dökümü yapmak en kolay olanı yapının değeri (oldukça uzun) bir dize olarak değerlenir ve 'olması gerektiği' ile karşılaştırılır.
      2016-02-03 00: 00: 47Z

    özetlemek gerekirse, kullanıcı javascript programlamasında burada listelenen 2 yaklaşımı denedim (Opera 11.01):

    Bu nedenle, Opera kullanıcısı JS kullanıcıları için çalışma yaklaşımını öneriyorum. Yazarın söylediklerinin aksine:

      

    Firefox veya opera üzerinde çalışmıyor; sadece IE’de, krom ve safaride.

    Opera 11'de çalışır. En azından kullanıcı JS betiklerinde. Çok kötü, bireysel cevaplar hakkında yorum yapamıyorum ya da cevabı yükseltemiyorum, hemen yaparım. Mümkünse, daha yüksek ayrıcalıklara sahip biri lütfen benim için yap.

        
    10
    2017-05-23 11: 47: 36Z
    1. Bu benim ilk gerçek yorumum. 2 gün önce en fazla oy kullanma ayrıcalığını kazandım, bu yüzden hemen bahsettiğim bir yanıtı hemen aştım.ettik. Yardım etmeye teşebbüsümü bozan herkese teşekkür ederim.
      2011-07-24 12: 34: 35Z
    2. Bu cevabı gerçekten kapatan herkese teşekkürler: Artık normal yorum göndermeye yetkim var! Bu yüzden tekrar teşekkürler.
      2012-08-31 02: 41: 46Z

    2015 için güncellendi : altı yıl sonra: çoğu insan bir modül yükleyici kullanıyor ve ana modül sistemlerinin her birinin şablon yükleme yolu var. Satır içi değil, ancak en yaygın çok satırlı dize türü şablonlardır ve şablonlar genel olarak yine de JS dışında tutulmalıdır .

    necess.js: 'metin gerekli'.

    template.html’de çok satırlı bir şablonla requ.js 'text' eklentisi kullanmak

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

    NPM /browserify: 'brfs' modülü

    Browserify metin dosyalarını yüklemek için bir 'brfs' modülü kullanır. Bu, gerçekte şablonunuzu paketlenmiş HTML'nize ekleyecektir.

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

    kolay.

        
    9
    2014-12-31 17: 48: 21Z

    Kaçış yeni hatlarını kullanmak istiyorsanız, hoş bir şekilde kullanılabilirler. Sayfa kenarlığı olan bir belgeye benziyor .

    resim tanımını buraya girin

        
    9
    2015-09-30 14: 14: 03Z
    1. Bu, fazladan boşluk bırakmaz mıydı?
      2015-12-06 12: 29: 57Z
    2. @ tomByrer Evet, iyi gözlem. Yalnızca beyaz boşluk umursamadığınız dizgiler için iyidir, örn. HTML.
      2015-12-06 23: 02: 50Z

    Bu IE, Safari, Chrome ve Firefox'ta çalışır:

     
    <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>
    
        
    8
    2010-11-23 16: 46: 29Z
    1. Sadece bir düşünün. Bunun geçerli olduğunu düşünüyor musunuz? Ekran sorunlarına neden olabileceğini düşünmüyor musunuz?
      2012-02-24 01: 55: 04Z
    2. Neden düşüşler? Çok pratik olmasa da, bu yaratıcı bir cevap!
      2012-02-29 02: 32: 43Z
    3. hayır, öyle değil. Bir şablon kullanmayı tercih etmeli: $.tmpl () ( api.jquery.com/tmpl ), veya EJS ( embeddedjs.com/getting_started.html ), vb. geçerli bir koddan uzak ve bunu kullanmak çok büyük ekran sorunlarına neden olabilir.
      2012-03-24 00: 07: 48Z
    4. İnşallah bu cevabı hiç kimse pratikte kullanmaz, ama temiz bir fikir
      2015-03-13 23: 48: 44Z

    Uzantımım https://stackoverflow.com/a/15558082/80404 . Sembol /*! any multiline comment */ şeklinde yorum bekliyor! küçültmeyle çıkarılmasını önlemek için kullanılır (en azından YUI kompresör için)

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

    Örnek:

     
    var tmpl = function() { /*!
     <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
        </ul>
     </div>
    */}.extractComment();
    
        
    8
    2017-05-23 10: 31: 37Z

    Javascript’teki eşdeğeri:

     
    var text = `
    This
    Is
    A
    Multiline
    String
    `;
    

    İşte belirtimi . Bu sayfanın altındaki tarayıcı desteğine bakın. İşte size bazı örnekler . p>     

    8
    2015-11-04 14: 06: 18Z

    TypeScript (JavaScript SuperSet) 'i kullanabilirsiniz, çok satırlı dizeleri destekler ve geri dönüşe dönüştürür Ek yükü olmayan JavaScript:

     
    var templates = {
        myString: `this is
    a multiline
    string` 
    }
    
    alert(templates.myString);
    

    Düz JavaScript’le aynı şeyi yapmak istiyorsanız:

     
    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)
    

    iPad /Safari’nin 'functionName.toString()'’u desteklemediğini unutmayın.

    Çok sayıda eski kodunuz varsa, düz JavaScript değişkenini TypeScript'te de kullanabilirsiniz (temizleme amacıyla):

     
    interface externTemplates
    {
        myString:string;
    }
    
    declare var templates:externTemplates;
    
    alert(templates.myString)
    

    ve çok satırlı nesneyi, şablonları başka bir dosyaya koyduğunuz (pakette birleştirebileceğiniz) düz JavaScript değişkeninden kullanabilirsiniz.

    TypeScript’i
    http://www.typescriptlang.org/Playground adresinde deneyebilirsiniz. /p>     

    7
    2015-10-07 13: 12: 07Z
    1. iPad /Safari sınırlaması hakkında herhangi bir belge var mı? MDN her şeyin iyi olduğunu düşünüyor gibi görünüyor - geliştirici. mozilla.org/en-US/docs/Web/JavaScript/Reference/...
      2017-08-05 18: 15: 50Z
    2. @ Campbeln: CoWorker bunu söyledi (kodu kullandı). Kendim denemedim. Ayrıca iPad /Safari sürümüne de bağlı olabilir - bu yüzden muhtemelen değişir.
      2017-08-06 16: 07: 48Z

    ES6, birden çok satırda bir dize belirtmek için bir geri dönüş tuşu kullanmanızı sağlar. Buna bir Şablon Edebi denir. Bunun gibi:

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

    Arkatonun kullanılması NodeJS'de çalışır ve Chrome, Firefox, Edge, Safari ve Opera tarafından desteklenir.

    https://developer.mozilla.org/en -ABD /docs /Web /JavaScript /Referans /Template_literals

        
    5
    2016-03-28 18: 43: 26Z

    Javascriptlerde çok satırlı dizge oluşturmanın en kolay yolu backticks kullanımıdır (``). Bu, ${variableName} ile değişken ekleyebileceğiniz çok satırlı dizeler oluşturmanıza olanak sağlar.

    Örnek:

     
    let name = 'Willem'; 
    let age = 26;
    
    let multilineString = `
    my name is: ${name}
    
    my age is: ${age}
    `;
    
    console.log(multilineString);

    uyumluluğu:

    • ES6 /es2015'da tanıtıldı
    • Artık tüm büyük tarayıcı satıcıları (internet explorer hariç) tarafından doğal olarak desteklenmektedir

    Buradaki Mozilla belgelerinde tam uyumluluğu kontrol edin

        
    5
    2018-10-01 21: 27: 45Z
    1. Bu şimdi tüm son sürümlerle uyumlu mu?rowsers? Veya hala bu sözdizimini desteklemeyen bazı tarayıcılar var mı?
      2018-09-28 03: 37: 49Z
    2. Aşırı gecikmiş yorumum için özür dilerim, cevap uyumluluk bilgisi eklendi;)
      2018-10-01 21: 28: 33Z

    String concat için dizi tabanlı birleştirme sürümüm:

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

    Bu benim için işe yaradı, özellikle sık sık bu şekilde oluşturulan html'ye değer ekledim. Ancak birçok sınırlaması var. Girinti güzel olurdu. Yuvalanmış tırnak işaretleri ile uğraşmak zorunda kalmamak gerçekten güzel olurdu ve sadece bunun büyük bölümü beni rahatsız ediyor.

    Diziye eklenecek .push () çok zaman alıyor mu? Bu ilgili cevaba bakınız:

    ( JavaScript geliştiricilerin yapmamasının bir nedeni var mı? Array.push ()? )

    'i kullanmayın

    Bu (karşıt) test çalışmalarına baktıktan sonra, 100 öğenin üzerinde büyümeyecek olan dizgi dizileri için .push () gayet iyi görünüyor - daha büyük diziler için dizine alınmış eklemeler lehine bunu önleyeceğim. >     

    3
    2017-05-23 12: 34: 59Z

    Dizenizi birleştirmek için +='u kullanabilirsiniz, kimsenin cevap veremediği, okunaklı olacak gibi göründüğü gibi görünüyor ... ve böyle bir şey

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

    ayrıca şu şekilde de yazılabilir:

     
    var hello = 'hello';
        hello += ' world';
        hello += ' blah';
    
    console.log(hello);
    
        
    3
    2014-01-18 13: 18: 54Z

    Ayrıca, her satırın sonunda ileriye doğru ters eğik çizgi kullanarak birden çok satırın üzerine dizgiyi uzatırken, ileriye doğru ters eğik çizgiden sonra gelen fazladan karakterlerin (çoğunlukla boşluklar, sekmeler ve yanlışlıkla eklenen yorumlar), beklediğim karakter hatasına neden olacağını unutmayın. öğrenmek için saat

     
    var string = "line1\  // comment, space or tabs here raise error
    line2";
    
        
    3
    2016-07-13 19: 25: 31Z

    Lütfen internet sevgisi için string bitiştirmeyi kullanın ve bunun için ES6 çözümlerini kullanmamayı tercih edin. ES6, CSS3 ve bazı tarayıcıların CSS3 hareketine uyum sağlama konusunda yavaş olması gibi, tüm kart boyunca desteklenmiyor. Düz ol 'JavaScript'i kullanın, son kullanıcılarınız size teşekkür edecek.

    Örnek:

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

        
    3
    2017-10-11 23: 28: 47Z
    1. , amacınıza katılıyorum, ancak javascript "good" ol
      demem
      2018-03-05 00: 18: 20Z

    '+' birleştirme operatörünü kullanmanız gerekir.

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

    \n'u kullanarak kaynak kodunuz şöyle görünecektir -

     
    This 
     <br>is
     <br>multiline
     <br>string.
    

    <br>'u kullanarak tarayıcı çıktınız şöyle görünecektir -

     
    This
    is
    multiline
    string.
    
        
    2
    2017-08-13 22: 57: 20Z

    Bu geçici çözümün IE, Chrome, Firefox, Safari, Opera’da çalışması gerektiğini düşünüyorum.

    jQuery'yi kullanma :

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

    Saf Javascript Kullanma:

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

    alkış !!

        
    1
    2013-01-28 12: 20: 46Z
    1. <xmp> öylekullanımdan kaldırıldı. HTML’de izin verilebilir, ancak hiçbir yazar tarafından kullanılmamalıdır. stackoverflow.com/questions/8307846 /...
      2013-01-28 12: 28: 27Z
    2. @ Bergi, haklısın .. ve kaçmakla birlikte <pre>; kullanmak benim çözümümde yardımcı olmayacak. Benzer bir sorunla karşılaştım ve geçici bir çözüm bulmaya çalışıyorum .. ancak benim durumumda, bu sorunu düzeltmek için çok n00bish bir yol buldum. Çıktıyı < xmp > veya başka bir etiket. lol. Bunu yapmanın standart bir yolu olmadığını biliyorum ama bu konuda daha fazla sabahleyin çalışacağım .. Şerefe !!
      2013-01-28 13: 11: 04Z
    3. Maalesef style="display:none" Chrome'da bile, örnek blokta belirtilen <img> resmi yüklemeye çalışıyor.
      2013-12-09 19: 57: 29Z

    Bunu yapmanın ES6 yolu, şablon değişmezleri kullanarak olur:

     
    const str = `This 
    
    is 
    
    a
    
    multiline text`; 
    
    console.log(str);
    

    Daha fazla başvuru burayı

        
    1
    2019-04-19 07: 10: 25Z
    1. Bu cevap sadece küçük, eksik ve hatalı bir format değil, aynı zamanda önceki cevaplara kesinlikle hiçbir şey eklemiyor. İşaretleme ve silinecek şekilde atlama.
      2019-01-18 17: 43: 51Z

    Sadece Anonim cevabı denedi ve burada küçük bir numara olduğunu buldu, ters eğik çizgiden sonra bir boşluk varsa işe yaramadı \
    Yani aşağıdaki çözüm işe yaramıyor -

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

    Ancak alan kaldırıldığında çalışır -

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

    Yardımcı olur umarım !!

        
    0
    2012-11-23 13: 10: 00Z
    1. açıkça bir ters eğik çizgiden sonra bir boşluk varsa, ters eğik çizgi boşluktan kaçar. Yerden kaçış olması gerekiyor, boşluktan değil.
      2012-12-14 08: 47: 51Z
kaynak yerleştirildi İşte