Erstellen mehrzeiliger Zeichenfolgen in JavaScript

Antworten:

3317

Aktualisieren:

ECMAScript 6 (ES6) führt eine neue Art von Literal ein, nämlich Vorlagenliterale . Sie haben viele Merkmale, unter anderem variable Interpolation, aber vor allem für diese Frage können sie mehrzeilig sein.

Ein Vorlagenliteral wird durch Backticks begrenzt :

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

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

Die Browserunterstützung ist in Ordnung , aber Sie können Transpiler verwenden , um kompatibler zu sein.


Ursprüngliche ES5-Antwort:

Javascript hat keine Here-Document-Syntax. Sie können sich jedoch der wörtlichen Newline entziehen, die nahe kommt:

"foo \
bar"
Anonym
quelle
231
Seien Sie gewarnt: Einige Browser fügen bei der Fortsetzung Zeilenumbrüche ein, andere nicht.
Statik am
35
Visual Studio 2010 scheint auch von dieser Syntax verwirrt zu sein.
JCollum
47
@Nate Es ist in Abschnitt 7.8.4 der 5. Ausgabe von ECMA-262 angegeben und heißt LineContinuation : "Ein Zeilenabschlusszeichen kann in einem Zeichenfolgenliteral nur als Teil einer LineContinuation angezeigt werden , um die leere Zeichenfolge zu erzeugen. Der richtige Weg, a zu verursachen Das Zeilenabschlusszeichen, das Teil des String-Werts eines String-Literals sein soll, verwendet eine Escape-Sequenz wie \ n oder \ u000A. "
einige
16
Ich verstehe nicht, warum Sie dies tun würden, wenn Browser es inkonsistent behandeln. "line1 \ n" + "line2" über mehrere Zeilen hinweg ist ausreichend lesbar und Ihnen wird ein konsistentes Verhalten garantiert.
SamStephens
11
"Browser-Unterstützung ist in Ordnung" ... wird von IE11 nicht unterstützt - nicht in Ordnung
Tom Andraszek
1317

ES6-Update:

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

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

Das Interpolieren von Variablen ist eine beliebte neue Funktion, die mit durch Back-Ticks getrennten Zeichenfolgen geliefert wird:

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

Dies führt nur zur Verkettung:

user.name + ' liked your post about strings'

Ursprüngliche ES5-Antwort:

Der JavaScript- Styleguide von Google empfiehlt, die Verkettung von Zeichenfolgen zu verwenden, anstatt Zeilenumbrüche zu vermeiden:

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

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

