javascript中的模板字面量是什么_为什么模板字面量比字符串拼接更好
模板字面量是JavaScript中用反引号包裹的字符串，支持嵌入表达式、多行文本和字符串插值，比传统拼接更简洁、安全、可读性强，且经引擎优化性能相当。
模板字面量（Template Literals）是 JavaScript 中用反引号 ` 包裹的字符串，支持嵌入表达式、多行文本和字符串插值。它比传统字符串拼接更简洁、可读性更强，也更安全。
支持变量插值，写法更直观
模板字面量用 ${expression} 直接插入变量或表达式，无需加号连接或重复引号。
例如：
const name = "小明";const age = 25;
// 模板字面量
const msg = `你好，我是${name}，今年${age}岁。`;
// 字符串拼接（老写法）
const msg2 = "你好，我是" + name + "，今年" + age + "岁。";
插值部分会自动转为字符串，还支持调用函数、三元运算等：
const price = 99.9;const desc = `价格：${price.toFixed(1)} 元，是否便宜？${price
天然支持多行字符串
模板字面量可直接换行，保留缩进和空格；而普通字符串换行需用 \n 和加号续行，易出错且难维护。
比如生成 HTML 片段：
const html = `${title}
${content}
`;
若用双引号拼接，就得写成：
const html2 = "\n" +"
" + title + "
\n" +"
" + content + "
\n" +"";
可配合标签函数实现高级功能
模板字面量开头可以加一个函数名，变成“带标签的模板字面量”，用于自定义处理逻辑，比如防 XSS、格式化、国际化等。
简单示例（HTML 转义）：
function escape(strings, ...values) {return strings.reduce((result, str, i) => {
const value = values[i] ? String(values[i]).replace(/&/g, "&")
.replace(/, "/g, ">") : '';
return result + str + value;
}, '');
}
const user = "";
const safeHtml = escape`${user}`; // 输出已转义内容
没有运行时性能劣势，现代引擎优化良好
有人误以为模板字面量更慢，其实 V8 等主流引擎对它做了深度优化，性能与字符串拼接基本持平，甚至在复杂场景下更优（如多段插值+静态文本混合）。可读性提升带来的维护成本下降，远超微乎其微的执行差异。
