ejs变量未定义致页面加载报错，点击按钮后如何在bootstrap模态框展示JS变量值

EJS在服务端渲染模板阶段，如果没有从后端路由接收到someVariable对应的传值，直接在模板中调用未定义的变量就会抛出渲染异常，导致页面无法正常加载。

有两类方案可以解决该问题，你可以根据自己的业务场景选择：

方案1：EJS渲染层变量兜底 #

直接在模板代码中给变量增加默认值兜底，无需修改其他逻辑：

• 兼容所有EJS版本的写法：
  将原有模板中的 <%= someVariable %> 替换为：

<%= typeof someVariable !== 'undefined' ? someVariable : '' %>

• 如果你的EJS版本支持ES6+语法，可以用更简洁的空值合并运算符：

<%= someVariable ?? '' %>

以上写法的逻辑是：当someVariable未定义或为null时，直接输出空字符串，不会抛出渲染错误。

方案2：前后端逻辑拆分（更适配你的业务场景） #

因为你的someVariable本身就不需要服务端初始渲染，是后续用户在前端表单输入后才需要展示在模态框中，完全可以不用EJS初始输出该变量，从根源上避免变量未定义的问题：

1. 首先在Bootstrap模态框的内容区域，预留一个带id的空占位元素：

<div class="modal-body">
  您输入的值为：<span id="variableShowBox"></span>
</div>

2. 给搜索按钮绑定点击事件，动态把输入框的取值赋值到占位元素中即可：

document.getElementById('search').addEventListener('click', function() {
  const inputValue = document.getElementById('someVariable').value.trim()
  document.getElementById('variableShowBox').textContent = inputValue
})

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