JavaScript – 運算子（Operators）

主題：三元運算子（Ternary Operator）

---

簡介

在 JavaScript 中，三元運算子（又稱條件運算子）是唯一一個需要三個運算元的運算子，語法為 condition ? expr1 : expr2。它可以在單行內完成「條件判斷 → 取值」的流程，讓程式碼更簡潔、可讀性更高。對於需要根據布林結果快速決定值的情境（例如 UI 顯示、資料預處理、設定預設值），三元運算子是不可或缺的工具。

雖然看起來只是一行簡短的表達式，但正確使用它能大幅減少冗長的 if…else 結構，提升開發效率；相反地，濫用或寫得過於複雜則會降低程式的可維護性。因此，了解它的語法特性、適用範圍以及常見陷阱，是每位 JavaScript 開發者必備的基礎功。

---

核心概念

1. 基本語法

// condition: 任意會回傳 true 或 false 的表達式
// expr1:   condition 為 true 時回傳的值或執行的程式碼
// expr2:   condition 為 false 時回傳的值或執行的程式碼
let result = condition ? expr1 : expr2;

• condition 會先被求值，若結果為 true（或 truthy），整個運算式的值為 expr1；否則為 expr2。
• expr1、expr2 可以是任何合法的 JavaScript 表達式，甚至是另一個三元運算子，形成巢狀的寫法。

2. 取代簡單的 if…else

// if…else 版
let status;
if (score >= 60) {
  status = '合格';
} else {
  status = '不合格';
}

// 三元運算子版
let status = score >= 60 ? '合格' : '不合格';

重點：當只有「條件 → 兩種結果」的情況時，使用三元運算子可以讓程式碼在同一行完成，提升可讀性。

3. 巢狀（Nested）三元運算子

// 判斷分數等級
let grade = score >= 90 ? 'A' :
            score >= 80 ? 'B' :
            score >= 70 ? 'C' :
            score >= 60 ? 'D' : 'F';

提示：巢狀寫法適合簡短的多段判斷；若條件變多或邏輯變複雜，建議改用 switch 或函式抽離。

4. 用於函式回傳值

function getDiscount(isMember) {
  // 會員 8 折，非會員原價
  return isMember ? 0.8 : 1.0;
}

5. 結合解構賦值（Destructuring）

// 依據環境切換 API 路徑
const ENV = process.env.NODE_ENV; // 'development' | 'production'

const { apiUrl } = {
  apiUrl: ENV === 'production' ? 'https://api.example.com' : 'http://localhost:3000'
};

console.log(apiUrl);

---

程式碼範例

以下提供 5 個實用範例，示範三元運算子在日常開發中的多樣應用。

範例 1：UI 顯示 – 按鈕文字切換

function renderButton(isLoggedIn) {
  // 若已登入，顯示「登出」；否則顯示「登入」
  const label = isLoggedIn ? '登出' : '登入';
  return `<button>${label}</button>`;
}

// 測試
console.log(renderButton(true));   // <button>登出</button>
console.log(renderButton(false));  // <button>登入</button>

範例 2：預設值設定（Default Value）

function greet(name) {
  // name 為 undefined、null、空字串時使用預設值「朋友」
  const displayName = name ? name : '朋友';
  console.log(`哈囉，${displayName}！`);
}

greet('小明');   // 哈囉，小明！
greet('');       // 哈囉，朋友！
greet(undefined); // 哈囉，朋友！

也可以使用 nullish 合併運算子 ??，但在只能接受 null 或 undefined 時更安全。

範例 3：計算折扣金額

function calculatePrice(price, isHoliday) {
  // 假日 7 折，平日原價
  const finalPrice = price * (isHoliday ? 0.7 : 1);
  return finalPrice.toFixed(2);
}

console.log(calculatePrice(1200, true));   // 840.00
console.log(calculatePrice(1200, false));  // 1200.00

範例 4：巢狀三元運算子 – 判斷使用者權限

