Erstellen mehrzeilige Strings in JavaScript

StackOverflow https://stackoverflow.com/questions/805107

Frage

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
War es hilfreich?

Lösung

Update:

ECMAScript 6 (ES6) stellt eine neue Art von literal, nämlich template Literalen . Sie haben viele Features, variable Interpolation unter anderem, aber am wichtigsten ist für diese Frage, sie können mehrzeilige sein.

Eine Vorlage wörtliche wird begrenzt durch Backticks : 

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

(Hinweis: Ich bin nicht dafür, HTML in Zeichenkette zu verwenden)

Browser-Unterstützung ist OK , aber Sie können verwenden transpilers mehr kompatibel zu sein.

Original ES5 Antwort:

Javascript nicht über eine hier-Dokument Syntax. Sie können die wörtliche Newline entkommen, aber das kommt in der Nähe: 

"foo \
bar"

Andere Tipps

ES6 Update:

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

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

Die Interpolation Variablen ist eine beliebte neue Funktion, die mit Back-tick begrenzter Zeichenfolge kommt: 

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

Dies ist nur transpiles bis Verkettung: 

user.name + ' liked your post about strings'

Original ES5 Antwort:

  

Googles JavaScript-Styleguide String-Verkettung zu verwenden, empfiehlt stattdessen entrinnen Zeilenumbrüche:

     

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

Die Leerzeichen am Anfang jeder Zeile können nicht sicher bei der Kompilierung abgezogen werden; Leerzeichen nach dem Schrägstrich wird bei schwierigen Fehlern führen; und während die meisten Skriptmodule dies zu unterstützen, ist es nicht Teil von ECMAScript.

     

Verwenden Sie die String-Verkettung statt: 

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 HERE ist in js nicht verfügbar (ich viel in meinen guten alten Perl Tagen erinnerte verwenden).

Aufsicht zu halten mit komplexen oder langen mehrzeiligen Strings ich manchmal ein Array Muster verwenden: 

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

oder das Muster anonym bereits gezeigt (Escape Newline), die ein hässlicher Block im Code sein kann: 

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

Hier ist eine andere komisch, aber arbeiten '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 Spanning Strings über mehrere Zeilen mit Vorlage Strings : 

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 wird nach minifying / Verschleiern Code verloren

Sie können haben mehrzeilige Strings in reinem JavaScript.

Diese Methode basiert auf der Serialisierung von Funktionen basieren, die definiert ist implementierungsabhängig sein . Es funktioniert in den meisten Browsern (siehe unten), aber es gibt keine Garantie, dass es noch in der Zukunft funktionieren wird, so verlassen Sie sich nicht darauf.

Mit der folgenden Funktion: 

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

können Sie haben hier-Dokumente wie folgt aus: 

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

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

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

Seien Sie mit Ihrem minifier vorsichtig. Es neigt dazu, Kommentare zu entfernen. Für die YUI Kompressor , ein Kommentar mit /*! beginnen (wie ich sie verwendet wird) bleiben erhalten.

Ich denke, eine real Lösung Coffee zu verwenden wäre.

Sie können dies tun ... 

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

ich kam mit diesem sehr jimmy Methode eines Mehr ausgekleideten String in Ordnung gebracht. Da die Umwandlung auch eine Funktion in einen String keine Kommentare innerhalb der Funktion zurückgibt können Sie die Kommentare als Zeichenfolge verwenden, um eine mehrzeilige Kommentar mit / ** /. 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)

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

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

Weiß jemand, der eine Umgebung, wo es HTML ist, aber es funktioniert nicht?

Ich löste dies durch ein div ausgibt, es versteckt zu machen, und den Aufruf der div id von jQuery, wenn ich es brauchte.

z. 

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

Dann, wenn ich die Zeichenfolge erhalten muß, verwende ich nur die folgende jQuery: 

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

Welche meinen Text über mehrere Zeilen zurückgibt. Wenn ich rufe 

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

ich:

eingeben Bild Beschreibung hier

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

Performance weise, Slash Verkettung (erste) ist die schnellste.

Sehen dieser Testfall , um weitere Informationen in Bezug auf die Leistung

Update:

Mit der ES2015 , können wir die Vorteile der Vorlage Strings nehmen verfügen. Damit brauchen wir nur für die Erstellung von Multi-Line-Strings zurück-Zecken verwenden

Beispiel: 

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

Mit Script-Tags:

  • fügen Sie einen <script>...</script> Block Ihre mehrzeiligen Text in head Tag enthält;

  • Ihr mehrzeiligen Text bekommen wie ... (achten Sie auf 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 Vertiefung: 

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

(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 wird für Informationen geliefert nur.

Das hat in Fx 19 und Chrome 24 auf 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'));

zusammenzufassen, ich habe zwei Ansätze versucht hier aufgeführten Benutzer JavaScript-Programmierung (Opera 11.01):

So empfehle ich den Arbeitsansatz für Opera Benutzer JS Benutzer. Im Gegensatz zu, was der Autor sagen will:

  

Es funktioniert nicht auf Firefox oder Opera; nur auf IE, Chrome und Safari.

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

Aktualisiert für 2015 : Es ist sechs Jahre später jetzt: Die meisten Leute benutzen ein Modul-Lader und die Hauptmodulsysteme verfügen jeweils über Möglichkeiten zum Laden Vorlagen. Es ist nicht inline, aber die häufigste Art von mehrzeiligen String sind Vorlagen und Vorlagen im Allgemeinen aus JS ohnehin gehalten werden sollten .

require.js:. 'Erfordern Text'

Mit require.js 'text' Plugin , mit einer mehrzeiligen Vorlage in template.html 

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

NPM / browserify: das 'BRFs' Modul

verwendet eine 'BRFs' Modul Textdateien zu laden. Dies wird tatsächlich Ihre Vorlage in Ihr gebündelt HTML bauen. 

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 .

eingeben Bild Beschreibung hier

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>

Meine Erweiterung https://stackoverflow.com/a/15558082/80404 . Es erwartet Kommentar in einer Form /*! any multiline comment */ wo Symbol! verwendet wird, durch Entfernen von minification 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();