Verwenden Sie stattdessen die Zeichenfolgenverkettung:

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.';
Devin G Rhode
quelle
19
Ich verstehe die Empfehlung von Google nicht. Alle Browser mit Ausnahme der extrem alten unterstützen den Backslash, gefolgt vom Newline-Ansatz, und werden dies auch in Zukunft aus Gründen der Abwärtskompatibilität tun. Sie müssen dies nur vermeiden, wenn Sie sicherstellen müssen, dass am Ende jeder Zeile nur eine neue Zeile (oder keine neue Zeile) hinzugefügt wurde (siehe auch meinen Kommentar zur akzeptierten Antwort).
Matt Browne
6
Beachten Sie, dass Vorlagenzeichenfolgen in IE11, Firefox 31, Chrome 35 oder Safari 7 nicht unterstützt werden. Siehe kangax.github.io/compat-table/es6
EricP
29
@MattBrowne Die Empfehlung von Google wird von ihnen bereits in der Reihenfolge der Wichtigkeit der Gründe dokumentiert: (1) Das Leerzeichen am Anfang jeder Zeile [im Beispiel möchten Sie dieses Leerzeichen nicht in Ihrer Zeichenfolge, aber es sieht im Code besser aus ] (2) Leerzeichen nach dem Schrägstrich führen zu kniffligen Fehlern [wenn Sie eine Zeile mit \ anstelle von `\` beenden , ist dies schwer zu bemerken] und (3) während die meisten Skript-Engines dies unterstützen, ist es nicht Teil von ECMAScript [dh warum Verwenden Sie nicht standardmäßige Funktionen?] Denken Sie daran, dass es sich um einen Styleguide handelt, bei dem es darum geht, Code einfach zu lesen, zu warten und zu debuggen: Nicht nur "es funktioniert" korrekt.
ShreevatsaR
1
Erstaunlich, dass die Verkettung von Strings nach all den Jahren immer noch der beste / sicherste / konformste Weg ist, dies zu tun. Vorlagenliterale (obige Antwort) funktionieren nicht im Internet Explorer und das Entkommen von Zeilen ist nur ein Durcheinander, das Sie bald bereuen werden
Tiago Duarte
1
Finden Sie heraus, dass ältere Android-Versionen die Backticks nicht unterstützen. Wenn Sie also eine Android-App mit dem WebView haben, führen Ihre Backticks dazu, dass Ihre App nicht ausgeführt wird!
Michael Fever
684

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

Um die Übersicht über komplexe oder lange mehrzeilige Zeichenfolgen 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 angezeigte anonyme Muster (Escape Newline), was 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

ES20xx unterstützt das Überspannen von Zeichenfolgen über mehrere Zeilen mithilfe von Vorlagenzeichenfolgen :

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

KooiInc
quelle
34
Bitte verwenden Sie nicht das Array-Muster. In den meisten Fällen ist dies langsamer als die Verkettung von einfachen alten Zeichenfolgen.
BMiner
73
Das Array-Muster ist besser lesbar und der Leistungsverlust für eine Anwendung ist häufig vernachlässigbar. Wie dieser Perf-Test zeigt, kann sogar IE7 Zehntausende von Operationen pro Sekunde ausführen.
Benjamin Atkin
19
+1 für eine elegante Alternative, die nicht nur in allen Browsern gleich funktioniert, sondern auch zukunftssicher ist.
Pavel
26
@KooiInc Ihre Tests beginnen mit dem bereits erstellten Array, das die Ergebnisse verzerrt. Wenn Sie die Initialisierung des Arrays hinzufügen, ist die direkte Verkettung schneller. Jsperf.com/string-concat-without-sringbuilder/7 Siehe stackoverflow.com/questions/51185/… Als Trick für Zeilenumbrüche mag es in Ordnung sein, aber es ist definitiv mehr Arbeit als es sollte
Juan Mendes
9
@BMiner: 1) "Vorzeitige Optimierung ist die Wurzel allen Übels" - Donald Knuth, und 2) "Lesbarkeit" liegt im Auge des Betrachters
Paul Bennett
348

Sie können mehrzeilige Zeichenfolgen in reinem JavaScript verwenden.

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

Verwenden der folgenden Funktion:

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

Sie können hier Dokumente wie diese 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 folgenden Browsern erfolgreich getestet (nicht erwähnt = nicht getestet):

  • IE 4 - 10
  • Opera 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
  • Wird in Konqueror 4.7.4 nicht unterstützt

Seien Sie jedoch vorsichtig mit Ihrem Minifier. Es neigt dazu, Kommentare zu entfernen. Für den YUI-Kompressor beginnt ein Kommentar mit/*! bleibt (wie dem von mir verwendeten) .

Ich denke, eine echte Lösung wäre die Verwendung von CoffeeScript .

ES6 UPDATE: Sie können Backtick verwenden, anstatt eine Funktion mit einem Kommentar zu erstellen und den Kommentar mit toString auszuführen. Die Regex müsste nur auf Strip-Spaces aktualisiert werden. Sie können auch eine String-Prototyp-Methode verwenden, um dies zu tun:

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

Das wäre cool. Jemand sollte diese .removeIndentation-String-Methode schreiben ...;)

Jordão
quelle
232
Was!? Erstellen und Dekompilieren einer Funktion zum Hacken eines mehrzeiligen Kommentars in eine mehrzeilige Zeichenfolge? Nun , das ist hässlich.
Vor dem
4
jsfiddle.net/fqpwf funktioniert in Chrome 13 und IE8 / 9, jedoch nicht in FF6. Ich hasse es, es zu sagen, aber ich mag es, und wenn es eine absichtliche Funktion jedes Browsers sein könnte (damit es nicht verschwindet), würde ich es verwenden.
Jason Kleban
2
@ uosɐſ: Damit es beabsichtigt ist, muss es in der Spezifikation sein; oder so weit verbreitet, dass Browser-Hersteller diese "versehentliche" Funktion nicht entfernen möchten. Vielen Dank für die Experimente ... Probieren Sie ein Kaffeeskript.
Jordão
1
a.toString (). substring (15, a.toString (). length-4) funktioniert ebenfalls und muss nicht die gesamte Zeichenfolge scannen (obwohl dies höchstwahrscheinlich der Fall ist und die Zählung es trotzdem zu einem weiteren Scan macht. Oh wel .)
Lodewijk
2
Sehr praktisch. Ich verwende es für (Jasmine) Unit-Tests, vermeide es aber für den Produktionscode.
Jason
207

Du kannst das...

var string = 'This is\n' +
'a multiline\n' + 
'string';
Alex
quelle
Das erste Beispiel ist großartig und einfach. Viel besser als der \ -Ansatz, da ich nicht sicher bin, wie Browser den Backslash als Escape-Zeichen und als mehrzeiliges Zeichen behandeln würden.
Matt K
e4x.js wäre die gute zukunftssichere Lösung
Paul Sweatte
139

Ich habe mir diese sehr jimmy manipulierte Methode einer mehrzeiligen Saite ausgedacht. Da das Konvertieren einer Funktion in eine Zeichenfolge auch alle Kommentare innerhalb der Funktion zurückgibt, können Sie die Kommentare als Zeichenfolge mit einem mehrzeiligen Kommentar / ** / verwenden. Sie müssen nur die Enden abschneiden und Sie haben Ihre Schnur.

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)
Luke
quelle
37
Das ist absolut erschreckend. Ich liebe es (obwohl Sie möglicherweise ein Regex-Match durchführen müssen, weil ich nicht sicher bin, wie genau das Leerzeichen toString()ist.
Kevin Cox
Diese Lösung scheint in Firefox nicht zu funktionieren. Vielleicht ist es eine Sicherheitsfunktion für den Browser? EDIT: Nevermind, es funktioniert nur nicht für Firefox Version 16.
Bill Software Engineer
45
Achten Sie auch auf Minifahrer
3
Deshalb können wir keine schönen Dinge haben.
Danilo M. Oliveira
4
Sie können einige seltsame Dinge in Javascript Land tun. Obwohl in aller Ehrlichkeit, sollten Sie dies niemals verwenden.
Luke
88

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

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

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

Peter V. Mørch
quelle
23
Überall dort, wo Sie Ihre Zeichenfolgen nicht in separate und entfernte Skriptelemente einfügen möchten.
Lodewijk
9
Ein berechtigter Einwand! Es ist nicht perfekt. Aber für Vorlagen ist diese Trennung nicht nur in Ordnung, sondern wird vielleicht sogar gefördert.
Peter V. Mørch
1
Ich ziehe es vor, alles über 80/120 Zeichen in mehrere Zeilen aufzuteilen. Ich fürchte, das ist mehr als nur Vorlagen. Ich bevorzuge jetzt die Syntax 'line1' + 'line2'. Es ist auch das schnellste (obwohl dies mit wirklich großen Texten konkurrieren könnte). Es ist allerdings ein schöner Trick.
Lodewijk
27
Eigentlich ist dies HTML, nicht Javascript: - /
CpILL
5
Die Aufgabe, eine mehrzeilige Zeichenfolge in Javascript zu erhalten, kann jedoch auf diese Weise erledigt werden
Davi Fiamenghi
52

Ich habe dieses Problem gelöst, indem ich ein div ausgegeben, ausgeblendet und die div-ID von jQuery aufgerufen habe, wenn ich es brauchte.

z.B

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

Wenn ich dann die Zeichenfolge abrufen muss, verwende ich einfach die folgende jQuery:

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

Was meinen Text in mehreren Zeilen zurückgibt. Wenn ich anrufe

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

Ich bekomme:

Geben Sie hier die Bildbeschreibung ein

Tom Beech
quelle
2
Danke dafür! Dies ist die einzige Antwort, die ich gefunden habe, um mein Problem zu lösen. Dabei werden unbekannte Zeichenfolgen verwendet, die eine beliebige Kombination aus einfachen und doppelten Anführungszeichen enthalten können, die direkt in den Code eingefügt werden, ohne dass eine Vorcodierung möglich ist. (Es stammt aus einer Vorlagensprache, die das JS erstellt - immer noch aus einer vertrauenswürdigen Quelle und nicht aus einer Formularübermittlung, daher ist es nicht VOLLSTÄNDIG dement).
Oktober
Dies war die einzige Methode, die für mich tatsächlich funktioniert hat, um eine mehrzeilige Javascript-Zeichenfolgenvariable aus einer Java-Zeichenfolge zu erstellen.
Anfänger_
4
Was ist, wenn die Zeichenfolge HTML ist?
Dan Dascalescu
4
$ ('# UniqueID'). Content ()
mplungjan
1
@Pacerier Alles, was ich von Google und anderen Websites gelesen habe, besagt, dass Google heutzutage display:noneInhalte indiziert , was höchstwahrscheinlich auf die Beliebtheit von Frontends im JavaScript-Stil zurückzuführen ist. (Zum Beispiel eine FAQ-Seite mit Funktionen zum Ausblenden / Anzeigen.) Sie müssen jedoch vorsichtig sein, da Google sagt, dass sie Sie bestrafen können, wenn der versteckte Inhalt so gestaltet zu sein scheint, dass er Ihre SEO-Rankings künstlich aufbläst.
Gavin
31

Es gibt mehrere Möglichkeiten, dies zu erreichen

1. Schrägstrichverkettung

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

2. regelmäßige Verkettung

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

3. Array Join-Verkettung

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

In Bezug auf die Leistung ist die Slash-Verkettung (erste) die schnellste.

In diesem Testfall finden Sie weitere Details zur Leistung

Aktualisieren:

Mit dem ES2015 können wir die Funktion für Vorlagenzeichenfolgen nutzen. Damit müssen wir nur Back-Ticks verwenden, um mehrzeilige Zeichenfolgen zu erstellen

Beispiel:

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `
Vignesh Subramanian
quelle
11
Ich denke, es ist so, dass Sie gerade das, was bereits seit fünf Jahren auf der Seite steht, wieder auffliegen lassen, aber auf sauberere Weise.
RandomInsano
Enthält die Schrägstrichverkettung nicht auch das Leerzeichen am Zeilenanfang?
f.khantsis
29

Verwenden von Skript-Tags:

  • Fügen <script>...</script>Sie dem headTag einen Block mit Ihrem mehrzeiligen Text hinzu .
  • Holen Sie sich Ihren mehrzeiligen Text wie er ist ... (Achten Sie auf die Textcodierung: 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>
jpfreire
quelle
Ich denke, diese Strategie ist sauber und weit unterausgenutzt. jsrender verwendet dies.
xdhmoore
Ich verwende dies mit innerText iso innerHTML. Aber wie stelle ich sicher, dass die Leerzeichen erhalten bleiben?
David Nouls
Auch Ajax-Abfragen, falls Sie sie verwenden. Sie können versuchen, Ihre Header zu ändern. xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");Ich erinnere mich nicht, dass ich andere Probleme hatte, als Kommentare in JS falsch einzugeben. Räume, in denen es keine Probleme gibt.
jpfreire
24

Ich mag diese Syntax und Indendation:

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

(kann aber eigentlich nicht als mehrzeilige Zeichenfolge betrachtet werden)

semente
quelle
3
Ich benutze dies, außer ich setze das '+' am Ende der vorhergehenden Zeile, um zu verdeutlichen, dass die Anweisung in der nächsten Zeile fortgesetzt wird. Ihr Weg richtet die Einrückungen jedoch gleichmäßiger aus.
Sean
@ Sean Ich benutze dies auch und ich bevorzuge es immer noch, das '+' am Anfang jeder neuen Zeile und das letzte ';' in einer neuen Zeile, weil ich es "korrekter" fand.
AgelessEssence
7
Wenn Sie das + am Anfang setzen, können Sie diese Zeile auskommentieren, ohne andere Zeilen bearbeiten zu müssen, wenn es sich um die erste / letzte Zeile der Sequenz handelt.
Moliade
3
Ich bevorzuge auch das + vorne, da ich visuell nicht bis zum Ende der Zeile scannen muss, um zu wissen, dass das nächste eine Fortsetzung ist.
Daniel Sokolowski
18

Es gibt diese Bibliothek, die es schön macht:

https://github.com/sindresorhus/multiline

Vor

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

Nach

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});
mächtig
quelle
1
Diese Unterstützung bei der nodejsVerwendung im Browser muss vorsichtig sein.
Huei Tan
3
@HueiTan Docs geben an, dass es auch im Browser funktioniert. Was Sinn macht - es ist einfach Function.prototype.String().
Mikemaccana
ya aber es hieß "Während es im Browser einwandfrei funktioniert, ist es hauptsächlich für die Verwendung in Node.js vorgesehen. Die Verwendung erfolgt auf eigenes Risiko. Während es im Browser einwandfrei funktioniert, ist es hauptsächlich für die Verwendung in Node.js vorgesehen auf eigene Gefahr." (Nur vorsichtig XD)
Huei Tan
@HueiTanYep Ich habe diesen Teil gelesen. Aber Function.prototype.toString () ist ziemlich stabil und bekannt.
Mikemaccana
1
Beste Antwort für mich, weil es zumindest mehrzeilig wird, ohne den ganzen Müll in der Mitte (den Müll am Anfang und am Ende, mit dem ich umgehen kann).
Damien Golding
14

