模板字符串用反引号包裹,通过${variable}插入变量或表达式;支持多行文本原样保留;可嵌套但不推荐深层嵌套;无法自动响应变量变化,需封装函数实现动态更新。

JavaScript 模板字符串用 `(反引号)包裹,支持直接嵌入变量和表达式,比 + 拼接更安全、可读性更强。
模板字符串里怎么插入变量?
用 ${variable} 语法,大括号内可以是变量名、属性访问或简单表达式:
`Hello, ${name}``Total: ${items.length * price}`注意:大括号里不能有未声明的变量,否则运行时报 ReferenceError;也不能直接写对象字面量如 ${{a:1}},会语法错误,需加括号:${({a:1})}(但通常没必要)。
多行文本怎么写才不报错?
模板字符串天然支持换行,回车、缩进都会原样保留:
立即学习“Java免费学习笔记(深入)”;
`Line 1 Line 2 Indented`
常见误区:误用普通引号换行导致语法错误;或在 ${...} 外部手动拼接 \n,反而破坏可读性。如果需要动态控制换行,建议把逻辑提到表达式里,比如:
${shouldBreak ? '\n' : ''}- 或提前组装好段落数组再
.join('\n')
模板字符串能嵌套吗?
可以,但不推荐深层嵌套。例如:
const inner = `value: ${x}`;
const outer = `Result: ${inner}`;真正容易出问题的是「动态模板」场景——比如从接口拿到模板字符串再插值。这时 ${...} 不会被执行,只是纯文本。要实现运行时求值,得用 Function 构造器或 eval(极不推荐),或者改用专门的模板引擎(如 lodash.template)。
最常被忽略的一点:模板字符串不是万能的字符串构建工具。它在首次定义时就完成插值,后续变量变化不会自动更新。如果需要响应式拼接,得封装成函数或依赖响应式框架的能力。











