
Handlebars 不支持直接通过字符串拼接(如 {{result[0]}})解析为变量名,但可通过 JavaScript 预处理将动态变量名映射为实际值,并传入模板上下文,实现类似“变量名反射”的效果。
handlebars 不支持直接通过字符串拼接(如 `{{result[0]}}`)解析为变量名,但可通过 javascript 预处理将动态变量名映射为实际值,并传入模板上下文,实现类似“变量名反射”的效果。
在 Handlebars 中,模板语法是静态编译型的:{{variable0}} 会被解析为上下文对象中名为 variable0 的属性,而 {{result[0]}} 仅尝试读取 result 数组的第一个元素——它不会进一步将该字符串(如 "variable0")当作键去查找其他变量。因此,无法在模板内原生实现 {{ "variable" + i }} 这类动态变量插值。
✅ 正确做法:在渲染前,由 JavaScript 主动完成变量名到值的映射,并将结果作为普通数据传入模板。
例如,假设你有若干全局变量 variable0, variable1, ..., variableN,推荐做法如下:
// ✅ 推荐:使用独立数据对象(避免污染 window)
const data = {
variables: []
};
// 动态收集变量值(假设它们已定义在某个命名空间下)
const namespace = {
variable0: 'Apple',
variable1: 'Banana',
variable2: 'Cherry'
};
for (let i = 0; i <p>⚠️ 注意事项:</p>
- ❌ 避免直接依赖
window['variable' + i]:全局污染、调试困难、SSR(服务端渲染)不兼容、违反模块化原则; - ✅ 始终将动态数据显式组织为结构化对象(如
variables: [...]或vars: { variable0: ..., variable1: ... }),再传入模板; - 若需更灵活的键名访问(如
{{getVariable "variable0"}}),可注册自定义 Helper:Handlebars.registerHelper('getVariable', function(key, options) { return options.data.root[key]; // 安全读取根上下文属性 }); // 模板中使用:A = {{getVariable "variable0"}};
总结:Handlebars 的设计哲学是“逻辑分离”——动态计算应在 JavaScript 层完成,模板只负责安全、声明式地展示已有数据。把变量名数组转为值数组,再用 {{#each}} 渲染,既清晰又可维护,也完全兼容客户端与服务端渲染环境。










