javaScript模板字符串用反引号包裹,支持变量插值(${variable})、多行书写(保留换行与空格)和标签函数(如highlight实现高亮),比传统拼接更简洁安全灵活。

javascript 的模板字符串用反引号 ` 包裹,支持变量插值、多行书写和表达式计算,比传统字符串拼接更简洁、安全、灵活。
变量插值:不用加号也能塞数据
在模板字符串里,用 ${variable} 直接嵌入变量或表达式,js 会自动计算并转成字符串:
- const name = “小明”; const age = 25;
- console.log(`你好,我是${name},今年${age}岁。`); → 输出:你好,我是小明,今年25岁。
- 括号里还能写简单表达式,比如 ${age > 18 ? ‘成年人’ : ‘未成年人’}
天然支持多行:换行即换行,不需 n
反引号内的换行符会被保留,适合写 html 片段、sql 查询或长提示文案:
- const html = `
${title}
${content}
立即学习“Java免费学习笔记(深入)”;
`;
- 注意:缩进空格也会原样输出,如需美化结构又不想带空格,可用 .trim() 或拆分后 join
标签函数:给字符串加“处理层”
模板字符串可配合自定义标签函数,实现转义、国际化、高亮等逻辑:
- function highlight(strings, …values) {
- return strings.map((str, i) => str + (values[i] ? `${values[i]}` : ”)).join(”);
- }
- const word = “危险”; console.log(highlight`操作${word},请确认!`);
- 结果中 “危险” 会被包裹成 危险
基本上就这些。模板字符串不是语法糖那么简单——它让字符串操作更接近语义,减少出错,也更容易维护。不复杂但容易忽略细节,比如忘记用反引号、插值里写了未定义变量、或者多行时没处理多余空白。