javascript模板字符串是什么_如何使用它
JavaScript模板字符串用反引号定义，支持多行书写和${}嵌入表达式，比单/双引号更灵活；可插入变量、运算、函数调用、三元运算及对象属性，但需注意反引号不可替换、避免未声明变量、嵌套需额外反引号。
JavaScript模板字符串是用反引号（`）包裹的字符串，支持多行书写和嵌入表
达式，比传统单引号或双引号字符串更灵活、可读性更强。
模板字符串的基本写法
用一对反引号定义，内部可直接换行，无需转义；变量或表达式用${}语法插入：
-
普通文本：
`Hello World` -
嵌入变量：
const name = 'Alice'; console.log(`Hi, ${name}`); // Hi, Alice -
多行字符串：
const html = `Title
Content
`;
在模板字符串中使用表达式
大括号内不限于变量名，可以是任意合法的JavaScript表达式：
- 运算：
`2 + 3 = ${2 + 3}` // "2 + 3 = 5" - 函数调用：
`Length: ${'hello'.length}` // "Length: 5" - 三元运算：
`Status: ${isActive ? 'Online' : 'Offline'}` - 对象属性访问：
const user = {name: 'Bob'}; `User: ${user.name}`
避免常见错误
模板字符串不是万能的，要注意几个易错点：
- 不能用单引号或双引号替代反引号：`'${x}'` 或 `"${x}"` 不会解析变量
- ${} 内部不能有未声明变量：`${undeclaredVar}` 会报 ReferenceError
-
嵌套模板字符串需额外反引号：
`Outer ${`inner ${value}`}` -
标签函数需单独定义（如
String.raw`\\n`），不加标签时只是普通模板字符串
实际应用场景举例
模板字符串特别适合拼接动态内容：
-
生成HTML片段：
const list = ['a', 'b']; const html = `- ${list.map(i => `
- ${i} `).join('')}
-
构建API请求URL：
const id = 123; fetch(`/api/users/${id}?limit=${limit || 10}`); -
日志与调试信息：
console.log(`User ${user.id} logged in at ${new Date().toLocaleTimeString()}`);
