本文探讨了在EJS模板中如何高效地在单个脚本标签（``）内渲染多个变量。针对直接使用逗号分隔变量无法生效的问题，教程介绍了利用JavaScript模板字面量（` `` `）来拼接和输出多个变量的方法，从而实现代码的简洁与可读性，提升EJS模板的开发效率。
在构建动态网页时，EJS（Embedded JavaScript）作为一种流行的模板引擎，允许开发者将服务器端数据嵌入到HTML结构中。通常，我们会从服务器端向EJS模板传递多个数据对象。一个常见的问题是如何在EJS模板的单个输出脚本标签（<%= ... %>）内有效地渲染这些变量，而不是为每个变量都使用一个独立的标签。
传统的多变量渲染方式
假设我们通过res.render方法向EJS模板传递了两个变量：currentDay和typeOfDay。
服务器端代码示例：
EJS模板（views/index.ejs）中分离标签渲染：
最直接且有效的方法是为每个变量使用单独的EJS输出标签：
这种方法能够正确渲染所有变量，输出结果为："Today is Monday. It's a workday."。然而，当需要渲染的变量较多或输出字符串结构复杂时，这种方式可能会导致模板代码显得冗长且分散。
尝试合并标签的常见误区
一些开发者可能会尝试在单个EJS输出标签内使用逗号分隔多个变量，期望它们能被一同渲染：
为什么这种方式无法按预期工作？
在JavaScript中，逗号操作符（,）会从左到右依次执行表达式，并返回最后一个表达式的值。因此，currentDay, typeOfDay这个表达式的最终结果是typeOfDay的值。EJS的<%= ... %>标签只会输出这个表达式的最终结果。所以，上述代码只会渲染typeOfDay的值，而currentDay会被忽略，输出可能为："Today is workday"。这显然不符合我们同时渲染两个变量的预期。
推荐方案：使用JavaScript模板字面量
为了在单个EJS输出标签内高效、简洁地渲染多个变量，我们可以利用ES6（ECMAScript 2015）引入的
模板字面量（Template Literals）
特性。模板字面量允许嵌入表达式，并且提供了更强大的字符串插值功能。
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
使用模板字面量的EJS模板代码：
工作原理：
EJS解析器遇到<%= ... %>标签。
标签内部是一个JavaScript模板字面量字符串，由反引号（``）包围。
模板字面量中的${currentDay}和${typeOfDay}是变量占位符，JavaScript引擎会在运行时将currentDay和typeOfDay的实际值插入到字符串中。
最终，整个模板字面量表达式会计算出一个完整的字符串（例如："Monday. It's a workday"）。
EJS的<%= ... %>标签会将这个完整的字符串输出到HTML中。
这样，我们既实现了在单个EJS标签内渲染多个变量，又保持了代码的简洁性和可读性。
完整示例
结合服务器端数据和EJS模板字面量，一个完整的渲染示例如下：
服务器端代码（保持不变）：
EJS模板（views/index.ejs）：
通过访问http://localhost:3000/，你将看到第三种方法能够完美地实现预期效果。
注意事项
ES6兼容性：
确保你的Node.js环境支持ES6模板字面量。现代Node.js版本（LTS版本）都已完全支持。
复杂逻辑：
尽管模板字面量非常强大，但如果模板内的逻辑变得过于复杂，建议将部分数据处理逻辑移至服务器端，或在EJS模板中使用辅助函数，以保持模板的“薄”和专注于呈现。
代码执行与输出：
记住<%= ... %>用于输出表达式的结果，而<% ... %>用于执行任意JavaScript代码但不输出结果（例如，循环、条件判断）。
总结
在EJS模板中渲染多个变量时，为了避免为每个变量使用单独的输出标签所带来的冗余，并解决直接使用逗号分隔变量的误区，推荐采用JavaScript的模板字面量。通过将模板字面量嵌入到EJS的<%= ... %>输出标签中，可以实现变量的灵活插值和字符串的简洁构建，从而提高EJS模板的开发效率和
代码可读性
。这种方法是处理多变量输出场景下的一个优雅且高效的解决方案。
// 假设在一个Express应用中
const express = require('express');
const app = express();
const path = require('path');
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views')); // 设置EJS模板文件目录
app.get('/', (req, res) => {
const currentDay = 'Monday';
const typeOfDay = 'workday';
res.render('index', {
currentDay: currentDay,
typeOfDay: typeOfDay
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});Today is <%= currentDay%>. It's a <%= typeOfDay %>.
Today is <%= currentDay, typeOfDay%>
Today is <%= `${currentDay}. It's a ${typeOfDay}` %>
// ... (同上)
app.get('/', (req, res) => {
const currentDay = 'Monday';
const typeOfDay = 'workday';
res.render('index', {
currentDay: currentDay,
typeOfDay: typeOfDay
});
});
// ...
EJS 多变量渲染
EJS 多变量渲染示例
方法一：分离脚本标签（可行但可能冗余）
输出：Today is <%= currentDay%>. It's a <%= typeOfDay %>.
方法二：尝试合并但无效的方式
输出：Today is <%= currentDay, typeOfDay%>
方法三：推荐的模板字面量方式（简洁高效）
输出：Today is <%= `${currentDay}. It's a ${typeOfDay}` %>