javascript轉義字符串中的換行符

Question

我必須在模板中定義一個變量，這樣我的模板渲染器就會替換它中的值。 然后我必須在我的一些javascript函數中使用此變量。

變量本身就是一些html，我希望能夠對它進行格式化，使其看起來像HTML，而不是一個不可讀的超長單行字符串......

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

我能看到讓它發揮作用的唯一方法就是這樣做（非常難看）

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

有友好的方式來做到這一點嗎？

Answer 1

插入源中的任何新行字符都是模板文字的一部分。 使用普通字符串，您必須使用以下語法才能獲得多行字符串 ：

 var myHTML = '<div>\\n content\\n</div>'; console.log(myHTML); 

對於更高級的用例，您可以在這些前5個JavaScript模板引擎之一上實現您的解決方案：

• 胡子
• 下划線模板
• 嵌入式JS模板
• HandlebarsJS
• 翡翠模板

Answer 2

一種常用且友好的方法是將模板字符串放在其自己的<script>元素中，並將type屬性設置為text/x-something ，因為此元素可以通過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> 

Answer 3

1. 你只需要在字符串的每一行（除了最后一行）的末尾加上反斜杠“\\”，然后按Enter鍵進入換行符。

2. 在你的情況下：

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