如何在Handlebars（hbs）文件的script标签中渲染数据

以下是几种比隐藏input更直接的实用方案：

1. 直接在script标签中渲染转义后的JSON #

Handlebars默认会转义HTML字符，所以需要用**三重花括号（{{{}}}）**输出未转义的JSON字符串，让script直接拿到可用的JavaScript对象。

实现步骤： #

• 后端注册Handlebars helper，用于将对象转为合法JSON字符串：

// Node.js后端代码
const hbs = require('hbs');

hbs.registerHelper('safeJSON', function(obj) {
  return JSON.stringify(obj);
});

• 模板中调用helper注入数据：

<script>
  const Labels = {{{safeJSON Labels}}};
  console.log(Labels); // 可直接访问数据属性
</script>

2. 后端预转JSON后传入模板 #

如果不想注册helper，可在后端提前把数据转为JSON字符串，再作为变量传给模板：

实现步骤： #

• 后端处理数据：

// Node.js后端代码
const rawLabels = /* 你的原始数据对象 */;
const labelsJSON = JSON.stringify(rawLabels);

// 同时传递原始数据和JSON字符串给模板
res.render('your-template', { Labels: rawLabels, labelsJSON });

• 模板中直接解析使用：

<script>
  const Labels = JSON.parse(`{{{labelsJSON}}}`);
</script>

用反引号包裹是为了避免数据中的双引号和模板字符串冲突，三重花括号确保JSON不被转义。

3. 通过Puppeteer直接注入数据到浏览器上下文 #

如果数据仅需在浏览器运行时使用，无需写入静态HTML，可以跳过Handlebars模板，直接用Puppeteer把数据注入页面：

// Puppeteer代码
const targetLabels = /* 你的数据对象 */;

await page.evaluate((labels) => {
  // 将数据挂载到全局window对象，页面内script可直接访问
  window.Labels = labels;
}, targetLabels);

// 加载渲染后的HTML页面，即可使用window.Labels
await page.goto('your-rendered-html-url');

这种方法完全分离了模板渲染和数据传递，适合动态数据场景。

内容的提问来源于stack exchange，提问作者Sarthak Agarwal