Downvoters : Dieser Code dient nur zur Information.

Dies wurde in Fx 19 und Chrome 24 auf dem Mac getestet

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>

mplungjan
quelle
13
Das ist schrecklich. +1. Und Sie können document.currentScript anstelle von getElement verwenden ...
Orwellophile
1
Undefiniertes "Sie" in Chrom für osx
mplungjan
1
jsfiddle-fixed - Ich muss "Sie" global in meiner Konsole definiert haben. Funktioniert jetzt (Chrome / OSX). Das Schöne am Hinzufügen des Kommentars zu einer Variable ist, dass Sie sich nicht in einem Funktionskontext befinden, jsfiddle-function-heredoc, obwohl die Funktionssache für Klassenmethoden cool wäre. Vielleicht ist es besser, es trotzdem als Ersatz für {this: that} zu übergeben. Es macht trotzdem Spaß, etwas Verrücktes an seine Grenzen zu bringen :)
Orwellophile
1
Vergiss die Hasser. Dies ist die einzig richtige Antwortleiste ES6. Alle anderen Antworten erfordern eine Verkettung, eine Berechnung oder ein Escapezeichen. Das ist eigentlich ziemlich cool und ich werde es verwenden, um einem Spiel, an dem ich als Hobby arbeite, Dokumentation hinzuzufügen. Solange dieser Trick nicht für irgendetwas verwendet wird, das einen Fehler hervorrufen könnte (ich kann sehen, wie jemand "Semikolon, derp. Lasst uns den Kommentar in die nächste Zeile setzen." Und dann bricht er Ihren Code.) Aber ist das ist wirklich eine große Sache in meinem Hobbyspiel? Nein, und ich kann den coolen Trick für etwas Nützliches verwenden. Gute Antwort.
Thomas Dignan
2
Ich war noch nie mutig genug, diese Technik im Produktionscode zu verwenden, aber wo ich sie häufig verwende, sind Unit-Tests, bei denen es oft am einfachsten ist, den Wert einer Struktur als (ziemlich lange) Zeichenfolge auszugeben und mit dieser zu vergleichen was es sein sollte.
Ben McIntyre
10

