模板字符串是Javascript ES6规范中新增的字符串字面量类型，它使用反引号（`）作为定界符，相比传统的单引号或双引号字符串，提供了更灵活的字符串处理能力，支持变量插值、多行字符串、表达式计算等特性，大幅简化了字符串拼接的复杂度。
模板字符串的基本语法
模板字符串最基础的用法就是用反引号包裹字符串内容，即使内容中包含单引号或双引号也不需要额外转义，示例如下：
// 普通字符串需要转义单引号 const str1 = 'It's a nice day'; // 模板字符串不需要转义 const str2 = `It's a nice day`; console.log(str1 === str2); // 输出 true
模板字符串的核心用法
1. 变量插值
模板字符串支持通过${变量名}的语法直接在字符串中嵌入变量，不需要像传统方式那样用加号拼接，示例如下：
const name = '张三';
const age = 25;
// 传统字符串拼接
const info1 = '我叫' + name + '，今年' + age + '岁';
// 模板字符串插值
const info2 = `我叫${name}，今年${age}岁`;
console.log(info1 === info2); // 输出 true
2. 嵌入表达式
${}内部不仅可以放变量，还可以放任意有效的Javascript表达式，表达式的计算结果会直接插入到字符串中，示例如下：
const a = 10;
const b = 20;
// 嵌入算术表达式
const sumStr = `10加20的结果是${a + b}`;
console.log(sumStr); // 输出 10加20的结果是30
// 嵌入三元表达式
const score = 85;
const result = `考试成绩${score >= 60 ? '及格' : '不及格'}`;
console.log(result); // 输出 考试成绩及格
3. 多行字符串
传统字符串如果需要换行，需要使用n转义字符，而模板字符串可以直接换行，保留字符串中的换行格式，示例如下：
// 传统多行字符串 const multiLine1 = '第一行n第二行n第三行'; // 模板字符串多行 const multiLine2 = `第一行 第二行 第三行`; console.log(multiLine1 === multiLine2); // 输出 true
4. 标签模板
模板字符串还支持标签模板的用法，即在模板字符串前面添加一个函数名，该函数会处理模板字符串的内容，示例如下：
// 定义标签函数
function formatStr(strings, ...values) {
let result = '';
for (let i = 0; i < strings.length; i++) {
result += strings[i];
if (i < values.length) {
// 对插入的值做简单处理，比如转成大写
result += values[i].toUpperCase();
}
}
return result;
}
const city = 'beijing';
const country = 'china';
const str = formatStr`我来自${city}，国家是${country}`;
console.log(str); // 输出 我来自BEIJING，国家是CHINA
使用注意事项
- 模板字符串必须用反引号包裹，不能用单引号或双引号替代，否则无法识别插值语法
${}内部如果是对象，会默认调用对象的toString方法转换为字符串，若对象没有重写该方法，会输出[object Object]- 模板字符串中的空格和换行都会被保留，不需要的换行和缩进要注意删除，避免影响最终字符串的格式
- 如需在模板字符串中输出反引号本身，需要使用转义字符
`
常见使用场景
模板字符串在日常开发中的应用非常广泛，比如拼接接口请求参数、生成动态HTML片段、输出格式化的日志信息等，例如生成HTML片段的示例：
const userList = [
{ id: 1, name: '李四', age: 22 },
{ id: 2, name: '王五', age: 28 }
];
// 用模板字符串生成用户列表HTML
const html = `
<ul class="user-list">
${userList.map(user => `<li>用户ID：${user.id}，姓名：${user.name}，年龄：${user.age}</li>`).join('')}
</ul>
`;
console.log(html);
通过上述示例可以看出，模板字符串大幅简化了动态HTML的生成逻辑，比传统的字符串拼接方式可读性更高，也不容易出错。
模板字符串Javascript字符串拼接插值表达式标签模板修改时间：2026-07-13 08:51:25