Node.js EJS视图if else判断车辆列表显示异常问题排查与修复

嘿，问题其实很简单——你犯了一个拼写错误！看你代码里的这一行：

<% if (data.lenght != 0) { %>

这里的lenght应该是length（少写了一个t）！

当data是空数组时，data.lenght会返回undefined，而undefined != 0的结果是true，所以代码会一直进入if分支，永远不会走到else里显示提示文本。

修复后的代码 #

把拼写错误修正后就能正常工作了：

<% if (data.length != 0) { %>
<% data.forEach(function(car) { %>
<div class="card mb-3">
<a href="/cars/<%= car.id %>">
<div class="card-body text-center text-capitalize">
<div class="card-title"><%= car.brand %></div>
<p class="card-text text-muted"><%= car.color %> / <%= car.engine_type %></p>
</div>
</a>
</div>
<% }) %>
<% } else { %>
<h5 class="text-center">Add a car to your profile.</h5>
<% } %>

EJS中正确使用if/else的注意事项 #

EJS本质就是在HTML里嵌入标准JavaScript，所以条件语句的写法和普通JS几乎一致，只要注意这些细节：

• 变量名拼写准确：就像你这次的length拼写错误，这类小问题很容易导致逻辑异常
• 简化条件判断：可以用更简洁的写法代替data.length != 0，比如：

  <% if (data.length) { %>
  

  因为空数组的length是0，在布尔判断里会被转为false，这样代码更简洁
• 处理边界情况：如果data可能是null或undefined，最好先做存在性检查，避免报错：

  <% if (data && data.length) { %>
  

• 保持代码结构清晰：EJS标签要和HTML代码合理嵌套，避免遗漏闭合的<% } %>标签

这样修改后，当data为空数组时，就能正常显示提示文本啦！

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