在Web开发中使用EJS作为模板引擎时，经常会遇到需要同时渲染多个变量的需求，比如渲染用户信息、商品详情等多字段数据。传统的EJS变量渲染方式需要逐个写插值表达式，代码繁琐且可读性差，而结合JavaScript的模板字面量可以大幅简化这一过程。
EJS传统多变量渲染方式
传统EJS渲染多个变量时，需要在模板中逐个使用<%= 变量名 %>的语法插入每个变量，比如要渲染用户的姓名、年龄、邮箱三个字段，传统写法如下：
<div class="user-info"> <p>姓名：<%= userName %></p> <p>年龄：<%= userAge %></p> <p>邮箱：<%= userEmail %></p> </div>
这种方式在变量较少时问题不大，但如果需要渲染十几个甚至更多变量，就会出现大量重复的插值语法，后期维护时也不方便调整格式。
模板字面量结合EJS的高效渲染方法
模板字面量支持在字符串中嵌入变量和表达式，还可以换行保持格式，我们可以在EJS的脚本标签中使用模板字面量拼接多变量内容，再一次性输出。
基础使用步骤
- 在Node.js后端将多个变量整理成一个对象传递给EJS模板
- 在EJS模板中使用
<% %>脚本标签，通过模板字面量拼接所有需要渲染的变量 - 使用
<%- %>输出拼接后的字符串，避免HTML转义问题
完整代码示例
后端Node.js传递数据的代码：
const express = require('express');
const app = express();
// 设置EJS为模板引擎
app.set('view engine', 'ejs');
app.get('/user', (req, res) => {
// 整理多个用户变量为对象
const userData = {
userName: '张三',
userAge: 25,
userEmail: 'test@ipipp.com',
userCity: '北京'
};
// 传递对象给EJS模板
res.render('user', { userData });
});
app.listen(3000, () => {
console.log('服务启动在3000端口');
});EJS模板中的渲染代码：
<%
// 使用模板字面量拼接多个变量，保持格式清晰
const userInfoHtml = `
<div class="user-card">
<p>姓名：${userData.userName}</p>
<p>年龄：${userData.userAge}</p>
<p>邮箱：${userData.userEmail}</p>
<p>城市：${userData.userCity}</p>
</div>
`;
%>
<%- userInfoHtml %>注意事项
- 使用
<%- %>输出模板字面量拼接的结果，如果使用<%= %>会导致HTML标签被转义，无法正确渲染样式 - 如果模板字面量中需要嵌套单引号或双引号，注意转义或者调整引号的使用方式，避免语法错误
- 如果变量可能包含undefined或null，可以在模板字面量中添加默认值，比如
${userData.userName || '未知'}
适用场景
这种方式特别适合需要渲染多个关联变量、且变量格式相对固定的场景，比如列表项渲染、卡片式信息展示等。如果变量需要灵活调整格式或者部分变量需要条件渲染，也可以结合EJS的条件判断语法和模板字面量一起使用，进一步提升渲染效率。