handlerbars {{ 和 {{{ 的区别是什么

在 Handlebars 模板引擎中，{{ 和 {{{ 的主要区别在于 HTML 转义处理。

{{expression}}

• HTML 转义：使用双花括号 {{}} 包裹的表达式会自动进行 HTML 转义。这意味着如果表达式的值包含 HTML 特殊字符（如 <, >, & 等），这些字符会被转义成对应的 HTML 实体。例如，& 会被转义为 &，< 会被转义为 <，以防止 XSS（跨站脚本）攻击[1][3][5]。

{{{expression}}}

• 不进行 HTML 转义：使用三花括号 {{{}}} 包裹的表达式不会进行 HTML 转义。这样可以直接输出包含 HTML 标签的内容。例如，如果表达式的值是 <p>Hello</p>，它会被直接渲染成 HTML 标签，而不会被转义[2][3][5]。

示例

假设有如下模板和数据：

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">{{body}}</div>
  <div class="raw-body">{{{body}}}</div>
</div>

数据：

{
  "title": "My Post",
  "body": "<p>This is a paragraph.</p>"
}

渲染结果如下：

<div class="entry">
  <h1>My Post</h1>
  <div class="body">&lt;p&gt;This is a paragraph.&lt;/p&gt;</div>
  <div class="raw-body"><p>This is a paragraph.</p></div>
</div>

在这个例子中，{{body}} 会将 <p>This is a paragraph.</p> 转义为 <p>This is a paragraph.</p>，而 {{{body}}} 则直接输出原始的 HTML 内容。

总结

• 使用 {{}} 可以确保输出内容是安全的，防止 XSS 攻击。
• 使用 {{{}}} 可以直接输出 HTML 内容，但需要确保输入内容是可信的，以避免安全风险。

参考文献：

• [1] https://blog.csdn.net/zshake/article/details/82145988
• [2] https://handlebarsjs.com/zh/guide/expressions.html
• [3] https://blog.csdn.net/y40152671/article/details/119737575
• [5] https://keenwon.com/992/

Citations:
[1] https://blog.csdn.net/zshake/article/details/82145988
[2] https://handlebarsjs.com/zh/guide/expressions.html
[3] https://blog.csdn.net/y40152671/article/details/119737575
[4] https://www.kancloud.cn/z591102/interview/945440
[5] https://keenwon.com/992/