Zusammenfassend habe ich zwei Ansätze ausprobiert, die hier in der Benutzer-Javascript-Programmierung (Opera 11.01) aufgeführt sind:

Daher empfehle ich den Arbeitsansatz für Opera-Benutzer JS-Benutzer. Im Gegensatz zu dem, was der Autor sagte:

Es funktioniert nicht bei Firefox oder Oper. nur auf IE, Chrome und Safari.

Es funktioniert in Opera 11. Zumindest in Benutzer-JS-Skripten. Schade, dass ich einzelne Antworten nicht kommentieren oder die Antwort nicht bewerten kann, ich würde es sofort tun. Wenn möglich, macht es jemand mit höheren Privilegien bitte für mich.

Tyler
quelle
Dies ist mein erster tatsächlicher Kommentar. Ich habe vor 2 Tagen das Upvote-Privileg erhalten, daher habe ich die oben erwähnte Antwort sofort upvotiert. Vielen Dank an alle, die meinen schwachen Versuch, zu helfen, positiv bewertet haben.
Tyler
Vielen Dank an alle, die diese Antwort tatsächlich positiv bewertet haben: Ich habe jetzt genug Berechtigungen, um normale Kommentare zu veröffentlichen! Also nochmals vielen Dank.
Tyler
10

Meine Erweiterung zu https://stackoverflow.com/a/15558082/80404 . Es erwartet einen Kommentar in einer Form, /*! any multiline comment */in der Symbol! wird verwendet, um das Entfernen durch Minimierung zu verhindern (zumindest für YUI-Kompressor)

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

