EJS如何基于变量存在性实现条件渲染避免未定义报错？

错误原因 #

报错的核心原因是GET请求渲染模板时，后端没有向EJS模板传入genre变量，模板运行时直接读取未声明的变量就会抛出ReferenceError，并非变量值为空的问题。

解决方案 #

方案1：模板层兼容（无需修改后端代码）

用typeof操作符判断变量是否存在，typeof读取未声明的变量不会报错，只会返回undefined，修改判断逻辑即可：

<% if (typeof genre !== 'undefined' && genre) { %>
     <input type="text" id="name" class="form-control" placeholder="Fantasy, Poetry, etc." name="name" value="<%= genre.name %>" />
<% } else { %>
            <input type="text" id="name" class="form-control" placeholder="Fantasy, Poetry, etc." name="name" value="" />
<% } %>

还可以进一步简化代码，避免重复写input标签，直接在value属性里做判断：

<input type="text" id="name" class="form-control" placeholder="Fantasy, Poetry, etc." name="name" value="<%= typeof genre !== 'undefined' ? genre.name : '' %>" />

方案2：后端统一传默认值（无需修改模板原有逻辑）

在渲染表单的GET接口中，给模板传入默认的genre空值，保证变量一定存在，你原来写的模板代码无需修改就能正常运行：

// Express 路由示例
app.get('/genre/create', (req, res) => {
  // 显式传入genre的默认空值，保证模板中变量存在
  res.render('genre_form', { genre: null })
})
// POST校验失败回传时正常传用户输入的genre对象即可

内容的提问来源于stack exchange，提问作者Matt Di Micelli