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>