Frage Mehrzeilige Strings in JavaScript erstellen


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

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

1920
2018-04-30 02:11


Ursprung


Antworten:


Aktualisieren:

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

Ein Vorlagenliteral wird durch begrenzt Backticks:

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

(Hinweis: Ich befürworte nicht die Verwendung von HTML in Strings)

Browser-Unterstützung ist in Ordnung, aber du kannst es benutzen Transpilierer kompatibler sein.


Original ES5 Antwort:

Javascript hat keine Here-Document-Syntax. Sie können jedoch dem literalen Zeilenumbruch entkommen, der sich nähert:

"foo \
bar"

2293
2018-04-30 02:15



Aktualisieren:

Wie die erste Antwort erwähnt, können Sie jetzt mit ES6 / Babel mehrzeilige Strings erstellen, indem Sie einfach Backticks verwenden:

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

Die Interpolation von Variablen ist eine beliebte neue Funktion, die mit Back-Tick-Strings einhergeht:

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

Dies führt nur zur Verkettung:

user.name + ' liked your post about strings'

Original ES5 Antwort:

Google's JavaScript Style Guide empfiehlt, String-Verkettung zu verwenden, anstatt Zeilenumbrüche zu umgehen:

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

Der Leerraum am Anfang jeder Zeile kann zur Kompilierzeit nicht sicher entfernt werden. Whitespace nach dem Schrägstrich führt zu kniffligen Fehlern; und während die meisten Script-Engines dies unterstützen, ist es nicht Teil von ECMAScript.

Verwenden Sie stattdessen 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.';

1117
2018-06-06 02:30



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

Um den Überblick bei komplexen oder langen mehrzeiligen Strings 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 Muster anonyme bereits angezeigt (Escape-Newline), die ein hässlicher Block in Ihrem Code sein 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

[Zusatz 2015]
ES6 unterstützt das Überspannen von Strings über mehrere Zeilen hinweg mit Vorlage Zeichenfolgen:

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 verloren, nachdem Sie Ihren Code minimiert / verschleiert haben


634
2018-04-30 07:22



Sie kann haben mehrzeilige Strings in reinem JavaScript.

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

Verwenden der folgenden Funktion:

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

Sie können hier Dokumente wie folgt haben:

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

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

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

Sei jedoch vorsichtig mit deinem Minifier. Es neigt dazu, Kommentare zu entfernen. Für die YUI-Kompressor, ein Kommentar, der mit beginnt /*!(wie die, die ich verwendet habe) wird erhalten.

Ich denke ein echt Lösung wäre zu verwenden KaffeeScript.


327
2018-04-06 18:16



Du kannst das...

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

187
2018-03-21 21:05



Ich kam mit dieser sehr jimmy manipulierten Methode einer mehrzeiligen Saite. Da das Konvertieren einer Funktion in eine Zeichenfolge auch alle Kommentare innerhalb der Funktion zurückgibt, können Sie die Kommentare als Zeichenfolge verwenden, indem Sie einen mehrzeiligen Kommentar / ** / verwenden. Sie müssen nur die Enden abschneiden und Sie haben Ihre Zeichenfolge.

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



Ich bin überrascht, dass ich das nicht gesehen habe, weil es überall funktioniert, wo ich es getestet habe und es ist sehr nützlich für z. Vorlagen:

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

Kennt jemand eine Umgebung, in der es HTML gibt, aber es funktioniert nicht?


82
2017-08-17 14:25