it-swarm.com.de

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

Aktualisieren:

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

Ein Template-Literal wird durch Backticks begrenzt:

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

(Hinweis: Ich empfehle nicht, HTML in Strings zu verwenden.)

Browser-Unterstützung ist OK , 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 dem wörtlichen Zeilenumbruch entziehen, der sich nähert:

"foo \
bar"
2887
Anonymous

ES6 Update:

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

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

Das Interpolieren von Variablen ist eine beliebte neue Funktion, die durch Back-Tick-Zeichenfolgen getrennt ist:

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

Das geht nur bis zur Verkettung:

user.name + ' liked your post about strings'

Ursprüngliche ES5-Antwort:

Googles JavaScript-Styleguide empfiehlt die Verwendung von Zeichenfolgenverkettung anstelle von Zeilenumbrüchen:

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 während die meisten Skriptmodule 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.';
1233
Devin G Rhode

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 viel 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 angezeigte anonyme Muster (Escape-Newline), das 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 Trick1:

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

661
KooiInc

Sie können mehrzeilige Zeichenfolgen in reinem JavaScript haben.

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.

Mit 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
  • 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 Minenräumer. Es besteht die Tendenz, Kommentare zu entfernen. Für den YUI-Kompressor wird ein Kommentar beibehalten, der mit /*! beginnt (wie der, den ich verwendet habe).

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

338
Jordão

Du kannst das...

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

Ich habe mir diese sehr einfach zu handhabende Methode für eine mehrzeilige Saite ausgedacht. Da das Konvertieren einer Funktion in eine Zeichenfolge auch alle Kommentare innerhalb der Funktion zurückgibt, können Sie die Kommentare mit einem mehrzeiligen Kommentar/**/als Zeichenfolge 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)
133
Luke

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 HTML vorhanden ist, die aber nicht funktioniert?

87
Peter V. Mørch

Ich habe dieses Problem gelöst, indem ich ein div ausgegeben, ausgeblendet und die div-ID von jQuery aufgerufen habe, als ich sie 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();

Welches gibt meinen Text in mehreren Zeilen. Wenn ich anrufe

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

Ich bekomme:

enter image description here

49
Tom Beech

Verwenden von Skript-Tags:

  • fügen Sie einen <script>...</script> -Block mit Ihrem mehrzeiligen Text in das head -Tag ein.
  • erhalten Sie 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>
    
27
jpfreire

Es gibt mehrere Möglichkeiten, dies zu erreichen

1. Slash-Verkettung

  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 Schrägstrichverkettung (erste) die schnellste.

Weitere Informationen zur Leistung finden Sie unter dieser Testfall

Update:

Mit der ES2015 können wir die Template-Strings-Funktion nutzen. Dazu müssen wir nur die 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>
  `
27

Ich mag diese Syntax und Indendation:

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

(Kann aber nicht als mehrzeilige Zeichenfolge angesehen werden.)

24
semente

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

Downvoter : Dieser Code wird nur zu Informationszwecken bereitgestellt.

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>
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));
13
mplungjan

zusammenfassend habe ich 2 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 mit Firefox oder Oper. Nur für IE, chrome und Safari.

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

10
Tyler

Wenn Sie bereit sind, die maskierten Zeilenumbrüche zu verwenden, können Sie sie gut verwenden . Es sieht aus wie ein Dokument mit einem Seitenrand.

enter image description here

9
seo

Aktualisiert für 2015 : Es ist jetzt sechs Jahre her: Die meisten Leute verwenden einen Modullader, und die Hauptmodulsysteme verfügen jeweils über Möglichkeiten zum Laden von Vorlagen. Es ist keine Inline-Zeichenfolge, aber die gebräuchlichste Art von mehrzeiligen Zeichenfolgen sind Vorlagen. Vorlagen sollten generell ohnehin aus JS herausgehalten werden .

require.js: 'erfordert text'.

Verwendung von require.js 'text' plugin , 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 HTML-Paket integriert.

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

Einfach.

9
mikemaccana

Das Äquivalent in Javascript ist:

var text = `
This
Is
A
Multiline
String
`;

Hier ist die Spezifikation . Siehe Browser-Unterstützung am Ende dieses Seite . Hier sind auch einige Beispiele .

8
Lonnie Best

Meine Erweiterung zu https://stackoverflow.com/a/15558082/80404 . Es erwartet Kommentar in einer Form /*! any multiline comment */ wo 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();
8
pocheptsov

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

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

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 'functionName.toString()' nicht unterstützt.

Wenn Sie viel älteren 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, in der Sie die Vorlagen in eine andere Datei einfügen (die Sie im Bundle zusammenführen können).

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

7
Stefan Steiger

Mit ES6 können Sie einen Backtick verwenden, um eine Zeichenfolge in mehreren Zeilen anzugeben. Es wird als Template-Literal bezeichnet. So was:

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

Die Verwendung des Backtick 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

5
earl3s

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

Beispiel:

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

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

my age is: ${age}
`;

