JavaScript模板字符串用反引号包裹，支持${}变量插值和原生多行，外层非反引号则插值失效；${}内仅限表达式，禁用语句；缩进空格被保留，可用trim()处理；标签函数如html...`可实现转义等高级功能。
JavaScript 模板字符串是用反引号 ` 包裹的字符串字面量，支持变量插值和多行文本，比单引号/双引号字符串更灵活。
模板字符串怎么写？基础语法和反引号位置
必须用反引号 `，不是单引号 ' 或双引号 "。一旦混用，就不是模板字符串，${...} 会直接当普通字符输出，不会求值。
常见错误现象：
- 写成 "Hello ${name}" → 报错或原样输出 ${name}
- 混用引号嵌套（如 `"nested"`）没问题，但外层必须是反引号
正确写法示例：
`Hello ${name}``Value: ${42 + 1}`如何嵌入变量？${} 里只能放表达式，不能放语句
${} 是插值占位符，里面写的是 JavaScript 表达式，不是声明、不是语句。比如不能写 if、for、let，也不能只写一个变量名不带任何操作——虽然单纯变量名本身也是合法表达式，但容易误以为“赋值”或“声明”也能进。
立即学习“Java免费学习笔记（深入）”；
-
${user.name}✅ 可以，属性访问是表达式 -
${items.length > 0 ? 'yes' : 'no'}✅ 三元运算符是表达式 -
${console.log('hi')}⚠️ 虽然能运行，但副作用不推荐 -
${let x = 1}❌ 语法错误，let是声明语句 -
${function() {}}❌ 函数声明语句不行；但${() => {}}✅ 箭头函数表达式可以（不过一般也不这么用）
换行和空格怎么处理？缩进会原样保留
模板字符串里的换行、制表符、空格都会被保留，不像普通字符串需要 \n。这对生成 HTML 或 SQL 片段很友好，但也容易在渲染时多出意外空白。
常见问题：
- 在 JSX 中写多行模板字符串，缩进变成 DOM 中的空格
- 拼接 SQL 时，首行缩进导致 SELECT\n name 实际变成两行，某些数据库驱动可能报错
解决建议：
- 用
.trim()去首尾空白：`\n hello\n`.trim() - 用
.replace(/\s+/g, ' ')压缩内部多余空格（慎用，可能破坏格式化需求） - 把换行符放在插值外面，避免缩进污染：
`line1${value} line2`
标签函数怎么用？不只是拼接，还能做转义、校验、国际化
模板字符串前面加一个函数名（如 html`<div>${x}</div>`），就触发“标签函数”调用。该函数接收两个参数：字符串数组（strings）和插值结果数组（values）。这是实现安全 HTML 渲染、SQL 参数化、i18n 的底层机制。
例如防 XSS 的简单 html 标签函数：
function html(strings, ...values) {
return strings.reduce((acc, str, i) => {
const val = values[i] ?? '';
const escaped = String(val).replace(/[&<>"']/g, c => ({
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}[c]));
return acc + str + escaped;
}, '');
}使用：html`<p>Hello ${userInput}</p>` → 自动转义 userInput 中的危险字符。
注意：html 不是内置函数，必须自己定义或引入库（如 lit-html、hyperhtml）。直接写 html`...` 而没定义函数，会报 ReferenceError。
