使用 Babel 支援 Nullish Coalescing Operator | 點燈坊

若要為 null 與 undefined 提供預設值，由於 null 與 undefined 也是 Falsy Value，過去會使用 || ，但 Empty String 與 0 亦為 Falsy Value，因此可能會造成意想不到 Bug，且語意也不夠精確，?? 提供了更精確的解決方案。

Version

macOS Catalina 10.15.1
WebStorm 2019.3
Node 13.2.0
Babel 7.6.4
ECMAScript 2020

Plugin Installation

$ yarn add @babel/core @babel/cli @babel/preset-env @babel/node --dev

安裝 Babel 所需 package。

$ yarn add @babel/plugin-proposal-nullish-coalescing-operator --dev

安裝 @babel/plugin-proposal-nullish-coalescing-operator，由於是 Babel 使用，安裝成 devDependencies 即可。

package.json

Babel Configuration

.babelrc

{
  "plugins": [
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

在 project 根目錄新增 .babelrc 設定 plugin。

Nullish Coalescing Operator

let foo = null ?? 'default string'
console.log(foo)

let baz = 0 ?? 42
console.log(baz)

若 ?? 左側為 null 或 undefined，將回傳 ?? 右側值。

若 ?? 左側為 empty string 或 0，將回傳 ?? 左側值，因此與 || 明顯不同。

Conclusion

• ?? 目前為 ECMAScript 2020 標準，可先透過 Babel 輔助率先使用

Sample Code

完整範例可在我的 GitHub 上找到

Reference

Babel, @babel/plugin-proposal-nullish-coalescing-operator
MDN, Nullish coalescing operator