不显示输出的问题
" />
EJS 模板标签解析
ejs (embedded javascript) 是一种流行的模板引擎，它允许在 html 模板中嵌入 javascript 代码，从而实现动态内容的生成。理解 ejs 提供的不同标签是正确使用它的关键。ejs 主要有以下几种标签类型：
-
(Scriptlet Tag): 此标签用于执行 JavaScript 代码，但不直接输出结果到 HTML。它通常用于控制流，例如 if/else 语句、for 循环、变量声明等。 示例:
<% if (user.loggedIn) { %>欢迎 <%= user.name %>
<% } else { %>请登录
<% } %> -
(Output Tag, Escaped): 此标签用于将 JavaScript 表达式的结果输出到 HTML。它会自动对输出内容进行 HTML 转义（例如，将 示例:
页面标题：<%= pageTitle %>
-
(Output Tag, Unescaped): 此标签也用于输出 JavaScript 表达式的结果，但它不会对内容进行 HTML 转义。这意味着如果变量中包含 HTML 标签，它们将作为原始 HTML 被渲染。使用此标签时需要格外小心，因为它可能引入 XSS 漏洞。仅在您确定内容是安全的情况下使用。 示例:
<%- rawHtmlContent %> -
(Comment Tag): 此标签用于在 EJS 模板中添加注释。注释内容不会被渲染到最终的 HTML 输出中。 示例:
<%# 这是一个 EJS 模板注释，不会出现在浏览器中 %>
常见问题：变量不渲染的原因
许多初学者在使用 EJS 时，会遇到一个常见问题：尝试显示变量 KindOfDay 的值，但在浏览器中却看到
Its a
这样的原始输出，而不是期望的 "Its a Weekend" 或 "Its a Weekday"。问题根源： 这通常是因为错误地使用了 Scriptlet Tag () 来尝试输出变量。如上所述， 标签仅用于执行代码逻辑，而不负责将表达式的结果渲染到 HTML。当 EJS 引擎遇到 时，它会将其视为一段需要执行的 JavaScript 代码，但由于 KindOfDay 只是一个变量名，没有明确的执行操作（如 console.log() 或赋值），它不会产生任何输出，最终导致原始标签内容被保留。
解决方案：使用正确的输出标签
要正确地将变量 KindOfDay 的值渲染到 HTML 中，必须使用 输出标签 。
错误示例 (不渲染变量):
Its a <%KindOfDay%>
正确示例 (渲染变量):
Its a <%= KindOfDay %>
通过将 修改为 ，EJS 引擎将识别这是一个需要输出的表达式，并将其值（例如 "Weekend" 或 "Weekday"）安全地插入到 HTML 中。
完整示例与实践
下面是一个结合 Express.js 和 EJS 的完整示例，演示如何正确设置 EJS 模板引擎并渲染动态内容：
1. 项目结构:
my-express-app/
├── app.js
└── views/
└── list.ejs2. app.js (Express 应用):
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")); // 如果有静态文件（如CSS/JS），需要设置静态文件目录
app.get("/", (req, res) => {
var today = new Date();
// 使用 getDay() 获取星期几（0-6，0为周日，6为周六）
var dayOfWeek = today.getDay();
var day = "";
if (dayOfWeek === 0 || dayOfWeek === 6) { // 周日或周六
day = "Weekend";
} else {
day = "Weekday";
}
// 渲染 list.ejs 模板，并传入 KindOfDay 变量
res.render("list", { KindOfDay: day });
console.log(`当前计算出的日期类型: ${day}`);
});
const port = 3000;
app.listen(port, () => {
console.log(`Server Running on port ${port}`);
});注意: 在 app.js 中，我们修正了获取星期几的逻辑，使用 today.getDay() 代替 today.getDate()，因为 getDate() 返回的是月份中的日期，而不是星期几。
3. views/list.ejs (EJS 模板):
EJS 动态内容
今天是 <%= KindOfDay %>
运行步骤:
- 确保已安装必要的依赖：
npm init -y npm install express ejs body-parser
- 将上述 app.js 和 views/list.ejs 文件保存到对应的位置。
- 在终端中运行 app.js：
node app.js
- 在浏览器中访问 http://localhost:3000。您将看到页面显示 "今天是 Weekend" 或 "今天是 Weekday"，具体取决于当前是周末还是工作日。
注意事项与总结
- 区分标签功能： 始终牢记 用于逻辑控制， 用于输出转义后的内容， 用于输出未转义的原始内容。
- 安全实践： 除非您完全信任要输出的内容来源，否则应优先使用 来输出变量，以避免潜在的 XSS 攻击。
- VS Code 扩展： 虽然 EJS 渲染问题与 VS Code 本身无关，但安装 EJS 相关的 VS Code 扩展（如 "EJS language support"）可以提供语法高亮、代码片段和智能提示，极大地提升开发体验。
- 调试： 如果遇到变量未按预期渲染的问题，首先检查 EJS 标签是否正确，其次检查 Express 路由中 res.render() 函数是否正确传递了数据对象，以及数据对象中的键名是否与 EJS 模板中使用的变量名一致。
通过掌握 EJS 模板标签的正确用法，开发者可以高效且安全地构建动态 Web 页面。理解 Scriptlet Tag 和 Output Tag 的核心区别是解决大多数 EJS 渲染问题的关键。
