EJS模板渲染指南：深入理解-html教程-PHP中文网

EJS模板渲染指南：深入理解

聖光之護

发布： 2025-09-21 09:55:27

原创

913人浏览过

EJS模板渲染指南：深入理解<%与<%=标签的正确用法

本文旨在解决EJS模板中变量未正确渲染的问题。核心在于区分<% ... %>（控制流标签）和<%= ... %>（输出标签）的用法。通过实例代码，我们将展示如何正确地将动态数据嵌入到HTML中，避免常见的渲染错误，确保EJS模板按预期工作。

EJS模板引擎简介

ejs（embedded javascript）是一个流行的javascript模板引擎，它允许开发者在html文件中嵌入纯javascript代码，从而动态生成html内容。它以其简洁的语法和强大的功能，在node.js生态系统中被广泛应用于构建动态web页面。然而，初学者在使用ejs时，常常会遇到变量无法正确渲染的问题，其中最常见的原因是对ejs标签的误用。

理解EJS标签：控制流与输出

EJS提供了多种标签类型，每种都有其特定的用途。正确区分和使用这些标签是避免渲染错误的关键。

Scriptlet标签 (<% ... %>)： 这种标签用于嵌入JavaScript控制流代码，例如条件语句（if/else）、循环语句（for/forEach）等。它不会将内部的JavaScript表达式的结果输出到HTML中。

示例用途：
```
<% if (user.isAdmin) { %>
    <p>欢迎，管理员！</p>
<% } else { %>
    <p>欢迎，<%= user.name %>！</p>
<% } %>

<% for (let item of items) { %>
    <li><%= item %></li>
<% } %>
```
登录后复制
输出标签 (<%= ... %>)： 这是用于将JavaScript表达式的结果输出到HTML中的标签。当你需要显示一个变量的值、一个函数调用的结果或任何JavaScript表达式的计算结果时，都应该使用此标签。EJS会自动对输出内容进行HTML转义，以防止跨站脚本（XSS）攻击。

示例用途：
```
<h1>今天的日期是：<%= new Date().toLocaleDateString() %></h1>
<p>用户名称：<%= userName %></p>
```
登录后复制
非转义输出标签 (<%- ... %>)： 与输出标签类似，但它不会对输出内容进行HTML转义。当你知道内容是安全的，或者需要输出包含HTML标记的字符串（例如，从数据库中获取的富文本内容）时，可以使用此标签。使用时务必谨慎，以避免安全漏洞。

示例用途：
```
<div><%- rawHtmlContent %></div>
```
登录后复制

常见错误：变量未渲染的问题

许多初学者在尝试显示变量时，错误地使用了Scriptlet标签<% ... %>，而非输出标签<%= ... %>。

错误示例：

假设你有一个名为KindOfDay的变量，期望在EJS模板中显示它的值。

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

登录后复制

在上述代码中，KindOfDay被放置在<% ... %>标签内。由于这是一个Scriptlet标签，它会尝试将KindOfDay视为一个要执行的JavaScript语句，但它不会将其值输出到HTML。因此，在浏览器中，你可能会看到Its a后面没有任何内容，或者在某些情况下，如果KindOfDay不是一个有效的JavaScript语句，可能会导致解析错误。

正确的解决方案

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

正确示例：

AiPPT模板广场

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

147

查看详情

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

登录后复制

通过将KindOfDay包裹在<%= ... %>中，EJS会解析这个表达式，获取KindOfDay变量的当前值，并将其安全地输出到HTML页面上。

完整示例：动态显示日期类型

以下是一个完整的Node.js Express应用示例，演示了如何使用EJS正确地将动态数据渲染到页面。

1. 项目设置

首先，确保你的项目已安装必要的依赖：Express和EJS。

npm init -y
npm install express ejs body-parser

登录后复制

2. app.js (Express服务器代码)

创建 app.js 文件，配置Express服务器，设置EJS为视图引擎，并定义一个路由来传递数据给EJS模板。

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'));

app.get("/", (req, res) => {
    const today = new Date();
    const currentDayOfWeek = today.getDay(); // 获取星期几，0为周日，6为周六

    let dayType = "";

    if (currentDayOfWeek === 0 || currentDayOfWeek === 6) {
        dayType = "Weekend"; // 周末
    } else {
        dayType = "Weekday"; // 工作日
    }

    // 使用 res.render 渲染 EJS 模板，并传递数据对象
    res.render("list", { KindOfDay: dayType });
    console.log(`当前日期类型: ${dayType}`);
});

const port = 3000;
app.listen(port, () => {
    console.log(`Server Running on port ${port}`);
});

登录后复制

3. views/list.ejs (EJS模板文件)

在项目根目录下创建 views 文件夹，并在其中创建 list.ejs 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Today's Status</title>
</head>
<body>
    <h1>Its a <%= KindOfDay %> </h1>
    <p>欢迎来到我们的动态页面！</p>
</body>
</html>

登录后复制

4. 运行应用

在终端中运行 app.js：

node app.js

登录后复制

然后访问 http://localhost:3000，你将看到页面上正确显示 "Its a Weekend" 或 "Its a Weekday"，取决于当前的日期。

注意事项与最佳实践

视图引擎配置： 确保在Express应用中正确配置了EJS作为视图引擎：app.set('view engine', 'ejs'); 和 app.set('views', path.join(__dirname, 'views'));。
数据传递： res.render() 方法的第二个参数必须是一个对象，EJS会将其属性作为变量在模板中可用。
VS Code EJS扩展： 在VS Code中安装EJS语法高亮扩展（如 EJS language support by DigitalBrainstem），可以帮助你更好地识别EJS标签，避免语法错误。
调试： 如果遇到问题，可以在app.js中通过console.log()打印传递给模板的数据，确保数据是正确的。
安全性： 除非你完全信任内容来源，否则应始终优先使用<%= ... %>进行输出，以防止XSS攻击。只有在明确需要输出未转义的HTML时才使用<%- ... %>。

总结

正确理解和使用EJS模板引擎的标签是构建动态Web应用的基础。<% ... %>用于控制流，而<%= ... %>则用于输出变量或表达式的值。通过遵循本文提供的指南和示例，你可以有效地避免EJS渲染中的常见错误，并充分利用EJS的强大功能来创建灵活且响应式的用户界面。

以上就是EJS模板渲染指南：深入理解的详细内容，更多请关注php中文网其它相关文章！