本文探讨了在EJS模板中如何高效地在单个脚本标签（“）内渲染多个变量。针对直接使用逗号分隔变量无法生效的问题，教程介绍了利用JavaScript模板字面量（` “ `）来拼接和输出多个变量的方法，从而实现代码的简洁与可读性，提升EJS模板的开发效率。
在构建动态网页时，EJS（Embedded JavaScript）作为一种流行的模板引擎，允许开发者将服务器端数据嵌入到HTML结构中。通常，我们会从服务器端向EJS模板传递多个数据对象。一个常见的问题是如何在EJS模板的单个输出脚本标签（）内有效地渲染这些变量，而不是为每个变量都使用一个独立的标签。
传统的多变量渲染方式
假设我们通过res.render方法向EJS模板传递了两个变量：currentDay和typeOfDay。
服务器端代码示例：
// 假设在一个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');});
EJS模板（views/index.ejs）中分离标签渲染：
最直接且有效的方法是为每个变量使用单独的EJS输出标签：
Today is . It's a .
这种方法能够正确渲染所有变量，输出结果为：”Today is Monday. It’s a workday.”。然而，当需要渲染的变量较多或输出字符串结构复杂时，这种方式可能会导致模板代码显得冗长且分散。
尝试合并标签的常见误区
一些开发者可能会尝试在单个EJS输出标签内使用逗号分隔多个变量，期望它们能被一同渲染：
Today is
为什么这种方式无法按预期工作？在JavaScript中，逗号操作符（,）会从左到右依次执行表达式，并返回最后一个表达式的值。因此，currentDay, typeOfDay这个表达式的最终结果是typeOfDay的值。EJS的标签只会输出这个表达式的最终结果。所以，上述代码只会渲染typeOfDay的值，而currentDay会被忽略，输出可能为：”Today is workday”。这显然不符合我们同时渲染两个变量的预期。
推荐方案：使用JavaScript模板字面量
为了在单个EJS输出标签内高效、简洁地渲染多个变量，我们可以利用ES6（ECMAScript 2015）引入的模板字面量（Template Literals）特性。模板字面量允许嵌入表达式，并且提供了更强大的字符串插值功能。
使用模板字面量的EJS模板代码：
Today is
工作原理：
EJS解析器遇到标签。标签内部是一个JavaScript模板字面量字符串，由反引号（“）包围。模板字面量中的${currentDay}和${typeOfDay}是变量占位符，JavaScript引擎会在运行时将currentDay和typeOfDay的实际值插入到字符串中。最终，整个模板字面量表达式会计算出一个完整的字符串（例如：”Monday. It’s a workday”）。EJS的标签会将这个完整的字符串输出到HTML中。
这样，我们既实现了在单个EJS标签内渲染多个变量，又保持了代码的简洁性和可读性。
完整示例
结合服务器端数据和EJS模板字面量，一个完整的渲染示例如下：
服务器端代码（保持不变）：
// ... (同上)app.get('/', (req, res) => { const currentDay = 'Monday'; const typeOfDay = 'workday'; res.render('index', { currentDay: currentDay, typeOfDay: typeOfDay });});// ...
EJS模板（views/index.ejs）：
EJS 多变量渲染 EJS 多变量渲染示例
方法一：分离脚本标签（可行但可能冗余）
输出：Today is . It's a .
方法二：尝试合并但无效的方式
输出：Today is
方法三：推荐的模板字面量方式（简洁高效）
输出：Today is
通过访问http://localhost:3000/，你将看到第三种方法能够完美地实现预期效果。
注意事项
ES6兼容性： 确保你的Node.js环境支持ES6模板字面量。现代Node.js版本（LTS版本）都已完全支持。复杂逻辑： 尽管模板字面量非常强大，但如果模板内的逻辑变得过于复杂，建议将部分数据处理逻辑移至服务器端，或在EJS模板中使用辅助函数，以保持模板的“薄”和专注于呈现。代码执行与输出： 记住用于输出表达式的结果，而用于执行任意JavaScript代码但不输出结果（例如，循环、条件判断）。
总结
在EJS模板中渲染多个变量时，为了避免为每个变量使用单独的输出标签所带来的冗余，并解决直接使用逗号分隔变量的误区，推荐采用JavaScript的模板字面量。通过将模板字面量嵌入到EJS的输出标签中，可以实现变量的灵活插值和字符串的简洁构建，从而提高EJS模板的开发效率和代码可读性。这种方法是处理多变量输出场景下的一个优雅且高效的解决方案。
以上就是EJS模板中高效渲染多个变量：使用模板字面量的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1583596.html
微信扫一扫 
支付宝扫一扫 