Das Äquivalent in Javascript ist: 

var text = `
This
Is
A
Multiline
String
`;

Hier ist die Spezifikation . Siehe Browser-Unterstützung auf der Unterseite dieses . Hier sind einige Beispiele zu .

Sie können Typoskript (JavaScript SuperSet), unterstützt mehrzeilige Strings und transpiles wieder auf rein JavaScript ohne Overhead: 

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

alert(templates.myString);

Wenn Sie sie wollen das gleiche mit einfacher JavaScript erreichen: 

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

Wenn Sie eine Menge von Legacy-Code haben, können Sie auch die Ebene JavaScript-Variante in Typoskript verwenden (für die Bereinigung Zwecke): 

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

und Sie können das mehrzeilige-String-Objekt aus der Ebene JavaScript-Variante verwenden, wo Sie die Vorlagen in einer anderen Datei setzen (die Sie im Bündel zusammenführen können).

Sie können versuchen, Typoskript bei
http://www.typescriptlang.org/Playground

ES6 können Sie eine Graviszeichen verwenden, um eine Zeichenfolge auf mehreren Zeilen angeben. Es ist eine Schablone Literal genannt. Wie folgt aus: 

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

Graviszeichen Verwendung arbeitet in NodeJS, und es wird unterstützt von Chrome, Firefox, Rand, Safari und Opera.

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

Der einfachste Weg, mehrzeilige Strings in Javascrips zu machen, ist bei der Verwendung von Backticks ( ``). Auf diese Weise können Sie mehrzeilige Zeichenketten erstellen, in dem 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 war einleitet in ES6 // es2015
  • Es wird nun nativ von allen großen Browser-Anbieter unterstützt (außer Internet Explorer)

hier genaue Kompatibilität in Mozilla docs prüfen

Meine Version von Array-basierten für String concat verbinden: 

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

Das hat gut für mich gearbeitet, vor allem weil ich oft Werte in den HTML-Code auf diese Weise konstruiert einfügen. Aber es hat viele Einschränkungen. Einrückungen wäre schön. Nicht mit mit verschachtelten Anführungszeichen zu behandeln wäre wirklich schön, und nur die Sperrigkeit der es mich stört.

Ist das .push () auf das Array viel Zeit in Anspruch nimmt hinzufügen? Sehen Sie diese im Zusammenhang Antwort:

( Gibt es einen Grund Entwickler JavaScript don‘ t verwenden Array.push ()? )

Nach einem Blick auf diese (gegenüberliegenden) Testläufe, es sieht aus wie .push () ist für String-Arrays in Ordnung, die wahrscheinlich nicht mehr als 100 Artikel wachsen wird - ich habe es für indizierte fügt für größere Arrays vermeiden

Sie können += verwenden Zeichenfolge verketten, scheint niemand antwortete, dass, die lesbar ist, und auch ordentlich ... so etwas wie dieses 

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

kann auch geschrieben werden 

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

console.log(hello);
mit nach vorn Backslash am Ende jeder Zeile

Auch Sie beachten Sie, dass, wenn String über mehrere Zeilen erstrecken, keine zusätzlichen Zeichen (meist Leerzeichen, Tabs und Kommentare versehentlich hinzugefügt) nach vorne Backslash unerwartetes Zeichen Fehler verursachen wird, was ich eine nahm Stunde, um herauszufinden, 

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

Bitte für die Liebe der Internet-Nutzung String-Verkettung und entscheiden sich nicht ES6 Lösungen für diese zu verwenden. ES6 ist nicht alles auf der ganzen Linie, ähnlich wie CSS3 und bestimmten Browsern unterstützt langsam zu sein, um die CSS3 Bewegung anzupassen. Verwenden Sie eine einfache ol‘JavaScript, Endbenutzer wird es Ihnen danken.

Beispiel:

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

Sie haben 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 Verwendung von \n Code Quelle aussehen wird - 

This 
 <br>is
 <br>multiline
 <br>string.

Durch die Verwendung von <br> Ihren Browser Ausgabe aussehen wird - 

This
is
multiline
string.

Die ES6 Art und Weise tun, indem Sie Vorlage Literale wäre: 

const str = `This 

is 

a

multiline text`; 

console.log(str);

Weitere Referenz hier

Ich denke, das Problem zu umgehen sollte in IE funktionieren, Chrome, Firefox, Safari, Opera -

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

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

versucht, einfach die Anonymous Antwort und fand es gibt einen kleinen Trick hier, funktioniert es nicht, wenn es ein Leerzeichen nach Backslash \
ist So ist die folgende Lösung funktioniert nicht - 

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

Aber wenn der Platz entfernt wird es funktioniert - 

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

alert(x.test);​

Hoffe, es hilft !!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top