JavaScript Escape-Zeilenumbrüche in Zeichenfolge

Question

Ich muss eine Variable in einer Vorlage definieren, damit mein Vorlagenrenderer Werte darin ersetzt. Ich muss dann diese Variable in einigen JavaScript-Funktionen verwenden, die ich habe.

Die Variable selbst einige html und ich möchte in der Lage sein, es zu formatieren, so dass es wie HTML aussieht und nicht unleserlich super lange ein Linienzug ...

<script> 
var myHTML = " 
    <div> 
    content 
    </div>" 
</script> 

Der einzige Weg, kann ich sehen, um es zur Arbeit zu bringen wäre das (wirklich hässlich) zu tun

<script> 
var myHTML = "" 
    +"<div>" 
    +"content" 
    +"</div>" 
</script> 

Gibt es eine freundliche Möglichkeit, dies zu tun?

Answer 1

Alle neuen Zeilenzeichen, die in die Quelle eingefügt werden, sind Teil des Vorlagenliterals. Mit normalen Strings, würden Sie die folgende Syntax verwenden, um müssen multi-line strings zu bekommen:

var myHTML = '<div>\n content\n</div>'; 
 

 
console.log(myHTML);

Eine erweiterte Nutzung Fall, dass Sie Ihre Lösung auf eines dieser top 5 JavaScript templating engines implementieren können:

• Mustache
• Underscore Templates
• Embedded JS Templates
• HandlebarsJS
• Jade templating

Answer 2

Ein häufig verwendet und freundlicher Ansatz dazu ist die Vorlage Zeichenfolge in seinem eigenen <script> Elemente mit dem type-Attribute setzt auf text/x-something, da dieses Element zugänglich sein wird von Javascript, aber nicht vom Browser angezeigt.

Damit können Sie HTML (wie auch das Template-Markup) wie gewohnt schreiben, ohne dass Zeilenumbrüche ausgeführt oder spezielle behandelt werden müssen.

Eine Arbeits Demo dieses Ansatzes:

//get the template string 
 
var myHTML = document.getElementById("template1").innerHTML; 
 

 
//check that myHTML contains the template string 
 
console.log(myHTML);

<script type="text/x-template" id="template1"> 
 
    <div> 
 
    content 
 
    </div> 
 
</script>