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

Ruby'de aşağıdaki kod 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

Güncelleme:

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

Bir şablon değişmez değeri 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 uygun , ancak daha uyumlu olması için transpilleri kullanabilirsiniz .

Orijinal ES5 yanıtı:

Javascript'in burada belge sözdizimi yok. Ancak, yakın gelen yeni satırdan kaçabilirsiniz:

"foo \
bar"

ES6 Güncellemesi:

İlk yanıttan bahsedildiği gibi, ES6 / Babel ile artık basit bir şekilde ters tırnakları kullanarak çok satırlı dizeler oluşturabilirsiniz:

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

Enterpolasyon değişkenleri, geri işaretli sınırlandırılmış dizelerle gelen popüler yeni bir özelliktir:

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

Bu sadece birleştirme işlemine aktarılır:

user.name + ' liked your post about strings'

Orijinal ES5 yanıtı:

Google'ın JavaScript stil kılavuzu , yeni satırlardan kaçmak yerine dize birleştirmeyi kullanmanızı ö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 satırın başındaki boşluk derleme zamanında güvenle çıkarılamaz; eğik çizgi sonrasındaki boşluk zor hatalara neden olur; ve çoğu komut dosyası motoru bunu desteklese de, ECMAScript'in bir parçası değildir.

Bunun yerine dize birleştirmeyi 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.';

desen text = <<"HERE" This Is A Multiline String HEREjs mevcut değil (eski eski Perl günlerde ç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ırım:

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

veya anonim kalıp zaten gösterildi (yeni satırdan kaç), bu da kodunuzda çirkin bir blok olabilir:

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

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

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

dış düzenleme: jsfiddle

ES20xx , şablon dizeleri kullanarak birden çok satıra yayılan dizeleri destekler :

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

¹ Not: kodunuz küçültüldükten / gizlendikten sonra kaybolacaktır

Sen edebilirsiniz saf JavaScript satırlı dizeleri var.

Bu yöntem, uygulamaya bağlı olarak tanımlanan işlevlerin serileştirilmesine dayanır . Çoğu tarayıcıda çalışır (aşağıya bakın), ancak gelecekte de çalışacağının garantisi yoktur, bu yüzden ona güvenmeyin.

Aşağıdaki işlevi kullanarak:

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

Burada böyle belgelere sahip olabilirsiniz:

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 edildi (belirtilmedi = test edilmedi):

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

Bununla birlikte, kıyma makinesine dikkat et. Yorumları kaldırma eğilimindedir. İçin YUI kompresör , bir yorum ile başlayan /*!korunacaktır (ben gibi).

Bence gerçek bir çözüm CoffeeScript kullanmak olacaktır .

ES6 GÜNCELLEME: Yorum içeren bir işlev oluşturmak ve yorumda toString komutunu çalıştırmak yerine backtick'i kullanabilirsiniz. Normal ifadenin yalnızca şerit boşluklarına güncellenecek şekilde güncellenmesi gerekir. Bunu yapmak için bir dize prototip yönteminiz de olabilir:

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

Süper olurdu. Birisi bu .removeIndentation dize yöntemini yazmalıdır ...;)

Bunu yapabilirsiniz...

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

Çok çizgili bir ipin bu çok jimmy hileli yöntemini buldum. Bir işlevi bir dizeye dönüştürdüğünden, işlevin içindeki yorumları da döndürdüğünden, yorumları çok satırlı bir yorum / ** / kullanarak dizeniz olarak kullanabilirsiniz. Sadece uçları kesmeniz ve ipiniz 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)

Bunu görmediğime şaşırdım, çünkü test ettiğim her yerde çalışıyor ve örneğin şablonlar için çok yararlı:

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

HTML olan ancak çalışmayan bir ortam bilen var mı?

Ben bir div çıktı, gizli yapma ve ben gerektiğinde jQuery div id çağırarak bunu çözdü.

Örneğin

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

Sonra dize almak gerektiğinde, ben sadece aşağıdaki jQuery kullanın:

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

Bu, metnimi birden çok satıra döndürür. Ararsam

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

Alırım:

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ştirme birleşimi

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

Performans açısından, Slash birleşimi (birincisi) en hızlısıdır.

Performansla ilgili daha fazla ayrıntı için bu test senaryosuna bakın

Güncelleme:

İle ES2015 , biz onun Şablon dizeleri özellikten yararlanabilir. Bununla birlikte, çok satırlı dizeler oluşturmak için sadece keneler kullanmamız gerekiyor

Misal:

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

Komut dosyası etiketlerini kullanma:

• etikete <script>...</script>çok satırlı metninizi içeren bir blok ekleyin head;

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

Bu sözdizimi ve girinti gibi:

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

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

Onu güzelleştiren bu kütüphane 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>
*/});

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

Bu, Mac'te Fx 19 ve Chrome 24'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> 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>

Özetle, burada kullanıcı javascript programlama (Opera 11.01) listelenen 2 yaklaşım denedim:

• bu işe yaramadı: JavaScript'te çok satırlı dizeler oluşturma
• Bu oldukça iyi çalıştı, ben de Notepad ++ kaynak görünümünde iyi görünmesini nasıl anladım: JavaScript çok satırlı dizeleri oluşturma

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

