### [Handlebars 动态变量名：在 JS 层预处理](https://www.huociguo.com/article/1547)

**Published:** 2026-09-30T05:31:30

**Author:** 米了

**Excerpt:** 模板语法是静态的，拼接出的字符串不会被当成变量名。做法是在传入模板前把键映射成值，含 lookup 用法与预处…

Handlebars 的模板语法在编译期确定，运行期拼出来的字符串不会被当成变量名解析。期望用 `{{result[0]}}` 这类写法按索引取变量，模板只会把它当成一条普通路径，输出为空或原样保留。

![屏幕上显示 JavaScript 代码，用于说明模板变量的数据预处理](https://api.huociguo.com/wp-content/uploads/2026/09/c10.jpg)

变量名的解析发生在编译期，动态取值要前置到数据层

## 能做的一件事：lookup

```handlebars
{{lookup this fieldName}}
```

```js
const html = template({ fieldName: 'title', title: '示例标题' });
```

lookup 接收对象与键名，适合字段名来自变量、层级只有一层的场景。嵌套路径与表达式拼接仍然不支持。

## 更通用的做法：在 JS 层预处理

```js
const keys = ['title', 'author', 'date'];
const data = {
  rows: list.map((row) => ({
    cells: keys.map((key) => ({ key, value: row[key] ?? '' }))
  }))
};

const html = template(data);
```

```handlebars
{{#each rows}}
  <tr>
    {{#each cells}}
      <td data-field="{{key}}">{{value}}</td>
    {{/each}}
  </tr>
{{/each}}
```

把「按变量名取值」转成「按键取值后一起传进模板」，模板里只剩遍历与输出，不再依赖运行期解析。列顺序、字段白名单、缺省值都在 JS 层控制。

## 三个注意点

1.  不要用 eval 或 new Function 拼表达式。模板层没有这类能力，硬加会引入注入风险。
2.  预处理时定白名单。字段名来自外部输入时先与白名单求交集，避免把内部字段渲染出去。
3.  转义交给模板。取值后由 `{{value}}` 做 HTML 转义，需要原样输出时用三个大括号并确认来源可信。

## 取舍

字段固定的表格直接用点路径最省事；字段名由配置或后端下发的场景，走 JS 层预处理。定下这一条之后，模板不需要为动态取值再引入自定义 helper。

**Tags:** Handlebars, 前端模板, 变量作用域, 数据预处理, 模板引擎

**Categories:** HTML5

---