如何将EJS变量传递给外部JS脚本并正确访问变量值

你写在HTML内联脚本里的变量无法被外部JS读取，核心原因基本是脚本执行顺序不对或者变量作用域未对齐，下面是两种可直接落地的方案：

• 方案1：全局绑定+调整加载顺序（最简单）
  顶层作用域用let声明的变量不会默认挂载到window全局对象，部分场景下外部JS会出现找不到变量的报错，最稳妥的写法是显式把变量挂到window上，同时保证内联脚本在外部JS之前执行：

  <!-- 内联脚本放在前面，先执行 -->
  <script>
    window.a = <%-JSON.stringify(tags)%>
  </script>
  <!-- 外部JS在后引入，不要加defer/async打乱执行顺序 -->
  <script src="./main.js"></script>
  

  之后在main.js里直接通过a或者window.a就能拿到对应的值，示例：

  // main.js内代码
  console.log('拿到的tags值：', a)
  

• 方案2：自定义属性传值（无全局污染，更规范）
  如果不想额外声明全局变量，可以把序列化后的值绑定到script标签的自定义data属性上，从根源避免全局污染：

  <!-- 给引入main.js的script标签加id和自定义data属性存值 -->
  <script id="mainJs" src="./main.js" data-tags='<%-JSON.stringify(tags)%>'></script>
  

  在main.js里通过DOM解析拿到对应的值即可：

  // main.js内代码
  const scriptDom = document.getElementById('mainJs')
  const a = JSON.parse(scriptDom.dataset.tags)
  

注意：模板输出的<%-JSON.stringify(tags)%>要保证是合法JSON格式，避免出现未转义的特殊字符导致HTML脚本语法报错，常规EJS类模板的非转义输出标签默认会处理特殊字符，只要传入的tags是可序列化的常规JS值就不会有问题。

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