本文探讨了在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>
这种方式虽然有效，但当需要组合的变量和静态文本较多时，会使得模板代码显得冗长且可读性下降。
解决方案：使用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，从而实现简洁、高效且可读性强的多变量渲染。这种方法不仅解决了特定问题，也提升了模板的整体可维护性。
