本文旨在解决EJS模板中变量无法正确渲染的常见问题。核心在于区分EJS的不同标签类型，特别是用于控制流的标签和用于输出变量并进行HTML转义的标签。通过示例代码，本文将详细指导开发者如何正确使用EJS输出标签，确保动态数据在页面上正常显示，避免常见的渲染错误。
EJS模板引擎简介与标签类型
ejs（embedded javascript）是一种流行的javascript模板引擎，它允许开发者使用纯javascript代码生成html。ejs模板通过特定的标签将javascript逻辑嵌入到html结构中，从而实现动态内容的渲染。理解ejs的不同标签类型是正确使用ejs的关键。
EJS主要提供以下三种标签：
脚本标签 (Scriptlet Tag):
用途： 用于执行纯JavaScript代码，例如控制流语句（if/else、for循环）、变量声明等。特点： 不会将其内部代码的执行结果直接输出到HTML。它只负责执行逻辑。示例：
欢迎 !
请登录。
输出标签 (Output Tag – Escaped):
用途： 用于将JavaScript表达式的结果输出到HTML文档中。特点： 会自动对输出内容进行HTML转义（例如，将转换为>）。这是为了防止跨站脚本（XSS）攻击，确保用户输入或动态生成的内容不会被浏览器错误地解析为HTML或脚本。示例：
商品名称：
价格：
非转义输出标签 (Output Tag – Unescaped):
用途： 用于将JavaScript表达式的结果输出到HTML文档中，但不进行HTML转义。特点： 适用于输出已知安全的HTML片段，例如从数据库中读取的富文本内容，这些内容已经过清理或确认不包含恶意脚本。警告： 使用此标签时必须格外小心，因为它可能导致XSS漏洞，如果输出内容包含未经验证的用户输入。示例：
常见问题：EJS变量未正确渲染的原因
许多开发者在使用EJS时，会遇到变量没有被正确解析和显示，而是原样输出为的情况。这通常是由于混淆了脚本标签和输出标签的用法。
错误示例：
Its a
在这个例子中，KindOfDay变量被包裹在脚本标签内。如前所述，脚本标签仅用于执行JavaScript代码，它不会将KindOfDay变量的值输出到HTML。因此，浏览器会将其视为普通的文本，或者在某些配置下直接忽略内部的JavaScript表达式，导致页面上显示的是字面量，而不是期望的”Weekend”或”Weekday”。
解决方案：使用正确的EJS输出标签
要解决EJS变量不渲染的问题，核心在于使用输出标签来显示变量的值。
正确示例：
将上述错误代码修改为：
Its a
通过将KindOfDay变量包裹在标签内，EJS引擎会正确地解析KindOfDay变量的值，并将其输出到HTML中，同时进行必要的HTML转义。
完整的EJS应用示例
为了更好地理解EJS的工作原理和正确用法，下面提供一个使用Express.js和EJS构建的完整示例，该示例会根据当前日期判断是“周末”还是“工作日”，并将其渲染到页面上。
项目结构：
my-ejs-app/├── app.js└── views/ └── list.ejs
1. 安装依赖：
在项目根目录下，打开终端并运行：
npm init -ynpm 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') 指定使用的模板引擎为 ejsapp.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 变量渲染示例 body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } h1 { color: #333; }今天是
这个页面是使用 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应用。
以上就是EJS变量渲染故障排除：理解与正确使用EJS输出标签的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1577288.html
微信扫一扫 
支付宝扫一扫 
