JavaScript模板字符串用反引号定义,支持多行书写和${}嵌入表达式,比单/双引号更灵活;可插入变量、运算、函数调用、三元运算及对象属性,但需注意反引号不可替换、避免未声明变量、嵌套需额外反引号。

JavaScript模板字符串是用反引号(`)包裹的字符串,支持多行书写和嵌入表达式,比传统单引号或双引号字符串更灵活、可读性更强。
模板字符串的基本写法
用一对反引号定义,内部可直接换行,无需转义;变量或表达式用${}语法插入:
-
普通文本:
`Hello World` -
嵌入变量:
const name = 'Alice'; console.log(`Hi, ${name}`); // Hi, Alice -
多行字符串:
const html = ``;Title
Content
在模板字符串中使用表达式
大括号内不限于变量名,可以是任意合法的JavaScript表达式:
动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包
立即学习“Java免费学习笔记(深入)”;
- 运算:
`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()}`);










