JS填0卻變預設值：分清雙豎線與空值合併

設定值明明是0，畫面卻套用了預設的10；開關明明是false，結果又變成開啟。先找程式裡是否用了value || 預設值。雙豎線會把0、false和空字串等falsy值一起當成切換到右側的條件。若只有null與undefined才代表缺值，應改用??。

0有值，雙豎線仍會換掉它

這個例子假設0是允許的設定，10才是缺值時的預設。可直接在瀏覽器Console或Node.js執行。

const configuredCount = 0

console.log(configuredCount || 10) // 10
console.log(configuredCount ?? 10) // 0

||不是只檢查變數有沒有資料。它先判斷左側是否為truthy；若不是，就回傳右側的值。??的條件較窄，只在左側為null或undefined時採用右側；0會原樣保留。

關閉與空白，也可能是刻意的選擇

const enabled = false
const customLabel = ''

console.log(enabled || true)  // true
console.log(enabled ?? true)  // false

console.log(customLabel || '未填') // 未填
console.log(customLabel ?? '未填') // 空字串

若false表示關閉某項功能，使用|| true會把它改成true。若空字串表示「不要顯示標籤」，||也會補回文字。先決定這些值在你的功能裡是否合法，再選運算子；不是所有預設值都應一律改成??。

例如名稱欄位若不允許空白，保留空字串就不符合需求。那是欄位驗證與資料整理的責任，不能只靠??替你判斷。

真正缺值時，才採用預設

const settings = {
  count: 0,
  label: null
}

console.log(settings.count ?? 10)     // 0
console.log(settings.label ?? '未填') // 未填
console.log(settings.delay ?? 5)      // 5

這裡settings已經是物件；沒有delay屬性，讀取結果為undefined，因此採用5。label明確設為null，也會採用預設。這不表示??能讓不存在的變數或任何屬性存取都安全，它處理的是左側已求值後的結果。

保留值，不等於值已經合法

??不會把字串「0」轉成數字，也不會把NaN變成預設值。若資料來自表單或API，仍要依資料格式確認型別、範圍與缺值規則，再把可用資料帶進畫面。

回到原程式時，先用0、false、空字串、null、undefined各測一次，確認哪些情況該保留、哪些才補預設。若把??和||或&&組合在同一個表達式，必須用括號明確分組；不加括號直接混用會有語法錯誤。複雜規則也可以先拆成有名字的變數，方便看清每一步。

兩者都會短路求值：不需要右側時，右側函式不會執行。因此若預設值是一個函式呼叫，也要確認你希望它在哪些情況被呼叫，而不是只看最後顯示的數字。

參考資料