Beispiel:

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

Aktualisiert für 2015 : Es ist jetzt sechs Jahre später: Die meisten Benutzer verwenden einen Modullader, und die Hauptmodulsysteme verfügen jeweils über Möglichkeiten zum Laden von Vorlagen. Es ist nicht inline, aber die häufigste Art von mehrzeiligen Zeichenfolgen sind Vorlagen, und Vorlagen sollten im Allgemeinen sowieso aus JS herausgehalten werden .

require.js: 'Text erfordern'.

Verwenden des Text-Plugins require.js mit einer mehrzeiligen Vorlage in template.html

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

NPM / browserify: das 'brfs'-Modul

Browserify verwendet ein 'brfs'-Modul , um Textdateien zu laden. Dadurch wird Ihre Vorlage tatsächlich in Ihr gebündeltes HTML integriert.

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

Einfach.

Mikemaccana
quelle
9

Wenn Sie bereit sind , die maskierten Newlines zu verwenden, können sie verwendet werden , schön . Es sieht aus wie ein Dokument mit einem Seitenrand .

Geben Sie hier die Bildbeschreibung ein

SEO
quelle
2
Würde dies nicht überflüssige Leerzeichen hinzufügen?
TomByrer
1
@ TomByrer Ja, gute Beobachtung. Es ist nur gut für Zeichenfolgen, bei denen Sie sich nicht für Leerzeichen interessieren, z. B. HTML.
seo
9