console.log(multilineString);

kompatibilität :

  • Es wurde eingeführt in ES6 // es2015
  • Es wird jetzt von allen wichtigen Browsern (außer Internet Explorer) nativ unterstützt.

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

5

Die ES6-Methode wäre die Verwendung von Template-Literalen:

const str = `This 

is 

a

multiline text`; 

console.log(str);

Mehr Referenz hier

4
jenil christo

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 oft Werte in das so konstruierte HTML einfüge. Aber es gibt viele Einschränkungen. Einrückung wäre schön. Sich nicht mit geschachtelten Anführungszeichen befassen zu müssen, wäre wirklich nett, und nur die Sperrigkeit stört mich.

Ist das Hinzufügen von .Push () zum Array sehr zeitaufwendig? Siehe diese verwandte Antwort:

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

Nach dem Betrachten dieser (entgegengesetzten) Testläufe sieht es so aus, als ob .Push () in Ordnung für String-Arrays ist, die wahrscheinlich nicht mehr als 100 Elemente enthalten werden - ich werde es für indizierte Adds für größere Arrays vermeiden.

3
KTys

Bitte benutzen Sie aus Liebe zum Internet die String-Verkettung und entscheiden Sie sich dafür, keine ES6-Lösungen zu verwenden. ES6 wird NICHT generell unterstützt, ähnlich wie CSS3 und bestimmte Browser, die sich nur langsam an die CSS3-Bewegung anpassen. Verwenden Sie einfach altes JavaScript, Ihre Endbenutzer werden es Ihnen danken.

Beispiel:

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

3
Pragmatiq

Beachten Sie auch, dass beim Erweitern eines Strings über mehrere Zeilen mit einem umgekehrten Schrägstrich am Ende jeder Zeile zusätzliche Zeichen (meistens Leerzeichen, Tabulatoren und Kommentare, die versehentlich hinzugefügt wurden) nach dem umgekehrten Schrägstrich einen unerwarteten Zeichenfehler verursachen. Die Suche dauerte eine Stunde aus

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

Sie können += verwenden, um Ihre Zeichenfolge zu verketten. Es scheint, als hätte niemand darauf geantwortet, was lesbar und auch ordentlich ist

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

kann auch geschrieben werden als

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

console.log(hello);
3
Mr. Alien

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>

Wenn Sie \n verwenden, sieht Ihr Quellcode folgendermaßen aus:

 Diese 
 <br> ist eine 
 <br> mehrzeilige 
 <br> Zeichenfolge. 

Wenn Sie <br> verwenden, sieht die Ausgabe Ihres Browsers folgendermaßen aus:

 Diese 
 Ist eine 
 Mehrzeilige 
 Saite. 
2
Sonevol

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

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

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

1
Aditya Hajare

Die Regel lautet: Wenn Sie sich in einer Zeichenfolge befinden, verwenden Sie\n, wo immer Sie eine neue Zeile möchten. Sie müssen kein Leerzeichen vor oder nach dem\n einfügen. Der JavaScript-Interpreter ist so intelligent, dass er weiß, wie lange die nicht druckbare Zeichendarstellung dauert.

0
Raphael Spoerri

Wenn Sie nur in Node ausgeführt werden, können Sie mit dem Modul fs die mehrzeilige Zeichenfolge aus einer Datei einlesen:

var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
  if (err) {
    throw err; 
  }
  diagram = data.toString();
});
0
Charles Brandt

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

0
Anmol Saraf