Erstellen mehrzeiliger Zeichenfolgen in JavaScript

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

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"

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

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

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

¹ Hinweis: Dies geht verloren, nachdem Sie Ihren Code minimiert / verschleiert haben

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

Du kannst das...

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

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)

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?

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:

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

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>

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)

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

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>

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

• Dieser hat nicht funktioniert: Erstellen mehrzeiliger Zeichenfolgen in JavaScript
• Dies hat ziemlich gut funktioniert. Ich habe auch herausgefunden, wie es in der Notepad ++ - Quellansicht gut aussehen kann: Erstellen mehrzeiliger Zeichenfolgen in JavaScript

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.

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

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.

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 .

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 .

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>

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

Die ES6-Methode besteht darin, Vorlagenliterale zu verwenden:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Mehr Referenz hier

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

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

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.

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

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

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

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.

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

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