Das Äquivalent in Javascript ist:

var text = `
This
Is
A
Multiline
String
`;

Hier ist die Spezifikation . Siehe Browserunterstützung am Ende dieser Seite . Hier sind auch einige Beispiele .

Lonnie Best
quelle
8

Dies funktioniert in IE, Safari, Chrome und Firefox:

<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>
stillatmycomputer
quelle
6
Denken Sie nur darüber nach. Glaubst du, es ist gültig? Glauben Sie nicht, dass dies zu Anzeigeproblemen führen kann?
Sk8erPeter
5
Warum die Abstimmungen? Dies ist eine kreative Antwort, wenn auch nicht sehr praktisch!
Dotancohen
2
Nein, ist es nicht. Man sollte lieber Vorlagen verwenden: $ .tmpl () ( api.jquery.com/tmpl ) oder EJS ( embeddedjs.com/getting_started.html ) usw. Ein Grund für Abstimmungen ist, dass es wirklich weit von einem gültigen Code und der Verwendung entfernt ist Dies kann zu großen Anzeigeproblemen führen.
Sk8erPeter
Ich hoffe, dass niemand diese Antwort jemals in der Praxis verwendet, aber es ist eine nette Idee
DCShannon
7

Sie können TypeScript (JavaScript SuperSet) verwenden, es unterstützt mehrzeilige Zeichenfolgen und transpiliert ohne Overhead zurück zu reinem JavaScript:

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

