双花括号 `{{ }}` 和三花括号 `{{{ }}}` 在 Mustache 模板中有什么区别？

在Mustache模板中，双花括号{{ }}和三花括号{{{ }}}的区别在于变量的HTML转义。

双花括号{{ }}用于在模板中插入变量的值，并且会对变量进行HTML转义。这意味着如果变量的值包含HTML标签或特殊字符（如<或>），它们将被转义为HTML实体，以避免XSS攻击。

示例代码：

<script>
  var data = {
    name: "John",
    message: "<strong>Hello World!</strong>"
  };
</script>

<div>
  <h1>{{name}}</h1>
  <p>{{message}}</p>
</div>

该模板将输出：

<div>
  <h1>John</h1>
  <p>&lt;strong&gt;Hello World!&lt;/strong&gt;</p>
</div>

而三花括号{{{ }}}用于在模板中插入变量的值，但不会进行HTML转义。这意味着变量的值将直接输出，而不会被转义。

示例代码：

<script>
  var data = {
    name: "John",
    message: "<strong>Hello World!</strong>"
  };
</script>

<div>
  <h1>{{name}}</h1>
  <p>{{{message}}}</p>
</div>

该模板将输出：

<div>
  <h1>John</h1>
  <p><strong>Hello World!</strong></p>
</div>

使用双花括号{{ }}进行HTML转义是Mustache的默认行为，以确保输出的内容安全。但如果您确定变量的值是安全的，并且不希望进行转义，可以使用三花括号{{{ }}}。