在EJS中使用JavaScript变量报错：post is not defined 问题咨询

问题根源 #

你定义postContent的位置在postStorage.forEach()循环外面，这时候post变量还没被创建——post是循环内部的迭代变量，只有在循环的每一次迭代中才会存在。循环外调用post.content自然会触发「post is not defined」错误；而直接在循环里写post.content.substring(0,50)能正常运行，是因为此时post已经被forEach正确初始化了。

修正方案 #

方案一：将变量定义移到循环内部

把postContent的声明放到forEach循环里，每次迭代时基于当前的post计算内容：

<h1>Home</h1>
<p> <%= content %> </p>   

<% postStorage.forEach( (post) => { %>
 <% let postContent = post.content.substring(0,50); %>
 <h1> <%= post.title %> </h1>
 <p> <%= postContent + " ..." %> </p>
<% }) %>

方案二：抽成可复用函数

如果需要在多个地方使用截取内容的逻辑，可以把这段逻辑封装成函数，在循环内调用：

<% // 定义截取函数 %>
<% function truncateContent(content, length = 50) {
  return content.substring(0, length);
} %>

<h1>Home</h1>
<p> <%= content %> </p>   

<% postStorage.forEach( (post) => { %>
 <h1> <%= post.title %> </h1>
 <p> <%= truncateContent(post.content) + " ..." %> </p>
<% }) %>

核心要点 #

EJS的变量作用域和原生JavaScript完全一致：

• 循环内部的迭代变量（比如这里的post）仅在当前迭代的作用域内有效，循环外部无法访问
• 循环外定义的变量如果依赖循环内的变量，会因目标变量未初始化而抛出未定义错误

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