alert(templates.myString);

Wenn Sie dasselbe mit einfachem JavaScript erreichen möchten:

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)

Beachten Sie, dass das iPad / Safari nicht unterstützt 'functionName.toString()'

Wenn Sie viel Legacy-Code haben, können Sie auch die einfache JavaScript-Variante in TypeScript verwenden (zu Bereinigungszwecken):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

und Sie können das mehrzeilige Zeichenfolgenobjekt aus der einfachen JavaScript-Variante verwenden, bei dem Sie die Vorlagen in eine andere Datei einfügen (die Sie im Bundle zusammenführen können).

Sie können TypeScript unter http://www.typescriptlang.org/Playground ausprobieren

Stefan Steiger
quelle
Dokumentation zur iPad / Safari-Einschränkung? MDN scheint zu denken, dass alles gut ist - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Campbeln
@Campbeln: CoWorker hat mir das gesagt (er hat den Code benutzt). Habe es nicht selbst getestet. Könnte auch von der iPad / Safari-Version abhängen - hängt also wahrscheinlich davon ab.
Stefan Steiger
6

Die ES6-Methode besteht darin, Vorlagenliterale zu verwenden:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Mehr Referenz hier

jenil christo
quelle
Diese Antwort ist nicht nur klein, unvollständig und schlecht formatiert, sondern fügt den vorherigen Antworten auch absolut nichts hinzu. Markieren und hüpfen, um gelöscht zu werden.
Victor Schröder
5

Mit ES6 können Sie einen Backtick verwenden, um eine Zeichenfolge in mehreren Zeilen anzugeben. Es heißt Template Literal. So was:

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

Die Verwendung des Backticks funktioniert in NodeJS und wird von Chrome, Firefox, Edge, Safari und Opera unterstützt.

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

Earl3s
quelle
4

Der einfachste Weg, mehrzeilige Zeichenfolgen in Javascrips zu erstellen, ist die Verwendung von Backticks (``). Auf diese Weise können Sie mehrzeilige Zeichenfolgen erstellen, in die Sie Variablen einfügen können${variableName} .

Beispiel:

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

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

