javascript模板字面量用反引号定义,支持${变量}插入变量、表达式、跨行、对象属性访问及可选链;需避免单双引号误用、未声明变量、null/undefined未处理及ie兼容性问题。

JavaScript 中用反引号(`)包裹字符串,再在其中用 ${变量名} 插入变量值,就能实现模板字面量拼接。
基础写法:用 ${} 插入变量
模板字面量用反引号定义,变量或表达式放在 ${} 里,JS 会自动计算并转为字符串拼接进去。
- 变量直接写:如
let name = "小明"; console.log(`你好,${name}`);→ 输出“你好,小明” - 支持表达式:如
let a = 3; console.log(`结果是 ${a * 2}`);→ 输出“结果是 6” - 可跨行书写:反引号内换行会被保留,不需要
\n
嵌套对象和属性访问
可以在 ${} 中访问对象属性、调用方法,甚至链式取值。
let user = { name: "李华", age: 25 }; console.log(`用户:${user.name},年龄:${user.age}`);-
console.log(`大写名:${user.name.toUpperCase()}`);→ “大写名:LIHUA” - 支持可选链(ES2020+):
${user?.profile?.city || "未知"}
避免常见错误
模板字面量不是万能的,注意几个易错点:
- 别用单引号或双引号代替反引号——那样
${}不会被解析,只是普通文本 -
${}里不能有未声明变量,否则报ReferenceError - 如果变量是
null或undefined,会原样转成字符串"null"或"undefined",必要时先做判断或默认值处理 - 不支持旧版 IE,需确认运行环境兼容性(IE 完全不支持)
结合条件与逻辑更灵活
在 ${} 中可以写三元运算符、逻辑表达式,让拼接更动态。
let score = 85; console.log(`成绩:${score >= 60 ? "及格" : "不及格"}`);let isAdmin = true; console.log(`权限:${isAdmin && "管理员"} ${!isAdmin && "普通用户"}`);- 复杂逻辑建议抽成函数,保持模板清晰:
${getStatusLabel(status)}
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











