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 < 3; i++) {
const key = `variable${i}`;
data.variables.push(namespace[key]);
}
// 渲染模板
const template = Handlebars.compile(`
{{#each variables}}
{{#if @first}}A = "{{this}}";{{/if}}
{{#if @second}}B = "{{this}}";{{/if}}
{{#if @third}}C = "{{this}}";{{/if}}
{{/each}}
`);
console.log(template(data)); // 输出：A = "Apple"; B = "Banana"; C = "Cherry";⚠️ 注意事项：
- ❌ 避免直接依赖
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}} 渲染，既清晰又可维护，也完全兼容客户端与服务端渲染环境。