my age is: ${age}
`;

console.log(multilineString);

Kompatibilität:

  • Es wurde in ES6// eingeführtes2015
  • Es wird jetzt von allen großen Browser-Anbietern (außer Internet Explorer) nativ unterstützt.

Überprüfen Sie hier die genaue Kompatibilität in Mozilla-Dokumenten

Willem van der Veen
quelle
Ist dies jetzt mit allen aktuellen Browsern kompatibel? Oder gibt es einige Browser, die diese Syntax immer noch nicht unterstützen?
cmpreshn
Entschuldigung für meinen extrem späten Kommentar, bearbeitet die Antwort hinzugefügt Kompatibilitätsinformationen;)
Willem van der Veen
3

Meine Version des Array-basierten Joins für String Concat:

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

Dies hat bei mir gut funktioniert, zumal ich häufig Werte in das so erstellte HTML einfüge. Aber es gibt viele Einschränkungen. Einrückung wäre schön. Es wäre wirklich schön, nicht mit verschachtelten Anführungszeichen umgehen zu müssen, und nur die Sperrigkeit stört mich.

Nimmt das Hinzufügen des .push () zum Array viel Zeit in Anspruch? Siehe diese verwandte Antwort:

( Gibt es einen Grund, warum JavaScript-Entwickler Array.push () nicht verwenden? )

Wenn man sich diese (gegensätzlichen) Testläufe ansieht, sieht es so aus, als ob .push () für String-Arrays in Ordnung ist, die wahrscheinlich nicht über 100 Elemente wachsen werden. Ich werde es zugunsten indizierter Adds für größere Arrays vermeiden.

KTys
quelle
3

Sie können verwenden, +=um Ihre Zeichenfolge zu verketten, scheint niemand darauf geantwortet zu haben, was lesbar und auch ordentlich sein wird ... so etwas

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

kann auch geschrieben werden als

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

console.log(hello);
Mr. Alien
quelle
3

Beachten Sie auch, dass beim Erweitern der Zeichenfolge über mehrere Zeilen mit einem vorwärts gerichteten Backslash am Ende jeder Zeile zusätzliche Zeichen (meistens Leerzeichen, Tabulatoren und Kommentare, die versehentlich hinzugefügt wurden) nach dem vorwärts gerichteten Backslash einen unerwarteten Zeichenfehler verursachen, dessen Suche eine Stunde gedauert hat aus

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

Bitte verwenden Sie aus Liebe zum Internet die Verkettung von Zeichenfolgen und verwenden Sie hierfür keine ES6-Lösungen. ES6 wird NICHT auf der ganzen Linie unterstützt, ähnlich wie CSS3 und bestimmte Browser, die sich nur langsam an die CSS3-Bewegung anpassen. Verwenden Sie einfaches altes JavaScript. Ihre Endbenutzer werden es Ihnen danken.

Beispiel:

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

Pragmatiq
quelle
3
Obwohl
2

Sie müssen den Verkettungsoperator '+' verwenden.

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

Durch die Nutzung \n Ihres Quellcodes wird wie folgt aussehen:

Diese 
 <br> ist
 <br> mehrzeilig
 <br> String.

Wenn Sie <br>Ihren Browser verwenden, sieht die Ausgabe wie folgt aus:

Diese
ist
mehrzeilig
Zeichenfolge.
Sonevol
quelle
1

Ich denke, diese Problemumgehung sollte in IE, Chrome, Firefox, Safari, Opera funktionieren -

Verwenden von jQuery :

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

Verwenden von reinem Javascript:

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

Prost!!

Aditya Hajare
quelle
<xmp>ist so veraltet. Es ist möglicherweise in HTML zulässig, sollte jedoch von keinem Autor verwendet werden. Siehe stackoverflow.com/questions/8307846/…
Bergi
@Bergi, Sie haben Recht .. und die Verwendung <pre>;mit Escapezeichen wird bei meiner Lösung nicht helfen .. Ich bin heute auf ein ähnliches Problem gestoßen und habe versucht, eine Problemumgehung zu finden .. aber in meinem Fall habe ich einen sehr einfachen Weg gefunden, um dieses Problem zu beheben Platzieren der Ausgabe in HTML-Kommentaren anstelle von <xmp> oder einem anderen Tag. lol. Ich weiß, dass dies kein Standard ist, aber ich werde morgen früh mehr an diesem Thema arbeiten. Prost !!
Aditya Hajare
Leider style="display:none"versucht auch Chrome, <img>die im Beispielblock genannten Bilder zu laden .
Jesse Glick
0

Ich habe gerade die anonyme Antwort ausprobiert und festgestellt, dass es hier einen kleinen Trick gibt. Es funktioniert nicht, wenn nach dem Backslash ein Leerzeichen steht. \
Die folgende Lösung funktioniert also nicht -

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

Aber wenn Platz entfernt wird, funktioniert es -

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

alert(x.test);​

Ich hoffe es hilft !!

Anmol Saraf
quelle
7
Wenn Sie nach einem Backslash ein Leerzeichen haben, wird das Leerzeichen natürlich aus dem Leerzeichen entfernt. Es soll dem Zeilenumbruch entkommen, nicht dem Weltraum.
Sejanus