EJS传统多变量渲染的问题
在EJS模板中，我们经常会遇到需要同时渲染多个后端传递的变量的场景，比如展示用户信息、拼接动态路径等。传统的写法需要频繁使用<%= %>标签包裹每个变量，多个变量拼接时还要处理字符串连接符，代码会显得非常零散。
比如要展示用户的完整姓名和年龄，传统写法可能是这样的：
<p>用户姓名：<%= firstName %> <%= lastName %>，年龄：<%= age %>岁</p>
如果变量更多，或者需要拼接更复杂的逻辑，这种写法会让模板变得难以阅读和修改，还容易出现标签遗漏的问题。
模板字面量的基本特性
模板字面量是ES6引入的字符串特性，使用反引号（`）包裹字符串，支持在字符串中嵌入变量和表达式，语法为${表达式}。它不需要像传统字符串那样用加号拼接，还能保留换行格式，非常适合处理多变量拼接的场景。
普通JavaScript中使用模板字面量的示例如下：
const name = '张三';
const age = 25;
const info = `姓名：${name}，年龄：${age}岁`;
console.log(info); // 输出：姓名：张三，年龄：25岁EJS中使用模板字面量实现多变量渲染
EJS模板本身支持在<% %>标签中编写JavaScript逻辑，因此我们可以直接在EJS中使用模板字面量来处理多变量渲染，减少<%= %>标签的使用频率。
基础多变量拼接场景
还是以上面的用户信息展示为例，使用模板字面量的写法如下：
<%
const userInfo = `用户姓名：${firstName} ${lastName}，年龄：${age}岁`;
%>
<p><%= userInfo %></p>这种方式把所有变量拼接的逻辑放在了JavaScript代码块中，最终只需要输出一个拼接好的字符串，模板结构更清晰。
带条件判断的多变量渲染
如果需要根据变量值动态调整渲染内容，模板字面量同样可以结合表达式使用，比如用户年龄大于18岁时显示成年标识：
<%
const userDesc = `用户姓名：${firstName} ${lastName}，年龄：${age}岁，${age >= 18 ? '已成年' : '未成年'}`;
%>
<p><%= userDesc %></p>动态路径拼接场景
在拼接动态URL或者文件路径时，模板字面量也能简化逻辑，比如拼接用户头像的访问路径：
<%
const baseUrl = 'https://ipipp.com/static/avatars';
const avatarPath = `${baseUrl}/${userId}/${avatarName}`;
%>
<img src="<%= avatarPath %>" alt="用户头像" />注意事项
- EJS的
<% %>标签中编写的JavaScript代码需要符合语法规范，模板字面量的反引号不要和EJS标签的边界符号冲突。 - 如果拼接的内容包含HTML特殊字符，需要根据场景决定是否转义，EJS的
<%= %>标签默认会转义HTML，若需要输出原始HTML可以使用<%- %>标签。 - 模板字面量中的变量必须是当前EJS模板作用域内可访问的变量，也就是后端渲染时传递的变量或者在模板中定义的变量。
适用场景总结
模板字面量适合所有需要拼接多个变量的EJS渲染场景，尤其是变量数量多、拼接逻辑复杂的情况，能明显减少冗余的标签嵌套，提升代码的可读性和可维护性。对于简单的单变量渲染，传统<%= 变量名 %>的写法仍然简洁，不需要强行使用模板字面量。