EJS 模板中多变量渲染技巧：使用模板字面量提升代码简洁性

本文探讨了在 ejs 模板中高效渲染多个变量的方法。针对直接在单个 `` 标签内使用逗号分隔无法奏效的问题，教程详细介绍了如何利用 javascript 模板字面量（template literals）实现多变量的整合输出，从而提高模板代码的简洁性和可读性。

EJS 模板中的变量渲染基础

在 EJS (Embedded JavaScript) 模板中，我们经常需要将后端传递的数据渲染到 HTML 页面上。通常，通过 res.render() 方法将一个对象作为数据传递给 EJS 模板。例如：

// 后端代码 (Node.js/Express)
app.get('/', (req, res) => {
    const currentDay = "Monday";
    const typeOfDay = "Workday";
    res.render('index', {
        currentDay: currentDay,
        typeOfDay: typeOfDay
    });
});

在 EJS 模板 (index.ejs) 中，我们可以通过 <%= variableName %> 语法来渲染这些变量。最直接的方法是为每个变量使用单独的脚本标签：

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

这种方法能够正确地将 currentDay 和 typeOfDay 的值分别渲染出来，输出结果为 <h1>Today is Monday. It's a Workday</h1>。

挑战：单标签多变量渲染的局限性

有时，开发者可能希望在同一个 <%= %> 脚本标签内渲染多个变量，以求代码更简洁。一个常见的尝试是使用逗号分隔变量：

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

然而，这种写法并不能达到预期的效果。在 JavaScript 表达式中，逗号运算符会依次计算每个操作数，并返回最后一个操作数的值。因此，currentDay, typeOfDay 这个表达式最终会返回 typeOfDay 的值。EJS 引擎在处理 <%= %> 标签时，会执行其内部的 JavaScript 表达式并将结果输出。这意味着，上述代码可能只会渲染 typeOfDay 的值，或者由于语法不符合 EJS 的标准用法而导致其他不可预测的行为，并不能将两个变量连接起来。

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

为了在单个 EJS 脚本标签内优雅地渲染和组合多个变量，我们可以利用 JavaScript ES6 引入的模板字面量 (Template Literals)。模板字面量使用反引号 (`) 包裹，并允许通过 ${expression} 语法嵌入表达式或变量。

Rose.ai

一个云数据平台，帮助用户发现、可视化数据

74

查看详情

将这个特性与 EJS 结合，我们可以在 <%= %> 标签内部构建一个模板字面量字符串，如下所示：

<h1>Today is <%= `${currentDay}, ${typeOfDay}` %></h1>

工作原理：

1. EJS 引擎遇到 <%= ... %> 标签时，会执行其内部的 JavaScript 代码。
2. 内部代码 \${currentDay}, ${typeOfDay}`` 是一个标准的 JavaScript 模板字面量。
3. JavaScript 引擎会解析这个模板字面量，将 ${currentDay} 和 ${typeOfDay} 替换为它们各自的值（例如 "Monday" 和 "Workday"）。
4. 最终，模板字面量会生成一个完整的字符串，例如 "Monday, Workday"。
5. EJS 引擎将这个生成的字符串作为 <%= %> 标签的结果输出到 HTML 中。

这样，输出结果将是 <h1>Today is Monday, Workday</h1>，成功地在单个 EJS 标签内整合并渲染了多个变量。

优点与注意事项

• 简洁性与可读性： 使用模板字面量可以显著减少 EJS 标签的数量，使模板代码更加简洁、易读，尤其是在需要拼接多个变量和静态文本时。
• 灵活性： 模板字面量内部可以包含任何有效的 JavaScript 表达式，不仅仅是变量，这提供了极大的灵活性来格式化输出。
• 现代 JavaScript 特性： 模板字面量是 ES6 的标准特性，在 Node.js 环境中得到良好支持，无需担心兼容性问题。

注意事项：

• 确保传递给 EJS 模板的数据对象中包含所有需要渲染的变量。
• 模板字面量中的变量名必须与后端传递的数据对象的属性名完全匹配。
• 虽然模板字面量功能强大，但也要避免在模板中编写过于复杂的业务逻辑，保持模板的展示层职责。

总结

在 EJS 模板中渲染多个变量时，虽然可以为每个变量使用单独的 <%= %> 标签，但为了提高代码的简洁性和可读性，推荐使用 JavaScript 模板字面量。通过在单个 <%= %> 标签内部利用反引号和 ${} 语法，我们可以高效、优雅地组合和输出多个动态数据，从而构建出更清晰、更易维护的模板代码。

以上就是EJS 模板中多变量渲染技巧：使用模板字面量提升代码简洁性的详细内容，更多请关注php中文网其它相关文章！