模板字面量使用反引号包围，通过${}插入变量或表达式，支持多行文本和嵌套，提升字符串处理的可读性与灵活性。

在 javaScript 中，字符串插值曾经需要拼接字符串和变量，代码容易变得冗长且难读。es6 引入了模板字面量（Template Literals），让字符串插值变得更简洁、直观。

什么是模板字面量？

模板字面量使用反引号（`）包围字符串，允许嵌入变量或表达式。它支持多行文本和动态内容插入，是处理复杂字符串的有效方式。

基本语法：

 `Hello, ${expression}` 

如何进行字符串插值

使用 ${} 将变量或表达式插入字符串中。

立即学习“Java免费学习笔记（深入）”；

示例：

 const name = "Alice"; const age = 30;  const greeting = `Hello, my name is ${name} and I am ${age} years old.`; console.log(greeting); // 输出: Hello, my name is Alice and I am 30 years old. 

你可以在 ${} 中放入任意 javascript 表达式：

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

• 数学运算： `The sum is ${5 + 3}`
• 函数调用： `Uppercase: ${name.toUpperCase()}`
• 三元表达式： `${age >= 18 ? ‘adult’ : ‘minor’}`

支持多行字符串

传统字符串不能直接换行，而模板字面量天然支持多行文本。

示例：

 const message = `   This is a   multi-line   string. `; console.log(message); 

输出会保留换行和空格格式，适合生成 html 或格式化日志信息。

实用技巧与注意事项

模板字面量非常灵活，但也有一些细节需要注意：

• 嵌套模板： 可在 ${} 中再使用模板字面量：`Result: ${`nested ${value}`}`
• 避免注入风险： 模板字面量不会自动转义 HTML，若用于 dom 渲染需手动处理用户输入
• 标签模板： 高级用法，通过前缀函数定制解析逻辑，如 styled.div`color: red;`

基本上就这些。模板字面量让字符串操作更自然，推荐在现代 JavaScript 开发中优先使用。