EJS变量渲染故障排除：理解与正确使用EJS输出标签-html教程-PHP中文网

EJS变量渲染故障排除：理解与正确使用EJS输出标签

霞舞

发布： 2025-09-21 10:10:01

原创

671人浏览过

EJS变量渲染故障排除：理解与正确使用EJS输出标签

本文旨在解决EJS模板中变量无法正确渲染的常见问题。核心在于区分EJS的不同标签类型，特别是用于控制流的< % ... % >标签和用于输出变量并进行HTML转义的< %= ... % >标签。通过示例代码，本文将详细指导开发者如何正确使用EJS输出标签，确保动态数据在页面上正常显示，避免常见的渲染错误。

EJS模板引擎简介与标签类型

ejs（embedded javascript）是一种流行的javascript模板引擎，它允许开发者使用纯javascript代码生成html。ejs模板通过特定的标签将javascript逻辑嵌入到html结构中，从而实现动态内容的渲染。理解ejs的不同标签类型是正确使用ejs的关键。

EJS主要提供以下三种标签：

脚本标签 (Scriptlet Tag): <% code %>
- 用途： 用于执行纯JavaScript代码，例如控制流语句（if/else、for循环）、变量声明等。
- 特点： 不会将其内部代码的执行结果直接输出到HTML。它只负责执行逻辑。
- 示例：
```
<% if (user.loggedIn) { %>
    <p>欢迎 <%= user.name %>!</p>
<% } else { %>
    <p>请登录。</p>
<% } %>
```
  登录后复制
输出标签 (Output Tag - Escaped): <%= code %>
- 用途： 用于将JavaScript表达式的结果输出到HTML文档中。
- 特点： 会自动对输出内容进行HTML转义（例如，将<转换为）。这是为了防止跨站脚本（XSS）攻击，确保用户输入或动态生成的内容不会被浏览器错误地解析为HTML或脚本。
- 示例：
```
<h1>商品名称：<%= product.name %></h1>
<p>价格：<%= product.price %></p>
```
  登录后复制
非转义输出标签 (Output Tag - Unescaped): <%- code %>
- 用途： 用于将JavaScript表达式的结果输出到HTML文档中，但不进行HTML转义。
- 特点： 适用于输出已知安全的HTML片段，例如从数据库中读取的富文本内容，这些内容已经过清理或确认不包含恶意脚本。
- 警告： 使用此标签时必须格外小心，因为它可能导致XSS漏洞，如果输出内容包含未经验证的用户输入。
- 示例：
```
<div><%- article.content %></div> 
```
  登录后复制

常见问题：EJS变量未正确渲染的原因

许多开发者在使用EJS时，会遇到变量没有被正确解析和显示，而是原样输出为< %VariableName% >的情况。这通常是由于混淆了脚本标签和输出标签的用法。

错误示例：

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

登录后复制

在这个例子中，KindOfDay变量被包裹在< % ... % >脚本标签内。如前所述，脚本标签仅用于执行JavaScript代码，它不会将KindOfDay变量的值输出到HTML。因此，浏览器会将其视为普通的文本，或者在某些配置下直接忽略内部的JavaScript表达式，导致页面上显示的是字面量< %KindOfDay% >，而不是期望的"Weekend"或"Weekday"。

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

要解决EJS变量不渲染的问题，核心在于使用输出标签< %= ... % >来显示变量的值。

正确示例：

将上述错误代码修改为：

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

登录后复制

通过将KindOfDay变量包裹在< %= ... % >标签内，EJS引擎会正确地解析KindOfDay变量的值，并将其输出到HTML中，同时进行必要的HTML转义。

完整的EJS应用示例

为了更好地理解EJS的工作原理和正确用法，下面提供一个使用Express.js和EJS构建的完整示例，该示例会根据当前日期判断是“周末”还是“工作日”，并将其渲染到页面上。

神卷标书

神卷标书，专注于AI智能标书制作、管理与咨询服务，提供高效、专业的招投标解决方案。支持一站式标书生成、模板下载，助力企业轻松投标，提升中标率。

查看详情

项目结构：

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

登录后复制

1. 安装依赖：

在项目根目录下，打开终端并运行：

npm init -y
npm 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') 指定使用的模板引擎为 ejs
app.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页面上。

<!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>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>今天是 <%= KindOfDay %> </h1>
    <p>这个页面是使用 EJS 模板引擎动态渲染的。</p>
</body>
</html>

登录后复制

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输出标签的详细内容，更多请关注php中文网其它相关文章！