JavaScript中空值合并运算符的用法疑问及通用场景咨询

首先，咱们先拆解你遇到的问题：你原来的代码const hasError = val ?? true不符合预期，核心原因是空值合并运算符（??）的逻辑是：仅当左侧操作数为null或undefined时，返回右侧的值；否则直接返回左侧操作数本身。所以当val是'text'、true这类真值时，hasError会直接等于val，自然会进入错误处理分支。

这种场景下能不能用空值合并运算符？ #

能实现，但非常不推荐——因为写法反而不如你现在用的val === undefined || val === null直观易读。如果一定要用??凑出需求逻辑，可以这么写：

const hasError = (val ?? null) == null;

原理是：如果val是null/undefined，val ?? null会返回null，和null比较结果为true；如果val是其他值，val ?? null返回val，和null比较结果为false。但显然这种写法绕了一圈，完全没必要，更建议你保留当前的显式判断写法。

空值合并运算符的通用适用场景 #

??的核心价值是精准区分null/undefined和其他假值（比如0、''、false），下面是几个最常用的场景：

• 给变量设置「仅在null/undefined时生效」的默认值
  比如处理用户输入的数字：

  // 如果用户输入0，我们希望保留0，而不是替换成默认值
  const inputCount = 0;
  const count = inputCount ?? 10; // count = 0，符合预期
  // 对比用||的情况：const count = inputCount || 10; 会得到10，不符合需求
  

  再比如处理用户可能故意留空的字符串：

  const userName = '';
  const displayName = userName ?? 'Guest'; // displayName = ''，符合预期
  

• 结合可选链（?.）处理嵌套对象的默认值
  当你需要访问多层嵌套的对象属性，同时要处理属性不存在的情况时，?.+??的组合非常省心：

  const user = { profile: null };
  const userCity = user?.profile?.address?.city ?? 'Unknown'; // 结果是'Unknown'
  

• 函数参数中同时兼容null和undefined的默认值
  函数的参数默认值仅在参数为undefined时生效，如果想同时兼容null传入的场景，就可以用??：

  function printMessage(content) {
    const actualContent = content ?? 'No message provided';
    console.log(actualContent);
  }
  printMessage(null); // 输出"No message provided"
  printMessage(undefined); // 同样输出"No message provided"
  

• 避免DOM元素获取后的空值处理
  当你用document.querySelector获取元素时，可能得到null，这时候可以用??设置兜底方案：

  const container = document.querySelector('#app') ?? document.body;
  // 如果#app不存在，就用body作为容器
  

内容的提问来源于stack exchange，提问作者Geewoo94