JavaScript模板字符串使用反引号包裹，通过${}插入变量或表达式，支持多行文本和标签模板，适用于动态生成HTML、构造URL等场景，提升代码可读性与安全性。
JavaScript模板字符串是一种更简洁、直观的方式来处理字符串拼接和动态内容插入。它从ES6（ECMAScript 2015）开始引入，使用反引号（`）包裹字符串，允许直接嵌入变量和表达式，让代码更具可读性和可维护性。
基本语法与变量插值
模板字符串使用反引号定义，变量通过${}语法插入。
const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 输出：Hello, Alice!
在${}中不仅可以放变量，还能放入任意JavaScript表达式，比如运算、函数调用等。
立即学习“Java免费学习笔记（深入）”；
-
`The sum is ${2 + 3}.`→ "The sum is 5." -
`Uppercase: ${name.toUpperCase()}.`→ "Uppercase: ALICE."
多行字符串支持
传统字符串需要使用转义字符\n换行，而模板字符串天然支持换行，直接回车即可保留格式。
const poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;
输出时会保持原始换行结构，无需额外处理，适合生成HTML片段或文案展示。
标签模板（Tagged Templates）
模板字符串可以与函数结合使用，称为“标签模板”。函数接收模板的字符串部分和插值部分，常用于国际化、样式化输出或防止XSS攻击。
示例：function highlight(strings, ...values) {
let result = '';
strings.forEach((str, i) => {
result += str;
if (values[i]) {
result += `${values[i]}`;
}
});
return result;
}
const user = 'Bob';
console.log(highlight`Hello, ${user}!`); // Hello, Bob!
这种模式在React的styled-components等库中广泛应用。
实际应用场景建议
模板字符串特别适合以下场景：
- 动态生成DOM内容，如拼接HTML元素
- 构造API请求URL，包含动态参数
- 日志输出中混合静态文本与变量
- 编写SQL语句或命令行指令时提升可读性
但注意避免在性能敏感的循环中频繁创建大型模板字符串，且不要用它拼接用户输入后直接插入页面，需配合转义防止安全问题。
基本上就这些。掌握模板字符串能显著提升编码效率，是现代JavaScript开发中的基础技能之一。
