Node.js+Express+Hbs传递模板变量遇Unexpected identifier错误求助

我来帮你搞定这个问题！你遇到的核心问题是直接在JavaScript里用Handlebars输出的对象会被转成[object Object]字符串，这完全不是有效的JS对象，浏览器自然会抛出语法错误。不管用双花括号还是三花括号，直接输出对象都会触发这个问题——因为Handlebars默认是把所有值转成字符串输出的。

正确的实现方式 #

1. 后端先把对象序列化为JSON字符串

在你的Express路由里，别直接传req对象（更不建议传整个req，里面有很多敏感信息），而是把你需要的属性转换成JSON字符串再传给模板：

app.get('/', (req, res) => {
  // 只提取前端需要的属性，比如用户信息、请求路径
  const frontendReqData = JSON.stringify({
    user: req.user,
    requestPath: req.path
  });
  res.render('index', { frontendReqData });
});

2. 前端模板里解析JSON为JS对象

在index.hbs中，用三重花括号输出未转义的JSON字符串，再用JSON.parse()把它转成合法的JS对象：

<script>
  // 三重花括号避免HTML转义，保证JSON字符串的完整性
  const reqData = JSON.parse('{{{frontendReqData}}}');
  console.log(reqData.user); // 现在可以正常访问对象属性了
</script>

为什么之前的方法没用？ #

• {{req}}：Handlebars会调用对象的toString()方法，直接输出[object Object]，放到JS里就变成const req = [object Object];，这显然是无效语法，所以报Unexpected identifier。
• {{{req}}}：本质和上面一样，还是输出[object Object]字符串，因为对象默认的toString结果就是这个，解决不了问题。

额外提醒 #

• 绝对不要直接传递整个req对象，里面包含session、认证头这类敏感信息，风险很高，只传前端真正需要的属性就好。
• 如果你的JSON字符串里包含单引号，记得在后端做转义，避免解析失败：

  const frontendReqData = JSON.stringify({ user: req.user }).replace(/'/g, "\\'");
  

内容的提问来源于stack exchange，提问作者Neil Merchant