本文探讨了在ejs模板中，如何优雅地在单个脚本标签内渲染多个javascript变量。针对常见的逗号分隔符无法实现预期效果的问题，文章提供了使用javascript模板字面量（template literals）的解决方案，并详细解释了其工作原理及应用场景，旨在提升模板代码的简洁性和可读性。
EJS模板中多变量渲染的挑战
在使用EJS（Embedded JavaScript）作为Node.js应用的视图引擎时，开发者经常需要将后端传递的多个数据变量渲染到HTML页面中。EJS的核心在于其脚本标签，其中用于将JavaScript表达式的结果输出到HTML。
一个常见的需求是在同一行或同一HTML元素内显示多个变量，例如，后端传递了currentDay和typeOfDay两个变量：
res.render('index', { currentDay: "Monday", typeOfDay: "Weekday"});
期望在模板中显示为 “Today is Monday. It’s a Weekday”。
初学者可能会尝试将多个变量用逗号分隔，置于一个标签内，例如：
Today is
然而，这种做法通常无法达到预期效果。在JavaScript中，逗号运算符会依次执行每个表达式，并返回最后一个表达式的值。因此，currentDay, typeOfDay这个表达式的最终结果是typeOfDay的值。EJS的标签只会输出这个最终的表达式结果，而非将所有变量拼接起来。根据实际观察，在上述尝试中，有时甚至只渲染第一个变量，或结果不符合预期，导致输出不完整或错误。
标准的多脚本标签渲染方式
为了正确显示所有变量，一种直接且有效的方法是使用多个脚本标签，每个标签负责渲染一个变量。这是EJS模板中最常见和推荐的做法之一：
Today is . It's a
这种方式清晰明了，每个变量都有其独立的输出上下文，确保了所有数据的正确渲染。它易于理解和维护，对于大多数简单的变量拼接场景而言是完全足够的。
优雅的解决方案：JavaScript模板字面量
虽然多个脚本标签能够解决问题，但在某些情况下，尤其当需要拼接的字符串较长或变量较多时，使用多个标签可能会显得冗长，并可能降低模板的可读性。此时，JavaScript的模板字面量（Template Literals，使用反引号 ` 定义）提供了一个更为优雅和简洁的解决方案。
模板字面量允许在字符串中嵌入表达式（通过${expression}语法），并将它们解析为字符串的一部分。这意味着我们可以在一个模板字面量中构建一个完整的字符串，然后将这个字符串作为单个表达式传递给EJS的标签。
以下是使用模板字面量解决多变量渲染问题的示例：
Today is
工作原理：在这个例子中，`${currentDay}. It’s a ${typeOfDay} 是一个完整的JavaScript模板字面量字符串。当EJS引擎解析到时，它会执行括号内的JavaScript代码。JavaScript引擎会首先解析模板字面量，将currentDay和typeOfDay的值嵌入到字符串中，生成一个单一的字符串（例如：”Monday. It’s a Weekday”）。随后，EJS会将这个生成的字符串作为`表达式的最终结果输出到HTML中。
优势：
简洁性： 减少了重复的EJS标签，使模板代码更加紧凑。可读性： 字符串的结构一目了然，便于理解最终的输出格式。灵活性： 可以在模板字面量中包含任意复杂的JavaScript表达式，例如函数调用或简单的运算。
完整示例与注意事项
结合后端数据传递和前端模板渲染，一个完整的示例如下：
Node.js后端代码 (app.js 或 routes/index.js):
const express = require('express');const app = express();const port = 3000;// 设置EJS为视图引擎app.set('view engine', 'ejs');// 设置视图文件目录app.set('views', './views'); // 定义一个路由来渲染页面app.get('/', (req, res) => { const currentDay = "Wednesday"; const typeOfDay = "Midweek"; // 将数据传递给EJS模板 res.render('index', { currentDay: currentDay, typeOfDay: typeOfDay });});// 启动服务器app.listen(port, () => { console.log(`Server running at http://localhost:${port}`);});
EJS模板文件 (views/index.ejs):
EJS Multiple Variables Today is
The current day is and it is a .
注意事项：
表达式的复杂性： 尽管模板字面量非常强大，但在其中嵌入过于复杂的逻辑可能会降低模板的可读性。对于复杂的计算或条件判断，建议在后端控制器中预处理数据，或在EJS中使用 脚本标签执行逻辑，以保持模板的“瘦”和“纯粹”。HTML转义： 标签会自动对输出内容进行HTML转义，以防止跨站脚本（XSS）攻击。如果需要输出原始的HTML内容（例如，后端传递的富文本），应使用 标签，但请务必确保内容是安全的，因为它会直接渲染HTML而不进行转义。模板字面量本身不会改变或的转义行为。
总结
在EJS模板中，当需要在单个脚本标签内渲染多个变量并进行字符串拼接时，JavaScript模板字面量（“）是比简单的逗号分隔符更优、更可靠的解决方案。它通过将多个变量嵌入到一个统一的字符串表达式中，使得EJS能够一次性输出所需的完整内容，从而提升了代码的简洁性和可读性。理解标签的工作原理以及JavaScript表达式的求值规则，是高效利用EJS模板的关键。
以上就是EJS 模板中单脚本标签渲染多个变量的技巧与实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1583764.html
微信扫一扫 
支付宝扫一扫 
