Handlebars 基本语法：变量、表达式与注释
🎯 引言
学会这篇文章，你将掌握 Handlebars 里最常用的语法：如何输出变量、访问对象属性、输出原始 HTML，以及如何写注释。这些都是日常开发中最高频的用法。
🧱 输出普通变量
在 Handlebars 中，用两个大括号 {{ }} 包裹变量名，就可以把数据渲染到 HTML 中。
const Handlebars = require('handlebars');
const template = '<p>用户名：{{username}}</p>';
const compiled = Handlebars.compile(template);
const html = compiled({ username: '小明' });
console.log(html);
输出：
<p>用户名：小明</p>
✨ 访问对象属性
如果数据是嵌套对象，可以用点号 . 访问深层属性。
const template = '<p>城市：{{user.address.city}}</p>';
const compiled = Handlebars.compile(template);
const html = compiled({
user: {
address: {
city: '上海'
}
}
});
console.log(html);
输出：
<p>城市：上海</p>
也可以用 {{user/name}} 这种斜杠写法，但点号更符合 JavaScript 习惯，推荐优先使用点号。
⚡ 原始 HTML 与转义
Handlebars 默认会对变量内容进行 HTML 转义，防止 XSS 攻击。
const template = '<div>{{content}}</div>';
const compiled = Handlebars.compile(template);
const html = compiled({ content: '<script>alert("xss")</script>' });
console.log(html);
输出：
<div><script>alert("xss")</script></div>
如果你确定内容是安全的，想要输出原始 HTML，可以使用三个大括号 {{{ }}}：
const template = '<div>{{{content}}}</div>';
const compiled = Handlebars.compile(template);
const html = compiled({ content: '<strong>重要信息</strong>' });
console.log(html);
输出：
<div><strong>重要信息</strong></div>
{{{ }}}。 只有当内容完全可信（比如你自己拼接的 HTML）时才使用，否则容易引入 XSS 安全风险。💡 注释
Handlebars 支持两种注释方式：
显示在最终 HTML 中的注释
<!-- 普通 HTML 注释 -->
不会出现在最终 HTML 中的注释
{{! 这是 Handlebars 注释，不会输出到页面 }}
示例：
const template = '{{! 用户信息开始 }}<p>{{name}}</p>{{! 用户信息结束 }}';
const compiled = Handlebars.compile(template);
const html = compiled({ name: '小明' });
console.log(html);
输出：
<p>小明</p>
模板里的注释被移除了，不会出现在最终 HTML 中。
🛠 本章示例汇总
const Handlebars = require('handlebars');
const template = `
<div>
<h1>{{user.name}}</h1>
<p>简介：{{{user.bio}}}</p>
{{! 以下内容仅在模板中可见 }}
<p>来自：{{user.address.city}}</p>
</div>
`;
const compiled = Handlebars.compile(template);
const html = compiled({
user: {
name: '小红',
bio: '<em>热爱前端开发</em>',
address: {
city: '杭州'
}
}
});
console.log(html);
🧾 小节总结
{{name}}用于输出变量内容，默认会进行 HTML 转义。{{user.name}}可以访问嵌套对象属性。{{{html}}}输出原始 HTML，但要谨慎使用，防止 XSS。{{! 注释 }}是 Handlebars 注释，不会输出到最终 HTML。
❓ 知识问答
Q1：{{ }} 和 {{{ }}} 有什么区别？
A：{{ }} 会对内容进行 HTML 转义，{{{ }}} 会原样输出。日常推荐使用 {{ }}，只在内容安全时使用 {{{ }}}。
Q2：如果变量不存在，Handlebars 会报错吗？
A：不会报错，会输出空字符串。比如 {{user.age}} 如果 user 不存在，输出为空。
Q3：Handlebars 注释和 HTML 注释有什么不同？
A：HTML 注释会保留在最终输出中，Handlebars 注释 {{! }} 会在渲染时被移除。
Q4：可以用中括号访问属性吗？
A：Handlebars 支持 {{user.[name]}} 这种写法，但日常点号访问更常见。
🧪 小练习
给定以下数据，请编写 Handlebars 模板并渲染：
const data = {
article: {
title: 'Handlebars 入门',
summary: '<strong>非常实用</strong>的模板引擎'
}
};
// 请在这里编写模板和渲染代码
// 要求：title 用普通变量输出，summary 用原始 HTML 输出
🎉 恭喜你掌握了 Handlebars 的基本语法！下一篇我们会学习内置辅助函数，让模板支持条件判断和循环。