JavaScript模板字面量是ES6引入的新型字符串表示方式，使用反引号包裹字符串内容，相比传统的单引号、双引号字符串，它在javascript字符串处理场景下具备更多实用特性，能够解决很多传统字符串操作的痛点。
模板字面量的基本语法
模板字面量使用反引号（`）作为字符串的定界符，内部可以直接插入变量和表达式，不需要像传统字符串那样使用加号拼接。核心的插值语法是使用${}包裹变量或表达式，解析时会自动将结果转换为字符串插入到对应位置。
下面是一个基础的模板字面量使用示例：
// 传统字符串拼接方式
const name = '张三';
const age = 25;
const traditionalStr = '姓名：' + name + '，年龄：' + age;
console.log(traditionalStr); // 输出：姓名：张三，年龄：25
// 模板字面量方式
const templateStr = `姓名：${name}，年龄：${age}`;
console.log(templateStr); // 输出：姓名：张三，年龄：25
模板字面量在javascript字符串处理中的核心优势
1. 简化字符串插值操作
传统字符串拼接时，如果变量较多或者拼接逻辑复杂，会出现大量加号和引号嵌套，很容易出现语法错误。模板字面量的${}插值语法可以直接在字符串内部嵌入变量、函数调用、运算表达式，大幅减少拼接代码量。
支持表达式插入的示例：
const a = 10;
const b = 20;
// 插入运算表达式
const calcStr = `10加20的结果是：${a + b}`;
console.log(calcStr); // 输出：10加20的结果是：30
// 插入函数调用结果
function getGreeting(name) {
return `你好，${name}`;
}
const greetStr = `${getGreeting('李四')}，欢迎来到开发社区`;
console.log(greetStr); // 输出：你好，李四，欢迎来到开发社区
2. 支持多行字符串定义
传统字符串如果要定义多行内容，需要使用换行转义符n，或者多个字符串拼接，可读性很差。模板字面量可以直接保留字符串内的换行格式，不需要额外处理，非常适合定义HTML片段、SQL语句等需要多行展示的内容。
多行字符串示例：
// 传统方式定义多行字符串
const traditionalMultiLine = '第一行内容n' +
'第二行内容n' +
'第三行内容';
console.log(traditionalMultiLine);
// 模板字面量定义多行字符串
const templateMultiLine = `第一行内容
第二行内容
第三行内容`;
console.log(templateMultiLine);
3. 支持标签模板功能
模板字面量还支持标签模板的高级用法，即在模板字面量前添加一个函数名，这个函数会处理模板字面量的各个部分，常用于字符串转义、国际化、样式处理等场景，进一步扩展了javascript字符串处理的能力。
标签模板的基础示例：
// 定义标签函数
function formatStr(strings, ...values) {
let result = '';
for (let i = 0; i < strings.length; i++) {
result += strings[i];
if (i < values.length) {
// 对插入的值做简单处理，比如转成大写
result += values[i].toString().toUpperCase();
}
}
return result;
}
const city = '北京';
const weather = '晴';
const formatted = formatStr`城市：${city}，天气：${weather}`;
console.log(formatted); // 输出：城市：北京，天气：晴
模板字面量的使用注意事项
- 模板字面量使用反引号包裹，如果字符串内部需要出现反引号，需要使用转义符`处理。
${}内部可以放任意有效的JavaScript表达式，但是如果插入的是对象，会默认调用对象的toString方法，得到的结果是[object Object]，如果需要展示对象内容，需要先做JSON序列化处理。- 模板字面量不会自动转义HTML特殊字符，如果拼接的内容要插入到DOM中，需要手动处理特殊字符避免XSS风险。
在实际的javascript字符串处理工作中，模板字面量已经逐步替代了传统的字符串拼接方式，它的语法简洁、功能丰富，能够有效提升代码的开发效率和可维护性，是前端开发者必须掌握的基础特性。
JavaScript模板字面量javascript字符串处理字符串插值修改时间：2026-07-08 20:18:30