EJS模板引擎简介与标签类型
ejs（embedded javascript）是一种流行的javascript模板引擎，它允许开发者使用纯javascript代码生成html。ejs模板通过特定的标签将javascript逻辑嵌入到html结构中，从而实现动态内容的渲染。理解ejs的不同标签类型是正确使用ejs的关键。
EJS主要提供以下三种标签：
-
脚本标签 (Scriptlet Tag):
- 用途： 用于执行纯JavaScript代码，例如控制流语句（if/else、for循环）、变量声明等。
- 特点： 不会将其内部代码的执行结果直接输出到HTML。它只负责执行逻辑。
-
示例：
<% if (user.loggedIn) { %>欢迎 <%= user.name %>!
<% } else { %>请登录。
<% } %>
-
输出标签 (Output Tag - Escaped):
- 用途： 用于将JavaScript表达式的结果输出到HTML文档中。
- 特点： 会自动对输出内容进行HTML转义（例如，将转换为youjiankuohaophpcn）。这是为了防止跨站脚本（XSS）攻击，确保用户输入或动态生成的内容不会被浏览器错误地解析为HTML或脚本。
-
示例：
商品名称：<%= product.name %>
价格：<%= product.price %>
-
非转义输出标签 (Output Tag - Unescaped):
- 用途： 用于将JavaScript表达式的结果输出到HTML文档中，但不进行HTML转义。
- 特点： 适用于输出已知安全的HTML片段，例如从数据库中读取的富文本内容，这些内容已经过清理或确认不包含恶意脚本。
- 警告： 使用此标签时必须格外小心，因为它可能导致XSS漏洞，如果输出内容包含未经验证的用户输入。
-
示例：<%- article.content %>
常见问题：EJS变量未正确渲染的原因
许多开发者在使用EJS时，会遇到变量没有被正确解析和显示，而是原样输出为的情况。这通常是由于混淆了脚本标签和输出标签的用法。
错误示例：
Its a <%KindOfDay%>
在这个例子中，KindOfDay变量被包裹在脚本标签内。如前所述，脚本标签仅用于执行JavaScript代码，它不会将KindOfDay变量的值输出到HTML。因此，浏览器会将其视为普通的文本，或者在某些配置下直接忽略内部的JavaScript表达式，导致页面上显示的是字面量，而不是期望的"Weekend"或"Weekday"。
解决方案：使用正确的EJS输出标签
要解决EJS变量不渲染的问题，核心在于使用输出标签来显示变量的值。
正确示例：
将上述错误代码修改为：
Its a <%= KindOfDay %>
通过将KindOfDay变量包裹在标签内，EJS引擎会正确地解析KindOfDay变量的值，并将其输出到HTML中，同时进行必要的HTML转义。
完整的EJS应用示例
为了更好地理解EJS的工作原理和正确用法，下面提供一个使用Express.js和EJS构建的完整示例，该示例会根据当前日期判断是“周末”还是“工作日”，并将其渲染到页面上。
项目结构：
my-ejs-app/
├── app.js
└── views/
└── list.ejs1. 安装依赖：
在项目根目录下，打开终端并运行：
npm init -y npm install express ejs path
2. app.js 文件内容：
这是Express服务器的入口文件，负责设置EJS模板引擎、定义路由并渲染模板。
const express = require("express");
const path = require("path"); // 引入 path 模块用于处理文件路径
const app = express();
// 配置 EJS 模板引擎
// app.set('views') 指定模板文件的存放目录
app.set('views', path.join(__dirname, 'views'));
// app.set('view engine') 指定使用的模板引擎为 ejs
app.set('view engine', 'ejs');
// 定义根路由
app.get("/", (req, res) => {
// 获取当前日期
var today = new Date();
// 获取当前是星期几（0-6，0表示周日，6表示周六）
var dayOfWeek = today.getDay();
var day = "";
// 判断是周末还是工作日
if (dayOfWeek === 0 || dayOfWeek === 6) { // 周日或周六
day = "Weekend";
} else {
day = "Weekday";
}
// 渲染 list.ejs 模板，并传入 KindOfDay 变量
// EJS 会查找 views 目录下的 list.ejs 文件，并将 { KindOfDay: day } 作为数据传递给它
res.render("list", { KindOfDay: day });
console.log("当前是:", day); // 在服务器控制台输出当前是周末还是工作日
});
// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server Running on http://localhost:${PORT}`);
});3. views/list.ejs 文件内容：
这是EJS模板文件，它将接收KindOfDay变量并显示在HTML页面上。
EJS 变量渲染示例
今天是 <%= KindOfDay %>
这个页面是使用 EJS 模板引擎动态渲染的。
4. 运行应用：
在项目根目录下，运行：
node app.js
然后，在浏览器中访问 http://localhost:3000。你将看到页面上显示“今天是 Weekend”或“今天是 Weekday”，这取决于你访问时的实际日期。
注意事项与最佳实践
- HTML转义的重要性： 始终优先使用进行输出。它提供的自动HTML转义是防止XSS攻击的重要防线。只有当你确定输出内容是安全的HTML片段时，才考虑使用。
-
EJS配置： 确保你的Express应用正确配置了EJS作为视图引擎，并且views目录路径设置正确。
app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); - 变量名匹配： res.render()方法中传递的对象键（例如KindOfDay）必须与EJS模板中使用的变量名严格匹配。
-
调试技巧：
- 在app.js中使用console.log()打印传递给模板的变量值，以确保数据在到达模板之前是正确的。
- 检查浏览器的开发者工具，查看渲染后的HTML源代码，确认EJS标签是否被正确替换。
- 确保EJS模板文件（.ejs）存放在app.set('views', ...)指定的目录下。
总结
EJS模板引擎通过其简洁的语法，使得在HTML中嵌入JavaScript逻辑变得非常方便。解决EJS变量渲染问题的关键在于理解并正确区分EJS的三种主要标签：用于控制流，用于安全地输出变量（带HTML转义），以及用于输出未经转义的HTML。在绝大多数情况下，应优先使用来显示动态数据，以确保应用程序的安全性和正确性。遵循这些最佳实践，可以有效避免常见的EJS渲染问题，并构建出健壮的Web应用。
