文字列のjavascriptエスケープ改行

Question

テンプレートで変数を定義して、テンプレートレンダラーがその値を置き換える必要があります。私は私が持っているいくつかのJavaScript関数でこの変数を使用する必要があります。私が見ることができる唯一の方法

変数は、一部のHTML自体であり、私はそれが読めない超長い1行の文字列HTMLのように見えないように、それをフォーマットすることができるようにしたい...

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

それを行うには、これを行うことです（実際に醜い）

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

これを行うにはフレンドリーな方法はありますか？

Answer 1

ソースに挿入された改行文字は、テンプレートリテラルの一部です。あなたはこれらのtop 5 JavaScript templating enginesの1の上にあなたのソリューションを実装することができ、より高度な使用方法の場合については

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

 
console.log(myHTML);

：通常の文字列を使用して、multi-line stringsを取得するために、次の構文を使用する必要があります：

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

Answer 2

A一般的に使用されると、この要素がアクセス可能になるように、これに優しいアプローチは、text/x-somethingに設定し、type属性を持つ独自の<script>要素にテンプレート文字列を置くことですjavascriptでは表示されますが、ブラウザでは表示されません。

これにより、エスケープや改行の特別な処理をすることなく、通常どおりにHTML（テンプレートマークアップと同様）を書くことができます。

このアプローチの作業のデモ：

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