function getAccessLevel(role) {
  // role: 'admin' | 'editor' | 'viewer' | 'guest'
  return role === 'admin' ? '全部權限' :
         role === 'editor' ? '編輯權限' :
         role === 'viewer' ? '觀看權限' : '僅限訪客';
}

console.log(getAccessLevel('editor')); // 編輯權限
console.log(getAccessLevel('guest'));  // 僅限訪客

範例 5：在 JSX 中使用（React 範例）

function StatusBadge({ online }) {
  // 若 online 為 true，顯示綠色「Online」；否則顯示灰色「Offline」
  return (
    <span style={{
      color: online ? 'green' : 'gray',
      fontWeight: 'bold'
    }}>
      {online ? 'Online' : 'Offline'}
    </span>
  );
}

在 UI 框架（如 React、Vue）裡，三元運算子是條件渲染的首選寫法，能讓 JSX/Template 保持簡潔。

---

常見陷阱與最佳實踐

陷阱	說明	解決方式
過度巢狀	三層以上的巢狀會讓程式碼難以閱讀。	使用 if…else、switch 或抽離成小函式。
誤用「賦值」	a = b ? c : d 與 a == b ? c : d 常被寫錯。	確認條件是比較或布林運算，而非賦值。
忽略「truthy / falsy」	0、''、null、undefined、NaN 皆為 falsy，可能導致意外結果。	若只想排除 null/undefined，使用 ?? 或 !== null && !== undefined。
在語句（Statement）中使用	三元運算子返回值，不能直接當作語句使用（如 if (condition) ? doA() : doB();）。	改寫為 condition ? doA() : doB();（不加 if）或使用 if…else。
副作用（Side Effects）	在 expr1、expr2 中執行函式或改變變數，可能讓程式流程不易追蹤。	儘量讓三元運算子只返回值，副作用交給獨立程式碼塊。

最佳實踐：

1. 保持單行簡潔：若表達式超過 80~100 個字元，考慮斷行或改寫。
2. 避免在同一行寫太多邏輯：例如 a ? b() : c(), d ? e() : f(); 會讓人難以判斷執行順序。
3. 使用括號提升可讀性：在巢狀或與其他運算子混用時，適當加上 ()。
4. 善用註解：雖然三元運算子簡潔，仍建議在複雜條件前加上說明。
5. 配合 lint 規則：如 ESLint 的 no-nested-ternary，可自動提醒過度巢狀。

---

實際應用場景

1. 表單驗證訊息

   const errorMsg = isEmailValid ? '' : '請輸入有效的 Email';
   

   只要驗證結果是布林值，就能直接在 UI 中呈現錯誤訊息或隱藏它。

2. 動態樣式切換
   在 CSS‑in‑JS 或 Tailwind 中，根據狀態切換類別：

   const btnClass = isPrimary ? 'bg-blue-500' : 'bg-gray-300';
   

3. API 請求 URL
   根據環境或使用者角色決定 endpoint：

   const endpoint = isAdmin ? '/api/admin/data' : '/api/user/data';
   

4. 多語系文字切換

   const greeting = locale === 'zh-TW' ? '您好' : locale === 'en' ? 'Hello' : 'こんにちは';
   

5. React 中的條件渲染

   {isLoading ? <Spinner /> : <Content />}
   

   只要 isLoading 為 true，就顯示 loading 圖示；否則渲染主要內容。

---

總結

• 三元運算子 是 JavaScript 中唯一的三元運算子，提供「條件 → 兩個結果」的簡潔寫法。
• 它適合用於單行判斷、回傳值、快速切換 UI、設定預設值等情境，能有效減少 if…else 的冗長。
• 使用時需注意：避免過度巢狀、誤用賦值、忽略 falsy 值的特性，以及不要在表達式內加入過多副作用。
• 最佳實踐包括保持單行簡潔、適當加括號、使用註解說明條件、結合 lint 工具避免錯誤寫法。

掌握三元運算子的語法與限制，配合實務需求，就能寫出 更簡潔、可讀且易於維護 的 JavaScript 程式碼。祝你在開發過程中玩得開心，寫出乾淨的程式！