EJS模板中在单个Scriptlet标签内渲染多个变量的技巧-html教程-PHP中文网

EJS模板中在单个Scriptlet标签内渲染多个变量的技巧

花韻仙語

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

原创

878人浏览过

EJS模板中在单个Scriptlet标签内渲染多个变量的技巧

本文探讨了在ejs模板中如何高效地在单个<%= ... %> scriptlet标签内渲染多个javascript变量。针对传统方法中只能渲染第一个变量的问题，文章介绍了使用javascript模板字面量（template literal）作为解决方案，并提供了具体示例，帮助开发者编写更简洁、可读性更强的ejs代码。

在EJS（Embedded JavaScript）模板引擎中，开发者经常需要将后端传递的多个数据变量渲染到前端页面上。一个常见的需求是将这些变量组合成一个连续的字符串，并在单个EJS输出scriptlet标签（<%= ... %>）内完成渲染。然而，直接尝试使用逗号分隔多个变量，例如<%= var1, var2 %>，通常不会按预期工作，往往只会渲染第一个变量或产生不一致的结果。这是因为<%= ... %>期望一个单一的JavaScript表达式，其评估结果将被转换为字符串并输出。

理解EJS输出Scriptlet的工作原理

EJS的<%= expression %>标签用于将expression的评估结果输出到HTML。这里的expression可以是任何有效的JavaScript表达式。当您尝试<%= currentDay, typeOfDay %>时，currentDay, typeOfDay是一个使用了逗号操作符的JavaScript表达式。逗号操作符会依次评估其所有操作数，并返回最后一个操作数的值。然而，在EJS的上下文中，这种用法通常不会将所有操作数的值连接起来。相反，它可能导致只有第一个变量被渲染，或者整个表达式的求值结果（即最后一个变量的值）被渲染，而忽略了中间的格式化需求。

例如，如果您有以下后端数据：

// Node.js / Express 示例
const express = require('express');
const app = express();

app.set('view engine', 'ejs'); // 设置EJS为模板引擎

app.get('/', (req, res) => {
    const currentDay = "Wednesday";
    const typeOfDay = "work day";
    res.render('index', {
        currentDay: currentDay,
        typeOfDay: typeOfDay
    });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

登录后复制

在EJS模板中，如果您尝试：

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

登录后复制

您可能会发现页面上只显示 "Today is Wednesday"，而typeOfDay的内容被忽略了。

传统的、可行的做法是使用多个独立的scriptlet标签：

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

登录后复制

这种方式虽然有效，但当需要组合的变量和静态文本较多时，会使得模板代码显得冗长且可读性下降。

Operator

OpenAI推出的AI智能体工具

175

查看详情

解决方案：使用JavaScript模板字面量

解决此问题的最佳实践是利用JavaScript ES6引入的模板字面量 (Template Literals)。模板字面量允许您嵌入表达式到字符串中，从而在单个字符串中构建复杂的输出。它们使用反引号（`）而不是单引号或双引号。

模板字面量的基本语法：

`这是一个包含${变量名}和${另一个变量}的字符串。`

登录后复制

您可以将整个模板字面量作为单个表达式放入EJS的输出scriptlet中：

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

登录后复制

通过这种方式，EJS会评估反引号内的JavaScript模板字面量，将其结果（一个完整的字符串）输出到HTML中。

示例代码

以下是一个完整的EJS模板示例，展示了不同渲染方式的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS 多变量渲染教程</title>
</head>
<body>
    <h1>EJS多变量渲染示例</h1>

    <h2>传统方式（多个scriptlet标签）</h2>
    <p>今天是 <%= currentDay %>。这是一个 <%= typeOfDay %>。</p>
    <!-- 预期输出：今天是 Wednesday。这是一个 work day。 -->

    <h2>错误尝试（单个scriptlet标签内逗号分隔）</h2>
    <!-- 这种方式通常不会按预期工作，可能只渲染第一个变量或行为异常 -->
    <p>今天是 <%= currentDay, typeOfDay %>。</p>
    <!-- 实际输出可能：今天是 Wednesday。 (typeOfDay被忽略) -->

    <h2>推荐方案：使用JavaScript模板字面量</h2>
    <p>今天是 <%= `${currentDay}。这是一个${typeOfDay}` %>。</p>
    <!-- 预期输出：今天是 Wednesday。这是一个 work day。 -->

    <h3>原始问题中的标题渲染</h3>
    <h1>Today is <%= `${currentDay}. It's a ${typeOfDay}` %></h1>
    <!-- 预期输出：<h1>Today is Wednesday. It's a work day</h1> -->

    <h3>更复杂的模板字面量示例</h3>
    <%
        const userName = "Alice";
        const userRole = "Administrator";
    %>
    <p><%= `欢迎 ${userName}！您的角色是 ${userRole}。` %></p>
    <!-- 预期输出：欢迎 Alice！您的角色是 Administrator。 -->

</body>
</html>

登录后复制

优点与注意事项

代码简洁性与可读性： 使用模板字面量可以显著减少模板中重复的EJS标签，使代码更整洁，更易于阅读和理解。
灵活的字符串构建： 模板字面量支持多行字符串，并且可以嵌入任意JavaScript表达式，提供了强大的字符串格式化能力，而不仅仅是变量。
减少HTML/EJS混合： 将字符串拼接逻辑封装在单个EJS表达式内，有助于保持HTML结构的清晰，减少模板中逻辑与标记的过度交织。
利用ES6特性： 充分利用了现代JavaScript的特性，提升开发效率和代码质量。

注意事项： 确保您的Node.js环境支持ES6及更高版本的JavaScript特性，因为模板字面量是ES6引入的。现代的Node.js版本都已完全支持。

总结

在EJS模板中，当需要在一个输出scriptlet标签 (<%= ... %>) 内渲染多个变量并进行字符串拼接时，直接使用逗号分隔变量通常无法达到预期效果。最佳实践是利用JavaScript的模板字面量（Template Literals）。通过将多个变量和静态文本嵌入到反引号 ` 字符串中，可以构建出复杂的输出字符串，然后将整个模板字面量作为单个表达式传递给EJS，从而实现简洁、高效且可读性强的多变量渲染。这种方法不仅解决了特定问题，也提升了模板的整体可维护性。

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