如何通过ExpressJS将后端变量传递至前端JavaScript？

先修正你Express路由里的小错误——最后少了一个闭合括号，不然服务启动会报错：

app.get('/', async (req, res) => {
  res.render('index', {data: 123})
}); // 补上缺失的闭合})

1. 消除IDE的"Expression expected"报错 #

IDE提示的语法错误是假阳性的，因为它识别不了EJS的模板标签，把<%- ... %>当成了无效JS语法，解决办法有两种：

• 给IDE装对应插件（比如VS Code的EJS Language Support），让它能正确识别EJS语法；
• 在script标签上方加一行注释，让IDE忽略这个报错（以VS Code为例）：

  <html>
  ...
    <!-- eslint-disable-next-line no-undef -->
    <script>
      var myVar = <%- JSON.stringify(data) %>; // 建议加分号，符合JS规范
    </script>
  </html>
  

2. 确保数据能被public/index.js读取到 #

要让外部JS拿到这个变量，得注意script标签的加载顺序：

• 定义myVar的script标签，必须放在引入public/index.js的标签前面，比如：

  <html>
  ...
    <script>
      var myVar = <%- JSON.stringify(data) %>;
    </script>
    <script src="/index.js"></script> <!-- 这个要放在后面 -->
  </html>
  

  这样public/index.js里就能直接用全局变量myVar了：

  // public/index.js
  console.log(myVar); // 输出123
  

额外优化：别污染全局作用域 #

不想把变量暴露在全局的话，可以用自执行函数传参：

<script>
  (function() {
    const myVar = <%- JSON.stringify(data) %>;
    // 调用外部JS里的方法传数据
    window.initApp(myVar);
  })();
</script>
<script src="/index.js"></script>

然后在public/index.js里定义对应方法：

// public/index.js
function initApp(data) {
  console.log(data); // 使用传递过来的数据
}
window.initApp = initApp;

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