EJS传递用户对象后JS无法访问属性的异常问题

你的问题出在重复调用了JSON.stringify，导致最终拿到的user是个字符串，不是JS对象——这就是为啥能打印出完整内容，但访问属性返回undefined的原因。

错误代码的问题： #

你写的：

<script>const user = JSON.stringify(<%- JSON.stringify(user) %>);</script>

这里<%- JSON.stringify(user) %>已经把后端的user对象转成了JSON格式的字符串并直接输出到页面，相当于页面渲染后变成了：

const user = JSON.stringify({"username":"xxx","xxx":"xxx"});

最终user变量存的是JSON字符串，不是对象，自然访问不了属性。

正确写法： #

直接把EJS输出的JSON字面量赋值给变量，不需要再套一层JSON.stringify：

<script>
  const user = <%- JSON.stringify(user) %>;
</script>

这样渲染后页面会生成合法的JS对象：

const user = {"username":"xxx","xxx":"xxx"};

这时候user就是真正的JS对象，user.username就能正常获取值了。

验证方法： #

你可以在控制台执行typeof user，如果之前显示string，改成正确写法后会显示object，这就说明问题解决了。

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