邏輯或賦值 (||=)

Baseline 已廣泛支援

此功能已成熟,並可在許多裝置和瀏覽器版本上使用。自 2020 年 9 月起,所有瀏覽器均已提供此功能。

邏輯或賦值 (||=) 運算子只在左側運算元為假值時才評估右側運算元並將其賦值給左側。

試一試

const a = { duration: 50, title: "" };

a.duration ||= 10;
console.log(a.duration);
// Expected output: 50

a.title ||= "title is empty.";
console.log(a.title);
// Expected output: "title is empty."

語法

js
x ||= y

描述

邏輯或賦值會短路,這意味著 x ||= y 等同於 x || (x = y),不同之處在於表示式 x 只會被評估一次。

由於邏輯或運算子的短路特性,如果左側不是假值,則不會執行賦值。例如,以下程式碼不會丟擲錯誤,儘管 xconst

js
const x = 1;
x ||= 2;

以下程式碼也不會觸發 setter

js
const x = {
  get value() {
    return 1;
  },
  set value(v) {
    console.log("Setter called");
  },
};

x.value ||= 2;

事實上,如果 x 不是假值,y 根本不會被評估。

js
const x = 1;
x ||= console.log("y evaluated");
// Logs nothing

示例

設定預設內容

如果“lyrics”元素為空,則顯示預設值

js
document.getElementById("lyrics").textContent ||= "No lyrics.";

在這裡,短路尤其有利,因為元素不會不必要地更新,也不會引起不必要的副作用,例如額外的解析或渲染工作,或焦點丟失等。

注意:請注意您正在檢查的 API 返回的值。如果返回空字串(一個假值),則必須使用||=,以便顯示“No lyrics.”而不是空白。但是,如果 API 在內容為空時返回nullundefined,則應改用??=

規範

規範
ECMAScript® 2026 語言規範
# sec-assignment-operators

瀏覽器相容性

另見