如何在JS标签中递增EJS变量？或实现EJS数组遍历的替代方法

首先得明确一个核心点：EJS是在服务器端执行渲染的，而页面里的<script>代码是在客户端浏览器里运行的，两者的执行时机完全不同，所以你没法在客户端的JavaScript循环里直接递增EJS的变量i——等客户端JS跑起来的时候，EJS早就把模板渲染成静态HTML了，原来的EJS变量已经被替换成具体的值了。

看你原来的代码，渲染后客户端拿到的<script>代码其实是这样的：

var n = "4"
for(var i=0;i<n;i++){
 console.log("1")
}

因为EJS渲染时i的值是0，所以<%= a[i] %>直接被替换成了a[0]也就是"1"，循环里每次输出的都是同一个值，这就是问题所在。

下面给你两种可行的解决办法：

方法一：把EJS数组直接传给客户端JavaScript #

直接在EJS里把数组转成JSON格式，让客户端JS可以直接使用这个数组，这样就能用客户端自己的循环逻辑遍历：

<body>
  <% var a = ["1","2","3","4"] %>
  <script>
    // 用<%- %>输出未转义的JSON，这样客户端能拿到真正的数组
    var clientA = <%- JSON.stringify(a) %>;
    for(var i=0;i<clientA.length;i++){
      console.log(clientA[i]);
    }
  </script>
</body>

这种方法最简洁，也是最推荐的——把数据一次性传给客户端，让客户端自己处理循环逻辑，完全避开前后端变量上下文的冲突。

方法二：用EJS循环生成客户端的控制台输出代码 #

如果你的场景特殊，一定要让EJS帮你生成每一行的console.log，那可以直接用EJS的循环来遍历数组，生成对应的JS代码：

<body>
  <% var a = ["1","2","3","4"] %>
  <script>
    <% a.forEach(function(item) { %>
      console.log("<%= item %>");
    <% }) %>
  </script>
</body>

渲染后客户端拿到的JS代码会是：

console.log("1");
console.log("2");
console.log("3");
console.log("4");

执行后自然会依次输出每个元素。

总结一下：不要试图在客户端JS里操作EJS的变量，两者不在同一个执行环境里。要么把数据传给客户端让它自己处理，要么用EJS提前生成好需要的客户端代码。

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