EJS 模板变量渲染指南：解决不显示输出的问题-html教程-PHP中文网

EJS 模板变量渲染指南：解决不显示输出的问题

霞舞

发布： 2025-09-21 10:14:18

原创

1004人浏览过

EJS 模板变量渲染指南：解决 <% %> 不显示输出的问题不显示输出的问题 " />

本文旨在解决 EJS 模板中变量不正确渲染的问题，特别是当使用 <% %> 标签尝试显示变量值时，却发现变量名原样输出而非实际内容。核心在于区分 EJS 模板中不同标签的功能：<% %> 用于控制流，而 <%= %> 才是用于安全地输出变量内容。通过详细解释和示例代码，本文将指导开发者正确使用 EJS 标签，确保模板变量能够被预期地解析和渲染。

EJS 模板标签解析

ejs (embedded javascript) 是一种流行的模板引擎，它允许在 html 模板中嵌入 javascript 代码，从而实现动态内容的生成。理解 ejs 提供的不同标签是正确使用它的关键。ejs 主要有以下几种标签类型：

<% code %> (Scriptlet Tag): 此标签用于执行 JavaScript 代码，但不直接输出结果到 HTML。它通常用于控制流，例如 if/else 语句、for 循环、变量声明等。 示例:
```
<% if (user.loggedIn) { %>
    <p>欢迎 <%= user.name %></p>
<% } else { %>
    <p>请登录</p>
<% } %>
```
登录后复制
<%= code %> (Output Tag, Escaped): 此标签用于将 JavaScript 表达式的结果输出到 HTML。它会自动对输出内容进行 HTML 转义（例如，将 < 转换为示例:
```
<h1>页面标题：<%= pageTitle %></h1>
```
登录后复制
<%- code %> (Output Tag, Unescaped): 此标签也用于输出 JavaScript 表达式的结果，但它不会对内容进行 HTML 转义。这意味着如果变量中包含 HTML 标签，它们将作为原始 HTML 被渲染。使用此标签时需要格外小心，因为它可能引入 XSS 漏洞。仅在您确定内容是安全的情况下使用。 示例:
```
<div><%- rawHtmlContent %></div>
```
登录后复制
<%# comment %> (Comment Tag): 此标签用于在 EJS 模板中添加注释。注释内容不会被渲染到最终的 HTML 输出中。 示例:
```
<%# 这是一个 EJS 模板注释，不会出现在浏览器中 %>
```
登录后复制

常见问题：变量不渲染的原因

许多初学者在使用 EJS 时，会遇到一个常见问题：尝试显示变量 KindOfDay 的值，但在浏览器中却看到 <h1>Its a <%KindOfDay%> </h1> 这样的原始输出，而不是期望的 "Its a Weekend" 或 "Its a Weekday"。

问题根源： 这通常是因为错误地使用了 Scriptlet Tag (<% %>) 来尝试输出变量。如上所述，<% %> 标签仅用于执行代码逻辑，而不负责将表达式的结果渲染到 HTML。当 EJS 引擎遇到 <%KindOfDay%> 时，它会将其视为一段需要执行的 JavaScript 代码，但由于 KindOfDay 只是一个变量名，没有明确的执行操作（如 console.log() 或赋值），它不会产生任何输出，最终导致原始标签内容被保留。

解决方案：使用正确的输出标签

要正确地将变量 KindOfDay 的值渲染到 HTML 中，必须使用 输出标签 <%= %>。

错误示例 (不渲染变量):

<body>
    <h1>Its a <%KindOfDay%> </h1>
</body>

登录后复制

正确示例 (渲染变量):

<body>
    <h1>Its a <%= KindOfDay %> </h1>
</body>

登录后复制

通过将 <%KindOfDay%> 修改为 <%= KindOfDay %>，EJS 引擎将识别这是一个需要输出的表达式，并将其值（例如 "Weekend" 或 "Weekday"）安全地插入到 HTML 中。

完整示例与实践

下面是一个结合 Express.js 和 EJS 的完整示例，演示如何正确设置 EJS 模板引擎并渲染动态内容：

1. 项目结构:

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

my-express-app/
├── app.js
└── views/
    └── list.ejs

登录后复制

2. 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 模板):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS 动态内容</title>
</head>
<body>
    <h1>今天是 <%= KindOfDay %> </h1>
</body>
</html>

登录后复制

运行步骤:

确保已安装必要的依赖：
```
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 渲染问题的关键。

以上就是EJS 模板变量渲染指南：解决不显示输出的问题的详细内容，更多请关注php中文网其它相关文章！