EJS简介与常见渲染问题解析
ejs（embedded javascript）是一个流行的javascript模板引擎，它允许开发者使用纯javascript编写模板，从而将动态数据嵌入到html结构中。在node.js和express框架中，ejs常用于构建服务器端渲染（ssr）的应用。然而，初学者在使用ejs时，常常会遇到一个问题：即使已经安装了ejs扩展和依赖，模板中的变量也无法正确显示，而是原样输出ejs标签。这通常不是vs code或ejs配置的问题，而是对ejs标签语法理解上的误区。
EJS标签类型详解
EJS提供了多种标签来处理不同的逻辑和输出需求。理解这些标签的正确用法是解决渲染问题的关键。
-
Scriptlet标签： 这个标签用于执行JavaScript代码，例如控制流语句（if/else、for循环）、变量声明等，但它不会将代码的执行结果直接输出到HTML中。
示例：
<% if (user.isAdmin) { %>欢迎管理员！
<% } else { %>欢迎普通用户！
<% } %> -
输出标签（转义HTML）： 这是最常用的输出标签。它会将value的值输出到HTML中，并且会自动对HTML特殊字符（如、&等）进行转义，以防止跨站脚本攻击（XSS）。
示例：
用户名：<%= username %>
如果username的值是Admin，它将被渲染为zuojiankuohaophpcnbyoujiankuohaophpcnAdminzuojiankuohaophpcn/byoujiankuohaophpcn，在页面上显示为Admin而不是加粗的"Admin"。
-
原始输出标签（不转义HTML）： 这个标签也会将value的值输出到HTML中，但它不会对HTML特殊字符进行转义。当你确定输出内容是安全的HTML片段，并且希望浏览器将其解析为HTML时，可以使用此标签。
示例：
<%- rawHtmlContent %>如果rawHtmlContent的值是这是一个加粗的文本，它将直接渲染为加粗的文本。
核心问题与解决方案
根据问题描述，用户在EJS模板中使用了来尝试显示变量KindOfDay的值，结果导致页面上直接显示
Its a
。这正是因为错误地使用了Scriptlet标签来尝试输出变量。错误的EJS代码示例：
Its a <%KindOfDay%>
正确的解决方案：
要正确地将KindOfDay变量的值输出到HTML中，应该使用输出标签。
正确的EJS代码示例：
Its a <%= KindOfDay %>
通过将修改为，EJS引擎会正确解析并输出KindOfDay变量的实际值，例如"Weekend"或"Weekday"。
Express应用中的EJS配置与数据传递
为了使EJS模板正常工作，还需要在Express应用中进行正确的配置，并将数据从路由传递到模板。
app.js中的EJS配置示例：
const express = require("express");
const path = require('path'); // 引入path模块
const app = express();
// 设置EJS模板引擎
app.set('views', path.join(__dirname, 'views')); // 指定模板文件目录
app.set('view engine', 'ejs'); // 设置视图引擎为EJS
app.get("/", (req, res) => {
var today = new Date();
// 注意：getDate()返回的是月份中的日期，不是星期几。
// 如果要获取星期几，应该使用getDay()。
// 假设原始意图是根据星期几判断周末或工作日。
var dayOfWeek = today.getDay(); // 0代表周日，6代表周六
var kindOfDay = "";
if (dayOfWeek === 0 || dayOfWeek === 6) { // 周日或周六
kindOfDay = "Weekend";
} else {
kindOfDay = "Weekday";
}
// 将数据传递给EJS模板
res.render("list", { KindOfDay: kindOfDay });
console.log(kindOfDay); // 在服务器控制台打印，用于调试
});
app.listen(3000, () => {
console.log("Server Running on port 3000");
});注意事项：
- path.join(__dirname, 'views'): 确保views目录的路径设置正确。path.join是跨平台兼容的路径拼接方式。
- today.getDay() vs today.getDate(): 原始代码中使用了getDate()来判断周末，这会获取月份中的日期（1-31），而不是星期几。正确的做法是使用getDay()，它返回一个0（周日）到6（周六）的整数。上述app.js示例已修正此逻辑。
- 数据传递: res.render("list", { KindOfDay: kindOfDay });中的第二个参数是一个对象，其键（KindOfDay）将作为变量名在EJS模板中可用，其值（kindOfDay）是对应的数据。
总结
EJS模板渲染问题的核心往往在于对不同EJS标签用法的混淆。务必记住：
- 使用进行控制流（条件判断、循环等），不输出内容。
- 使用输出变量值，并自动转义HTML特殊字符，防止XSS攻击。
- 使用输出未经转义的原始HTML内容，请谨慎使用。
通过正确理解和应用这些标签，以及确保Express应用中EJS的正确配置和数据传递，您将能够高效地利用EJS构建动态且安全的Web页面。如果遇到渲染问题，请首先检查EJS模板中的标签使用是否正确，其次检查数据是否已从服务器端正确传递。
