如何通过EJS将NodeJS中的对象传递至JavaScript文件

阿华AIGC实验室

2026-4-27

如何在前端JS文件中使用Node.js传递的EJS数据？

嘿，我之前也碰到过这个问题！你现在的困境是直接用<%= data %>输出的只是对象的字符串占位符[object Object]，根本没法在前端JS里直接操作数据。核心问题是要把Node.js传给EJS的对象转换成前端JavaScript能识别的合法格式，再传递给你的脚本文件。下面给你两个实用的解决方案：

方案一：用全局变量传递数据

这是最简单直接的方式，在EJS页面里先把数据转成JSON字符串，存到全局变量中，你的脚本就能直接访问了。

修改你的index.ejs：

<html>
<head>
  <!-- 先在页面里定义全局变量，把Node传来的data转成合法的JSON -->
  <script>
    // 用<%- 而不是<%=，避免JSON被HTML转义导致解析失败
    window.serverData = <%- JSON.stringify(data) %>;
  </script>
  <script defer src="myScript.js"></script>
</head>
<body>
  <!-- 这里可以根据需求决定是否显示data，不需要的话可以删掉 -->
</body>
</html>

然后在myScript.js里直接使用：

// 现在可以直接操作这个对象了！
console.log(serverData);
// 比如访问对象里的属性
console.log(serverData.userName);
console.log(serverData.posts);

为什么用`<%-`而不是`<%=`？

<%=会自动转义HTML特殊字符（比如把双引号转成"），这样JSON字符串就会被破坏，前端解析的时候会报错。而<%-会直接输出原始的JSON内容，保证格式完全正确。

方案二：用DOM元素的data属性传递（无全局变量）

如果你不想用全局变量，可以把数据存在DOM元素的自定义data属性里，然后在脚本中读取并解析。

修改index.ejs：

<html>
<head>
  <script defer src="myScript.js"></script>
</head>
<body>
  <!-- 用一个隐藏的容器存数据 -->
  <div id="data-store" style="display: none;" data-server-data="<%- JSON.stringify(data) %>"></div>
</body>
</html>

在myScript.js中读取：

// 获取存数据的DOM元素
const dataStore = document.getElementById('data-store');
// 读取data属性并解析成JavaScript对象
const serverData = JSON.parse(dataStore.dataset.serverData);

// 现在就能正常使用数据了
console.log(serverData);

注意事项

如果你的data里包含敏感信息（比如用户密码、密钥等），绝对不要用这种方式传递，因为前端可以直接看到所有数据。这种情况建议用后端API接口，通过AJAX异步获取，并且做好权限验证。
如果data是特别大的对象，JSON.stringify可能会有轻微的性能影响，这种情况也更推荐用异步接口获取数据。

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