Mehrzeilige Zeichenketten in JavaScript erstellen

Question

Ich habe den folgenden Code in Ruby. Ich möchte diesen Code in JavaScript umwandeln. Was ist der entsprechende Code in JS?

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

Answer 1

Aktualisierung:

ECMAScript 6 (ES6) führt einen neuen Typ von Literalen ein, nämlich Vorlagenliterale . Sie haben viele Eigenschaften, unter anderem variable Interpolation, aber am wichtigsten für diese Frage ist, dass sie mehrzeilig sein können.

Ein Schablonenliteral wird begrenzt durch Backticks :

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

(Anmerkung: Ich plädiere nicht für die Verwendung von HTML in Zeichenketten)

Browserunterstützung ist OK , aber Sie können Transporter besser kompatibel zu sein.

---

Original ES5-Antwort:

Javascript hat keine Here-Dokumenten-Syntax. Sie können jedoch den buchstäblichen Zeilenumbruch umgehen, was dem nahe kommt:

"foo \
bar"

Answer 2

ES6-Aktualisierung:

Wie in der ersten Antwort erwähnt, können Sie mit ES6/Babel jetzt mehrzeilige Zeichenketten einfach mit Backticks erstellen:

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

Die Interpolation von Variablen ist eine beliebte neue Funktion, die mit durch Backticks begrenzten Zeichenketten einhergeht:

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

Dies lässt sich einfach auf die Verkettung übertragen:

user.name + ' liked your post about strings'

Original ES5-Antwort:

Google's JavaScript-Style Guide empfiehlt die Verkettung von Zeichenketten anstelle von Zeilenumbrüchen:

Tun Sie dies nicht:

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

Das Leerzeichen am Anfang jeder Zeile kann beim Kompilieren nicht sicher entfernt werden; Leerzeichen nach dem Schrägstrich führen zu komplizierten Fehlern; und obwohl die meisten Skript-Engines dies unterstützen, ist es nicht Teil von ECMAScript.

Verwenden Sie stattdessen die String-Verkettung:

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

Answer 3

Das Muster text = <<"HERE" This Is A Multiline String HERE ist in js nicht verfügbar (ich erinnere mich, dass ich es in meinen guten alten Perl-Tagen oft benutzt habe).

Um bei komplexen oder langen mehrzeiligen Zeichenfolgen den Überblick zu behalten, verwende ich manchmal ein Array-Muster:

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

oder das bereits gezeigte anonyme Muster (escape newline), das einen hässlichen Block in Ihrem Code darstellen kann:

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

Hier ist ein weiterer seltsamer, aber funktionierender 'Trick' 1 :

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

externe Bearbeitung: jsfiddle

ES20xx unterstützt das Überbrücken von Strings über mehrere Leitungen mit Vorlagezeichenfolgen :

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 Hinweis: Dies geht nach dem Mining/Obfuscating Ihres Codes verloren.

Answer 4

Sie puede haben mehrzeilige Strings in reinem JavaScript.

Diese Methode basiert auf der Serialisierung von Funktionen, die als implementierungsabhängig definiert . Sie funktioniert in den meisten Browsern (siehe unten), aber es gibt keine Garantie dafür, dass sie auch in Zukunft noch funktioniert, also verlassen Sie sich nicht darauf.

Verwenden Sie die folgende Funktion:

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

Sie können hier Dokumente wie dieses haben:

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

Die Methode wurde in den folgenden Browsern erfolgreich getestet (nicht erwähnt = nicht getestet):

• IE 4 - 10
• Oper 9.50 - 12 (nicht in 9-)
• Safari 4 - 6 (nicht in 3-)
• Chrom 1 - 45
• Firefox 17 - 21 ( nicht in 16- )
• Rekonq 0.7.0 - 0.8.0
• Nicht unterstützt in Konqueror 4.7.4

Seien Sie jedoch vorsichtig mit Ihrem Minifier. Er neigt dazu, Kommentare zu entfernen. Für die YUI-Kompressor einen Kommentar, der mit /*! (wie die, die ich verwendet habe) erhalten bleiben.

Ich denke, ein real Die Lösung wäre die Verwendung von CoffeeScript .

ES6 UPDATE: Sie können backtick verwenden, anstatt eine Funktion mit einem Kommentar zu erstellen und toString auf den Kommentar anzuwenden. Die Regex müsste aktualisiert werden, um nur Leerzeichen zu entfernen. Sie könnten auch eine String-Prototyp-Methode für diese Aufgabe haben:

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

Jemand sollte diese .removeIndentation-String-Methode schreiben... ;)

Answer 5

Sie können dies tun...

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