如何在EJS中编写for循环/forEach循环？其与常规循环有何差异？

嘿，我来帮你理清楚EJS里的循环逻辑～其实核心结论很简单：EJS 里的 <% %> 标签就是用来嵌入原生 JavaScript 代码的，所以循环逻辑本质上和你写普通 JS 里的 forEach/for 循环几乎没区别，核心差异只在于如何结合模板输出内容。

1. 基础循环写法和原生JS的对比 #

普通 JS 里的 forEach： #

const fruits = ['苹果', '香蕉', '橙子'];
fruits.forEach(fruit => {
  console.log(fruit);
});

EJS 里的 forEach： #

<% const fruits = ['苹果', '香蕉', '橙子']; %>
<% fruits.forEach(fruit => { %>
  <p>我爱吃 <%= fruit %></p>
<% }) %>

这里的关键是：<% %> 包裹循环的控制逻辑，而要输出变量内容时用 <%= %> 标签——这是EJS模板特有的地方，原生JS不需要区分“执行代码”和“输出内容”的标签，但EJS必须用这两种标签分开处理。

2. for循环的写法 #

同样，EJS里的for循环完全遵循原生JS语法，只是嵌入到模板标签里：

<% for(let i = 0; i < 3; i++) { %>
  <div>这是第 <%= i + 1 %> 个元素</div>
<% } %>

和原生for循环的逻辑一模一样，只是把循环体里的输出换成了EJS的输出标签。

3. 唯一需要注意的小细节 #

• 循环里的变量作用域和原生JS一致，比如在forEach的回调里定义的变量，只能在回调内部访问；
• 如果要在循环里输出HTML内容，一定要用<%= %>（输出转义后的内容）或者<%- %>（输出原始HTML，比如带标签的内容），不能直接在<% %>里写HTML，否则不会渲染。

举个带HTML的例子：

<% const posts = [
  {title: 'EJS入门', content: '<strong>这是加粗的内容</strong>'},
  {title: '循环技巧', content: '普通文本内容'}
]; %>
<% posts.forEach(post => { %>
  <h3><%= post.title %></h3>
  <div><%- post.content %></div> <%-- 这里用<%- %>渲染原始HTML --%>
<% }) %>

总的来说，EJS的循环只是把原生JS循环放到<% %>标签里执行，再配合输出标签把结果渲染到模板上，逻辑本身没有差异，不用太担心～

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