EJS模板变量渲染指南：解决VS Code中EJS不识别输出标签问题-html教程-PHP中文网

EJS模板变量渲染指南：解决VS Code中EJS不识别输出标签问题

霞舞

发布： 2025-09-21 10:49:33

原创

154人浏览过

EJS模板变量渲染指南：解决VS Code中EJS不识别输出标签问题

本文旨在解决EJS模板中变量无法正确渲染的常见问题，尤其是在VS Code开发环境中。核心在于区分EJS不同标签的用途，特别是用于控制流的<% ... %>标签和用于输出变量并转义HTML的<%= ... %>标签。文章将详细阐述正确的EJS语法，并通过示例代码演示如何在Express应用中正确配置和使用EJS，确保动态数据能够顺利显示在网页上。

EJS简介与常见渲染问题解析

ejs（embedded javascript）是一个流行的javascript模板引擎，它允许开发者使用纯javascript编写模板，从而将动态数据嵌入到html结构中。在node.js和express框架中，ejs常用于构建服务器端渲染（ssr）的应用。然而，初学者在使用ejs时，常常会遇到一个问题：即使已经安装了ejs扩展和依赖，模板中的变量也无法正确显示，而是原样输出ejs标签。这通常不是vs code或ejs配置的问题，而是对ejs标签语法理解上的误区。

EJS标签类型详解

EJS提供了多种标签来处理不同的逻辑和输出需求。理解这些标签的正确用法是解决渲染问题的关键。

Scriptlet标签：<% code %> 这个标签用于执行JavaScript代码，例如控制流语句（if/else、for循环）、变量声明等，但它不会将代码的执行结果直接输出到HTML中。

示例：
```
<% if (user.isAdmin) { %>
    <p>欢迎管理员！</p>
<% } else { %>
    <p>欢迎普通用户！</p>
<% } %>
```
登录后复制
输出标签（转义HTML）：<%= value %> 这是最常用的输出标签。它会将value的值输出到HTML中，并且会自动对HTML特殊字符（如<、>、&等）进行转义，以防止跨站脚本攻击（XSS）。

示例：
```
<p>用户名：<%= username %></p>
```
登录后复制
如果username的值是<b>Admin</b>，它将被渲染为Admin，在页面上显示为<b>Admin</b>而不是加粗的"Admin"。
原始输出标签（不转义HTML）：<%- value %> 这个标签也会将value的值输出到HTML中，但它不会对HTML特殊字符进行转义。当你确定输出内容是安全的HTML片段，并且希望浏览器将其解析为HTML时，可以使用此标签。

示例：
```
<div><%- rawHtmlContent %></div>
```
登录后复制
如果rawHtmlContent的值是<b>这是一个加粗的文本</b>，它将直接渲染为加粗的文本。

核心问题与解决方案

根据问题描述，用户在EJS模板中使用了<% KindOfDay %>来尝试显示变量KindOfDay的值，结果导致页面上直接显示<h1>Its a <%KindOfDay%> </h1>。这正是因为错误地使用了Scriptlet标签来尝试输出变量。

错误的EJS代码示例：

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

登录后复制

正确的解决方案：

AiPPT模板广场

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

147

查看详情

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

正确的EJS代码示例：

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

登录后复制

通过将<% KindOfDay %>修改为<%= 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模板中的标签使用是否正确，其次检查数据是否已从服务器端正确传递。

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