JavaScript模板字面量中动态表达式的正确使用姿势是什么

模板字面量是ES6新增的字符串表示方式，使用反引号包裹字符串内容，最大的特点就是支持在字符串中嵌入动态表达式，不需要再通过加号拼接字符串和变量，让代码更简洁易读。在实际开发中，掌握动态表达式的正确使用方法，能避免很多不必要的语法错误。

模板字面量动态表达式基本语法

模板字面量中的动态表达式需要放在${}占位符中，表达式执行后的结果会被转换成字符串，插入到占位符所在的位置。基本的使用形式如下：

// 嵌入变量
const name = '张三';
const age = 25;
const info = `姓名：${name}，年龄：${age}`;
console.log(info); // 输出：姓名：张三，年龄：25

// 嵌入简单运算
const a = 10;
const b = 20;
const result = `两数之和为：${a + b}`;
console.log(result); // 输出：两数之和为：30

可嵌入的动态表达式类型

1. 变量与常量

可以直接在${}中嵌入已经声明的变量或者常量，包括基本数据类型和引用数据类型，引用数据类型会默认调用其toString方法转换为字符串。

const user = {
  name: '李四',
  // 自定义toString方法
  toString() {
    return this.name;
  }
};
const str = `当前用户：${user}`;
console.log(str); // 输出：当前用户：李四

2. 函数调用

可以在占位符中直接调用函数，函数的返回值会作为动态内容插入字符串。需要注意函数调用不要写成标签形式，比如input()是函数调用，不是<input/>标签。

function getGreeting(time) {
  if (time < 12) {
    return '早上好';
  } else if (time < 18) {
    return '下午好';
  } else {
    return '晚上好';
  }
}
const hour = new Date().getHours();
const greeting = `${getGreeting(hour)}，欢迎访问系统`;
console.log(greeting);

3. 三元运算符与逻辑表达式

可以在占位符中使用三元运算符或者逻辑表达式，实现简单的条件判断逻辑，不需要额外定义函数。

const score = 85;
const level = `成绩等级：${score >= 90 ? '优秀' : score >= 60 ? '及格' : '不及格'}`;
console.log(level); // 输出：成绩等级：及格

const isLogin = true;
const tip = `登录状态：${isLogin && '已登录' || '未登录'}`;
console.log(tip); // 输出：登录状态：已登录

4. 对象属性访问与数组操作

支持在占位符中访问对象属性、数组元素，也可以进行数组的常用操作，比如拼接、截取等。

const arr = ['苹果', '香蕉', '橙子'];
const fruitStr = `水果列表：${arr.join('、')}`;
console.log(fruitStr); // 输出：水果列表：苹果、香蕉、橙子

const obj = { id: 1, title: 'JavaScript教程' };
const desc = `课程信息：ID为${obj.id}，名称是${obj.title}`;
console.log(desc); // 输出：课程信息：ID为1，名称是JavaScript教程

常见使用误区

• 忘记使用反引号包裹字符串，仍然使用单引号或者双引号，此时${}会被当作普通字符处理，无法解析动态表达式。
• 在${}中写多行表达式或者复杂的语句块，模板字面量的占位符只支持单个表达式，不支持语句块，多行逻辑需要先封装成函数再调用。
• 直接在占位符中写HTML标签不转义，比如`<div>${content}</div>`如果content包含HTML特殊字符，需要手动转义避免XSS问题。
• 误以为占位符中可以声明变量，比如${const a = 1; a}这种写法会直接抛出语法错误。

最佳实践建议

复杂逻辑不要直接写在模板字面量的占位符中，尽量先处理逻辑得到结果，再将结果放入占位符，提升代码可读性和可维护性。

如果动态表达式逻辑较复杂，建议先定义函数或者变量，再嵌入到模板字面量中：

// 不好的写法
const order = {
  price: 100,
  count: 3,
  discount: 0.8
};
const orderDesc = `订单总价：${order.price * order.count * order.discount > 200 ? (order.price * order.count * order.discount * 0.9).toFixed(2) : (order.price * order.count * order.discount).toFixed(2)}`;

// 好的写法
const totalPrice = order.price * order.count * order.discount;
const finalPrice = totalPrice > 200 ? (totalPrice * 0.9).toFixed(2) : totalPrice.toFixed(2);
const orderDescGood = `订单总价：${finalPrice}`;
console.log(orderDescGood);

另外，如果需要在模板字面量中嵌入HTML内容，并且内容来自用户输入，一定要对特殊字符进行转义，避免XSS攻击：

function escapeHtml(str) {
  return str.replace(/[<>&]/g, (match) => {
    const map = {
      '<': '<',
      '>': '>',
      '&': '&'
    };
    return map[match];
  });
}
const userInput = '<script>alert("xss")</script>';
const safeStr = `用户输入内容：${escapeHtml(userInput)}`;
console.log(safeStr); // 输出：用户输入内容：<script>alert("xss")</script>

JavaScript模板字面量动态表达式ES6修改时间：2026-07-16 07:09:26