Firefox veya opera üzerinde çalışmaz; sadece IE, chrome ve safari'de.

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

Benim uzatma https://stackoverflow.com/a/15558082/80404 . /*! any multiline comment */Sembolün bulunduğu bir formda yorum bekliyor ! küçültülerek çı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));
};

Misal:

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

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 yöntemleri var. Satır içi değil, ancak en yaygın çok satırlı dize şablonlardır ve şablonlar genellikle JS dışında tutulmalıdır .

requir.js: 'metin gerektir'.

Kullanılması require.js 'text' eklentisi çok satırlı şablon içinde olan, template.html

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 aslında şablonunuzu paketlenmiş HTML'nize dönüştürür.

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

Kolay.

Eğer kaçan yeni satırları kullanmaya istekli iseniz, bunlar güzel bir şekilde kullanılabilir . Sayfa kenarlığı olan bir belgeye benziyor .

Javascript içindeki eşdeğeri:

var text = `
This
Is
A
Multiline
String
`;

İşte şartname . Bu sayfanın altındaki tarayıcı desteğine bakın . İşte bazı örnekler .

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>

Sen kullanabilirsiniz typescript (JavaScript set), bu satırlı dizeleri destekler ve transpiles yükü olmadan saf JavaScript geri adım:

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

alert(templates.myString);

Aynı şeyi düz JavaScript ile gerçekleştirmek 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)

İPad / Safari'nin desteklemediğini unutmayın 'functionName.toString()'

Çok fazla eski kodunuz varsa, TypeScript'te düz JavaScript varyantını da kullanabilirsiniz (temizleme amacıyla):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

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

TypeScript'i http://www.typescriptlang.org/Playground adresinden deneyebilirsiniz

Bunu yapmanın ES6 yolu şablon değişmezlerini kullanmak olacaktır:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Daha fazla referans burada

ES6, birden çok satırda bir dize belirtmek için bir backtick kullanmanızı sağlar. Buna Şablon Değişmezi denir. Bunun gibi:

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

Backtick'i kullanmak NodeJS'de çalışır ve Chrome, Firefox, Edge, Safari ve Opera tarafından desteklenir.

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

Javascrips'te çok satırlı dizeler yapmanın en kolay yolu, backticks (``) kullanmaktır. Bu, içine değişkenler ekleyebileceğiniz çok satırlı dizeler oluşturmanıza olanak tanır ${variableName}.

Misal:

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

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

my age is: ${age}
`;

console.log(multilineString);

uyumluluk:

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

Mozilla belgelerinde tam uyumluluğu kontrol edin

Dize 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 iyi çalıştı, özellikle de bu şekilde oluşturulan html'ye değerler eklediğim için. Ancak birçok sınırlaması var. Girinti iyi olurdu. İç içe tırnak işaretleri ile uğraşmak gerçekten hoş olmazdı ve sadece ciddiyeti beni rahatsız ediyor.

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

( JavaScript geliştiricilerinin Array.push () kullanmamasının bir nedeni var mı? )

Bu (karşıt) test çalışmalarına baktıktan sonra, .push () 100 öğeden fazla büyümeyecek dize dizileri için iyi görünüyor - Daha büyük diziler için dizinlenmiş ekler lehine kaçınacağım.

+=Dizenizi birleştirmek için kullanabilirsiniz , kimse cevap vermiyor gibi görünüyor, ki bu okunabilir ve aynı zamanda düzgün olacak ... böyle bir şey

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

olarak da yazılabilir

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

console.log(hello);

Ayrıca, her satırın sonunda ileri geri eğik çizgi kullanarak dizeyi birden çok satır üzerine genişletirken, ileri geri eğik çizgiden sonra herhangi bir fazladan karakterin (çoğunlukla boşluklar, sekmeler ve yorumlar), beklenmedik karakter hatasına neden olacağına dikkat edin. dışarı

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

Lütfen internet sevgisi için dize birleştirme kullanın ve bunun için ES6 çözümlerini kullanmamayı tercih edin. ES6, CSS3 ve bazı tarayıcıların CSS3 hareketine uyum sağlaması gibi, kartın her yerinde desteklenmiyor. Sade ol JavaScript kullanın, son kullanıcılarınız size teşekkür edecektir.

Misal:

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

'+' Birleştirme işlecini 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>

Kullanarak \nKaynak kodunuzu şöyle görünecektir -

Bu 
 <br> olduğunu
 <br> satırlı
 <br> dize.

<br>Tarayıcınızı kullanarak çıktı gibi görünecektir -

Bu
dır-dir
satırlı
dize.

Bu geçici çözüm IE, Chrome, Firefox, Safari, Opera -

JQuery 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ış !!

Anonim yanıtı denedim ve burada küçük bir hile olduğunu gördüm, ters eğik çizgiden sonra bir boşluk varsa işe yaramaz \
Yani aşağıdaki çözüm işe yaramaz -

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

Ancak alan kaldırıldığında işe yarıyor -

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

alert(x.test);​

Umarım yardımcı olur !!