EJS文件中script标签内使用官方ejs.render示例代码报错“people未定义”的解决办法

嘿，我明白你为啥踩坑了——你把客户端浏览器环境下的EJS用法直接放到了服务端预编译的EJS模板文件里，上下文搞混导致报错了！

问题根源 #

官方示例是纯客户端运行的：浏览器加载ejs.js后，直接在前端JS里调用ejs.render，模板字符串和变量都在浏览器上下文里。但当你把这段代码放进EJS模板文件时，服务端会先解析模板里的<%= ... %>标签，这时候服务端根本没有定义people变量，自然就报“变量未定义”的错了。

两种解决方案 #

方案1：继续用客户端EJS渲染（前端动态生成内容）

要让服务端跳过解析script里的EJS模板标签，需要对标签进行转义，确保它原封不动传到浏览器：

<script src="ejs.js"></script>
<script>
  // 前端定义变量
  let people = ['geddy', 'neil', 'alex'];
  // 转义模板里的EJS标签，避免服务端提前解析
  let html = ejs.render('<\%= people.join(", "); %>', {people: people});
  // 把渲染后的内容插入页面
  document.getElementById('target').innerHTML = html;
</script>
<div id="target"></div>

或者用EJS的<%- %>标签输出原始模板字符串，也能达到同样效果：

<script src="ejs.js"></script>
<script>
  let people = ['geddy', 'neil', 'alex'];
  // 用<%- %>输出未转义的模板字符串
  let html = ejs.render(<%- "'<%= people.join(', ') %>'" %>, {people: people});
  document.getElementById('target').innerHTML = html;
</script>
<div id="target"></div>

方案2：改用服务端EJS渲染（推荐，更符合EJS常规用法）

如果不需要前端动态渲染，直接在服务端把变量传给模板，然后在模板里直接使用EJS标签：

1. 服务端代码（以Express为例）：

app.get('/', (req, res) => {
  // 服务端定义变量
  let people = ['geddy', 'neil', 'alex'];
  // 把变量传给EJS模板
  res.render('your-template', { people });
});

2. EJS模板文件（your-template.ejs）：

<!-- 直接在模板里使用服务端传过来的变量 -->
<p>成员列表：<%= people.join(", ") %></p>

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