在EJS模板开发中，我们经常需要把后端的处理结果传递到前端脚本中使用，有时候为了避免重复书写脚本标签，会希望在单个脚本标签内渲染多个变量。下面我们就来详细讲解具体的实现方法和注意事项。
基础变量渲染方法
对于字符串、数字、布尔值这类基础类型的变量，我们可以直接通过EJS的插值语法<%= %>来嵌入到脚本标签中。需要注意的是，字符串类型的变量需要手动添加引号，避免语法错误。
<script> // 渲染字符串变量，需要手动加引号 const username = '<%= username %>'; // 渲染数字变量，不需要额外处理 const userAge = <%= userAge %>; // 渲染布尔变量 const isLogin = <%= isLogin %>; console.log(username, userAge, isLogin); </script>
对象和数组类型变量渲染
当我们需要传递对象或者数组这类复杂数据类型时，直接插值会出现格式问题，正确的做法是先把变量转换为JSON字符串，再在前端解析使用。
<script>
// 后端传递的userInfo是对象，先通过JSON.stringify转换
const userInfo = JSON.parse('<%= JSON.stringify(userInfo) %>');
// 后端传递的list是数组，同样先转换再解析
const dataList = JSON.parse('<%= JSON.stringify(dataList) %>');
console.log(userInfo.name, dataList.length);
</script>多个变量统一渲染的优化方式
如果需要在单个脚本标签内渲染多个变量，我们可以把所有的后端变量先整理到一个统一的对象中，再一次性传递到前端，这样代码会更简洁，也方便维护。
<script>
// 后端把需要传递的变量都放到pageData对象中
const pageData = JSON.parse('<%= JSON.stringify(pageData) %>');
// 直接从pageData中取需要的变量
const { title, count, config } = pageData;
console.log(title, count, config);
</script>常见注意事项
- 字符串变量插值后一定要加引号，否则如果变量值为空或者包含特殊字符，会导致脚本语法错误。
- 使用
JSON.stringify转换对象时，如果对象包含函数、undefined等无法序列化的内容，需要先处理掉这些属性，避免转换失败。 - 如果变量内容中包含单引号或者双引号，需要提前做转义处理，防止破坏脚本的语法结构。
- 不要在脚本标签内混用EJS的逻辑标签<% %>和插值标签<%= %>，避免解析顺序问题导致的错误。
错误示例对比
下面是错误的渲染方式和正确方式的对比，帮助大家避开常见坑点：
| 错误写法 | 正确写法 | 说明 |
|---|---|---|
| <script>const name = <%= name %>;</script> | <script>const name = '<%= name %>';</script> | 字符串变量缺少引号，会导致语法错误 |
| <script>const obj = <%= obj %>;</script> | <script>const obj = JSON.parse('<%= JSON.stringify(obj) %>');</script> | 直接插值对象会出现格式错误，无法被脚本识别 |