EJS 模板中单脚本标签渲染多个变量的技巧与实践-html教程-PHP中文网

EJS 模板中单脚本标签渲染多个变量的技巧与实践

聖光之護

发布： 2025-10-12 13:10:02

原创

331人浏览过

EJS 模板中单脚本标签渲染多个变量的技巧与实践

本文探讨了在ejs模板中，如何优雅地在单个脚本标签内渲染多个javascript变量。针对常见的逗号分隔符无法实现预期效果的问题，文章提供了使用javascript模板字面量（template literals）的解决方案，并详细解释了其工作原理及应用场景，旨在提升模板代码的简洁性和可读性。

EJS模板中多变量渲染的挑战

在使用EJS（Embedded JavaScript）作为Node.js应用的视图引擎时，开发者经常需要将后端传递的多个数据变量渲染到HTML页面中。EJS的核心在于其脚本标签，其中<%= expression %>用于将JavaScript表达式的结果输出到HTML。

一个常见的需求是在同一行或同一HTML元素内显示多个变量，例如，后端传递了currentDay和typeOfDay两个变量：

res.render('index', {
    currentDay: "Monday",
    typeOfDay: "Weekday"
});

登录后复制

期望在模板中显示为 "Today is Monday. It's a Weekday"。

初学者可能会尝试将多个变量用逗号分隔，置于一个<%= ... %>标签内，例如：

<h1>Today is <%= currentDay, typeOfDay%></h1>

登录后复制

然而，这种做法通常无法达到预期效果。在JavaScript中，逗号运算符会依次执行每个表达式，并返回最后一个表达式的值。因此，currentDay, typeOfDay这个表达式的最终结果是typeOfDay的值。EJS的<%= ... %>标签只会输出这个最终的表达式结果，而非将所有变量拼接起来。根据实际观察，在上述尝试中，有时甚至只渲染第一个变量，或结果不符合预期，导致输出不完整或错误。

标准的多脚本标签渲染方式

为了正确显示所有变量，一种直接且有效的方法是使用多个<%= ... %>脚本标签，每个标签负责渲染一个变量。这是EJS模板中最常见和推荐的做法之一：

<h1>Today is <%= currentDay%>. It's a <%= typeOfDay %></h1>

登录后复制

这种方式清晰明了，每个变量都有其独立的输出上下文，确保了所有数据的正确渲染。它易于理解和维护，对于大多数简单的变量拼接场景而言是完全足够的。

优雅的解决方案：JavaScript模板字面量

虽然多个脚本标签能够解决问题，但在某些情况下，尤其当需要拼接的字符串较长或变量较多时，使用多个标签可能会显得冗长，并可能降低模板的可读性。此时，JavaScript的模板字面量（Template Literals，使用反引号 ` 定义）提供了一个更为优雅和简洁的解决方案。

模板字面量允许在字符串中嵌入表达式（通过${expression}语法），并将它们解析为字符串的一部分。这意味着我们可以在一个模板字面量中构建一个完整的字符串，然后将这个字符串作为单个表达式传递给EJS的<%= ... %>标签。

AiPPT模板广场

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

147

查看详情

以下是使用模板字面量解决多变量渲染问题的示例：

<h1>Today is <%= `${currentDay}. It's a ${typeOfDay}` %></h1>

登录后复制

工作原理： 在这个例子中，`${currentDay}. It's a ${typeOfDay} 是一个完整的JavaScript模板字面量字符串。当EJS引擎解析到<%= ... %>时，它会执行括号内的JavaScript代码。JavaScript引擎会首先解析模板字面量，将currentDay和typeOfDay的值嵌入到字符串中，生成一个单一的字符串（例如："Monday. It's a Weekday"）。随后，EJS会将这个生成的字符串作为<%= ... %>`表达式的最终结果输出到HTML中。

优势：

简洁性： 减少了重复的EJS标签，使模板代码更加紧凑。
可读性： 字符串的结构一目了然，便于理解最终的输出格式。
灵活性： 可以在模板字面量中包含任意复杂的JavaScript表达式，例如函数调用或简单的运算。

完整示例与注意事项

结合后端数据传递和前端模板渲染，一个完整的示例如下：

Node.js后端代码 (app.js 或 routes/index.js):

const express = require('express');
const app = express();
const port = 3000;

// 设置EJS为视图引擎
app.set('view engine', 'ejs');
// 设置视图文件目录
app.set('views', './views'); 

// 定义一个路由来渲染页面
app.get('/', (req, res) => {
    const currentDay = "Wednesday";
    const typeOfDay = "Midweek";

    // 将数据传递给EJS模板
    res.render('index', {
        currentDay: currentDay,
        typeOfDay: typeOfDay
    });
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

登录后复制

EJS模板文件 (views/index.ejs):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS Multiple Variables</title>
</head>
<body>
    <!-- 使用模板字面量在单个EJS标签中渲染多个变量 -->
    <h1>Today is <%= `${currentDay}. It's a ${typeOfDay}` %></h1>

    <!-- 也可以根据需求继续使用多个EJS标签 -->
    <p>The current day is <%= currentDay %> and it is a <%= typeOfDay %>.</p>
</body>
</html>

登录后复制

注意事项：

表达式的复杂性： 尽管模板字面量非常强大，但在其中嵌入过于复杂的逻辑可能会降低模板的可读性。对于复杂的计算或条件判断，建议在后端控制器中预处理数据，或在EJS中使用 <% ... %> 脚本标签执行逻辑，以保持模板的“瘦”和“纯粹”。
HTML转义： <%= ... %> 标签会自动对输出内容进行HTML转义，以防止跨站脚本（XSS）攻击。如果需要输出原始的HTML内容（例如，后端传递的富文本），应使用 <%- ... %> 标签，但请务必确保内容是安全的，因为它会直接渲染HTML而不进行转义。模板字面量本身不会改变<%= ... %>或<%- ... %>的转义行为。

总结

在EJS模板中，当需要在单个脚本标签内渲染多个变量并进行字符串拼接时，JavaScript模板字面量（``）是比简单的逗号分隔符更优、更可靠的解决方案。它通过将多个变量嵌入到一个统一的字符串表达式中，使得EJS能够一次性输出所需的完整内容，从而提升了代码的简洁性和可读性。理解<%= ... %>标签的工作原理以及JavaScript表达式的求值规则，是高效利用EJS模板的关键。

以上就是EJS 模板中单脚本标签渲染多个变量的技巧与实践的详细内容，更多请关注php中文网其它相关文章！