JavaScript 中的空合并运算符

空合并运算符 ( ?? ) 是 ES2020 中引入的一个逻辑运算符，当其左侧操作数为 null 或 undefined。

这是一个逻辑运算符，它的返回值是 true 或 false。

它与逻辑 OR (||) 运算符不同，后者返回第一个为 true 的值。

示例


const foo = null ?? 'default string'

console.log(foo)
// 期望输出: "default string"


const foo = 0 ?? 42

console.log(foo)
// 期望输出: 0

如果左边的值为 false，则 || 可能会产生一些问题，例如 0 或 ''。


const foo = 0 || 42
console.log(foo) // 42

const bar = 0 ?? 42
console.log(bar) // 0

与 || 不同的是， ?? 不返回第一个为 true 的值，仅当左侧值为 null 或 undefined 时，它才返回右侧值。


const foo = '' || 'default string'
console.log(foo) // 'default string'

const bar = '' ?? 'default string'
console.log(bar) // ''

const baz = undefined ?? 'default string'
console.log(baz) // 'default string'

用法

如果变量是 null 或 undefined，当想要返回默认值时，空合并运算符非常有用。


const [result, setResult] = useState(null)

useEffect(() => {
  fetch('https://www.bing.com/search?q=hello')
    .then((response) => response.json())
    .then((json) => setResult(json))
}, [])

return <div>{result ?? 'Loading...'}</div>

在此示例中，调用 API 获取数据，如果数据尚未加载，就显示一条加载消息。

使用 React 和 TypeScript 时，采用以下类型：


type User = {
  name: string
  happy: boolean | null
}

export const User = ({ user }: { user: User }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      {user.happy ?? 'Unknown'}
    </div>
  )
}

在此示例中，显示了用户的姓名以及他们是否高兴。如果用户的幸福感是 null ，期望结果是 Unknown 。这满足类型检查器的要求，因为 null 是 boolean | null 的有效值。