EJS模板单脚本标签渲染多个变量的基础原理
EJS模板的核心是通过<%= %>标签将服务端传递的变量输出到HTML中，而单个脚本标签内渲染多个变量，本质是在<script>标签内部，通过多个<%= %>标签分别输出不同的变量，或者将多个变量组合成对象后一次性输出，再在脚本中解析使用。
首先我们需要明确，EJS的变量是在服务端渲染阶段替换的，脚本标签内的内容在服务端渲染时就会被处理，因此可以直接在脚本标签内嵌入EJS输出语法。
基础实现方式：逐个输出变量
如果变量数量较少，且都是简单类型，可以直接在脚本标签内逐个使用<%= %>输出变量，这种方式直观易懂，适合少量变量的场景。
比如服务端传递了username、age、role三个变量，前端模板可以这样写：
<script>
// 逐个渲染多个变量
const username = '<%= username %>';
const age = <%= age %>;
const role = '<%= role %>';
console.log('用户名：', username);
console.log('年龄：', age);
console.log('角色：', role);
</script>这里需要注意，如果是字符串类型的变量，需要在EJS输出外层加单引号，避免渲染后出现语法错误；数字、布尔值等类型则不需要加引号。
进阶方式：组合对象输出多个变量
当变量数量较多时，逐个输出会让脚本标签内的代码变得冗长，此时可以将多个变量组合成一个对象，在服务端传递，然后在EJS中一次性输出整个对象，前端脚本直接解析对象即可。
服务端代码（以Node.js的Express框架为例）：
// 服务端传递组合对象
app.get('/page', (req, res) => {
res.render('index', {
userInfo: {
username: '张三',
age: 25,
role: '管理员',
email: 'test@ipipp.com'
},
pageConfig: {
title: '首页',
theme: 'dark'
}
});
});对应的EJS模板中，单脚本标签渲染方式如下：
<script>
// 一次性渲染多个变量组成的对象
const userInfo = <%= JSON.stringify(userInfo) %>;
const pageConfig = <%= JSON.stringify(pageConfig) %>;
console.log('用户信息：', userInfo);
console.log('页面配置：', pageConfig);
// 直接使用对象内的属性
document.title = pageConfig.title;
</script>这里使用JSON.stringify是为了将对象转换成合法的JSON字符串，避免对象中的特殊字符导致脚本语法错误，同时保证渲染后的内容可以被JavaScript正确解析。
特殊场景处理：包含特殊字符的变量
如果变量中包含引号、换行等特殊字符，直接输出可能会导致脚本报错，此时需要对变量进行转义处理。EJS本身提供了<%- %>标签用于输出未转义的内容，但如果是字符串变量，更稳妥的方式是在服务端先处理特殊字符，或者使用JSON.stringify自动处理转义。
比如变量中包含单引号的情况：
<script> // 包含单引号的变量，通过JSON.stringify自动转义 const description = <%= JSON.stringify(description) %>; console.log(description); </script>
假设服务端传递的description是He's a developer，经过JSON.stringify处理后，渲染后的内容会变成"He's a developer"，不会破坏脚本的语法结构。
实践注意事项
- 避免在脚本标签内混用过多EJS逻辑，尽量只做变量输出，复杂的逻辑放在服务端或前端脚本中处理，保证模板可读性。
- 如果变量是数组或复杂对象，优先使用组合对象+
JSON.stringify的方式，减少逐个输出的冗余代码。 - 渲染敏感变量时，要注意XSS风险，避免直接输出用户输入的未校验内容，必要时在服务端做过滤处理。
- 如果需要在多个脚本标签中使用相同的变量，可以统一在第一个脚本标签中渲染并挂载到全局，后续脚本直接调用即可，不需要重复渲染。
常见问题解答
Q：为什么渲染数字变量时不需要加引号？
A：因为EJS渲染数字变量时，会直接输出数字本身，比如<%= age %>如果age是25，渲染后就是25，属于合法的JavaScript语法，不需要额外加引号。而字符串变量如果不加引号，渲染后会变成裸字符串，导致语法错误。
Q：组合对象输出时，对象属性不存在怎么办？
A：可以在服务端传递对象时设置默认值，或者在EJS中使用三元判断，比如<%= userInfo ? JSON.stringify(userInfo) : '{}' %>，避免渲染后出现undefined导致脚本报错。
| 渲染方式 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 逐个输出变量 | 变量数量少（3个以内） | 直观易懂，无需额外处理 | 变量多时代码冗余 |
| 组合对象输出 | 变量数量多、结构复杂 | 代码简洁，易维护 | 需要服务端配合传递对象 |