EJS模板中怎么在单个Scriptlet标签内渲染多个变量

EJS作为一款轻量级的嵌入式JavaScript模板引擎，在前端和服务端渲染场景中都有广泛应用，其中Scriptlet标签是执行JavaScript逻辑的核心载体。很多开发者在使用时会疑惑，能不能在单个Scriptlet标签内渲染多个变量，避免重复写标签带来的代码冗余。

单个Scriptlet标签的基本特性

EJS的Scriptlet标签语法为<% %>，标签内部可以编写任意合法的JavaScript代码，支持多行逻辑编写，不会像输出标签<%= %>那样直接返回内容，而是可以在内部处理变量后再进行输出。这就意味着我们可以在单个标签内完成多个变量的定义、运算和拼接操作。

多变量渲染的常用技巧

1. 字符串拼接输出多变量

如果需要在模板中连续输出多个变量，可以在Scriptlet标签内部通过字符串拼接的方式组合内容，再用输出标签渲染最终结果：

<%
// 定义多个需要渲染的变量
let userName = '张三';
let userAge = 25;
let userCity = '北京';
// 拼接多个变量的内容
let userInfo = '姓名：' + userName + '，年龄：' + userAge + '，城市：' + userCity;
%>
<%= userInfo %>

2. 数组遍历输出多个同类型变量

当需要处理多个同类型的变量（比如列表数据）时，可以在单个Scriptlet标签内用数组存储变量，再通过循环遍历输出：

<%
// 多个同类型的变量放在数组中
let tags = ['JavaScript', 'EJS', 'Node.js', '模板引擎'];
let tagStr = '';
// 遍历数组拼接内容
tags.forEach(function(tag, index) {
  tagStr += tag;
  if (index < tags.length - 1) {
    tagStr += '、';
  }
});
%>
<%= tagStr %>

3. 复杂逻辑下的多变量处理

如果变量需要经过条件判断、运算等复杂逻辑处理，同样可以在单个Scriptlet标签内完成所有操作：

<%
let price = 199;
let discount = 0.8;
let isVip = true;
// 根据条件计算最终价格
let finalPrice;
if (isVip) {
  finalPrice = price * discount * 0.9;
} else {
  finalPrice = price * discount;
}
let tips = '商品原价：' + price + '元，优惠后价格：' + finalPrice.toFixed(2) + '元';
%>
<%= tips %>

注意事项

• Scriptlet标签内部的JavaScript逻辑需要符合语法规范，避免出现未定义的变量直接使用的情况
• 如果变量包含HTML特殊字符，需要提前做转义处理，避免XSS风险
• 不要在单个Scriptlet标签内写过于复杂的逻辑，保持模板的可读性，复杂的逻辑建议放在后端处理后再传入模板

总结

通过合理利用Scriptlet标签支持多行JavaScript逻辑的特性，我们可以在单个标签内完成多个变量的处理、拼接和渲染，大幅减少模板中冗余的标签数量，让代码结构更加清晰。实际开发中可以根据变量的类型和业务需求，选择合适的拼接、遍历或者逻辑处理方式，提升EJS模板的开发效率。

EJSScriptlet标签模板渲染变量输出修改时间：2026-05-29 17:26:18