EJS模板引擎简介
ejs（embedded javascript）是一个流行的javascript模板引擎，它允许开发者在html文件中嵌入纯javascript代码，从而动态生成html内容。它以其简洁的语法和强大的功能，在node.js生态系统中被广泛应用于构建动态web页面。然而，初学者在使用ejs时，常常会遇到变量无法正确渲染的问题，其中最常见的原因是对ejs标签的误用。
理解EJS标签：控制流与输出
EJS提供了多种标签类型，每种都有其特定的用途。正确区分和使用这些标签是避免渲染错误的关键。
-
Scriptlet标签 ()： 这种标签用于嵌入JavaScript控制流代码，例如条件语句（if/else）、循环语句（for/forEach）等。它不会将内部的JavaScript表达式的结果输出到HTML中。
示例用途：
<% if (user.isAdmin) { %> <p>欢迎，管理员！</p> <% } else { %> <p>欢迎，<%= user.name %>！</p> <% } %> <% for (let item of items) { %> <li><%= item %></li> <% } %> -
输出标签 ()： 这是用于将JavaScript表达式的结果输出到HTML中的标签。当你需要显示一个变量的值、一个函数调用的结果或任何JavaScript表达式的计算结果时，都应该使用此标签。EJS会自动对输出内容进行HTML转义，以防止跨站脚本（XSS）攻击。
示例用途：
<h1>今天的日期是：<%= new Date().toLocaleDateString() %></h1> <p>用户名称：<%= userName %></p>
-
非转义输出标签 ()： 与输出标签类似，但它不会对输出内容进行HTML转义。当你知道内容是安全的，或者需要输出包含HTML标记的字符串（例如，从数据库中获取的富文本内容）时，可以使用此标签。使用时务必谨慎，以避免安全漏洞。
示例用途：
<div><%- rawHtmlContent %></div>
常见错误：变量未渲染的问题
许多初学者在尝试显示变量时，错误地使用了Scriptlet标签，而非输出标签。
错误示例：
假设你有一个名为KindOfDay的变量，期望在EJS模板中显示它的值。
<body>
<h1>Its a <%KindOfDay%> </h1>
</body>在上述代码中，KindOfDay被放置在标签内。由于这是一个Scriptlet标签，它会尝试将KindOfDay视为一个要执行的JavaScript语句，但它不会将其值输出到HTML。因此，在浏览器中，你可能会看到Its a后面没有任何内容，或者在某些情况下，如果KindOfDay不是一个有效的JavaScript语句，可能会导致解析错误。
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
正确的解决方案
要正确地将变量KindOfDay的值渲染到HTML中，应该使用输出标签。
正确示例：
<body>
<h1>Its a <%= KindOfDay %> </h1>
</body>通过将KindOfDay包裹在中，EJS会解析这个表达式，获取KindOfDay变量的当前值，并将其安全地输出到HTML页面上。
完整示例：动态显示日期类型
以下是一个完整的Node.js Express应用示例，演示了如何使用EJS正确地将动态数据渲染到页面。
1. 项目设置
首先，确保你的项目已安装必要的依赖：Express和EJS。
npm init -y npm install express ejs body-parser
2. app.js (Express服务器代码)
创建 app.js 文件，配置Express服务器，设置EJS为视图引擎，并定义一个路由来传递数据给EJS模板。
const express = require("express");
const bodyParser = require("body-parser");
const path = require("path"); // 引入 path 模块
const app = express();
// 设置视图引擎为 EJS
app.set('view engine', 'ejs');
// 设置视图文件所在的目录
app.set('views', path.join(__dirname, 'views'));
// 使用 body-parser 中间件（如果需要处理 POST 请求体）
app.use(bodyParser.urlencoded({ extended: true }));
// 静态文件服务（如果需要）
app.use(express.static('public'));
app.get("/", (req, res) => {
const today = new Date();
const currentDayOfWeek = today.getDay(); // 获取星期几，0为周日，6为周六
let dayType = "";
if (currentDayOfWeek === 0 || currentDayOfWeek === 6) {
dayType = "Weekend"; // 周末
} else {
dayType = "Weekday"; // 工作日
}
// 使用 res.render 渲染 EJS 模板，并传递数据对象
res.render("list", { KindOfDay: dayType });
console.log(`当前日期类型: ${dayType}`);
});
const port = 3000;
app.listen(port, () => {
console.log(`Server Running on port ${port}`);
});3. views/list.ejs (EJS模板文件)
在项目根目录下创建 views 文件夹，并在其中创建 list.ejs 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Today's Status</title>
</head>
<body>
<h1>Its a <%= KindOfDay %> </h1>
<p>欢迎来到我们的动态页面！</p>
</body>
</html>4. 运行应用
在终端中运行 app.js：
node app.js
然后访问 http://localhost:3000，你将看到页面上正确显示 "Its a Weekend" 或 "Its a Weekday"，取决于当前的日期。
注意事项与最佳实践
- 视图引擎配置： 确保在Express应用中正确配置了EJS作为视图引擎：app.set('view engine', 'ejs'); 和 app.set('views', path.join(__dirname, 'views'));。
- 数据传递： res.render() 方法的第二个参数必须是一个对象，EJS会将其属性作为变量在模板中可用。
- VS Code EJS扩展： 在VS Code中安装EJS语法高亮扩展（如 EJS language support by DigitalBrainstem），可以帮助你更好地识别EJS标签，避免语法错误。
- 调试： 如果遇到问题，可以在app.js中通过console.log()打印传递给模板的数据，确保数据是正确的。
- 安全性： 除非你完全信任内容来源，否则应始终优先使用进行输出，以防止XSS攻击。只有在明确需要输出未转义的HTML时才使用。
总结
正确理解和使用EJS模板引擎的标签是构建动态Web应用的基础。用于控制流，而则用于输出变量或表达式的值。通过遵循本文提供的指南和示例，你可以有效地避免EJS渲染中的常见错误，并充分利用EJS的强大功能来创建灵活且响应式的用户界面。
