ES6模板字符串与可选链操作符的实战技巧

1. 模板字符串与可选链的奇妙化学反应

在ES6引入的众多语法糖中，模板字符串和可选链操作符（?.）无疑是提升开发体验的两大杀器。但你可能不知道，当这两个特性相遇时，会产生一些令人惊喜的化学反应。最近我在重构一个前端项目时，就遇到了这样一个有趣的场景：

javascript复制const user = {
  profile: {
    name: '张三',
    social: {
      twitter: '@zhangsan'
    }
  }
};

// 传统写法
const bio = user.profile 
  ? user.profile.social 
    ? `Twitter: ${user.profile.social.twitter || '未设置'}` 
    : '社交信息未设置'
  : '用户信息未设置';

// 使用可选链+模板字符串
const elegantBio = `Twitter: ${user.profile?.social?.twitter || '未设置'}`;

这种写法不仅减少了代码量，更重要的是消除了那些烦人的嵌套三元表达式。但要注意的是，模板字符串中的可选链使用有个特殊限制——你不能在标记模板(tagged template)中使用可选链，这会导致语法错误。

2. 模板字符串的进阶用法解析

2.1 多行字符串与表达式嵌入

模板字符串最基础的功能就是创建多行字符串和嵌入表达式：

javascript复制const name = '李四';
const age = 28;

// 多行字符串
const intro = `姓名：${name}
年龄：${age}
职业：前端工程师`;

// 表达式计算
const discount = 0.8;
const price = 100;
console.log(`折后价：${price * discount}元`);

但你可能不知道，${}内可以放入任何有效的JavaScript表达式，包括函数调用、三元运算，甚至是另一个模板字符串：

javascript复制function formatCurrency(value) {
  return `¥${value.toFixed(2)}`;
}

const product = {
  name: '笔记本电脑',
  price: 5999,
  stock: 5
};

const info = `产品：${product.name}
价格：${formatCurrency(product.price)}
库存状态：${product.stock > 0 
  ? `有货（剩余${product.stock}台）` 
  : '缺货'}`;

2.2 标签模板的妙用

标签模板可能是模板字符串中最强大但也最容易被忽视的特性。它允许你通过一个函数来解析模板字符串：

javascript复制function highlight(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (i < values.length) {
      result += `<span class="highlight">${values[i]}</span>`;
    }
  });
  return result;
}

const name = '王五';
const score = 95;
const output = highlight`学生${name}的考试成绩是：${score}分`;

// 输出：学生<span class="highlight">王五</span>的考试成绩是：<span class="highlight">95</span>分

这种模式在i18n国际化、XSS防护等场景下特别有用。比如实现一个简单的XSS过滤：

javascript复制function safeHtml(strings, ...values) {
  let result = strings[0];
  for (let i = 0; i < values.length; i++) {
    const value =