JavaScript -條件運算符

你好，未來的JavaScript魔法師們！今天，我們將要深入探索條件運算符的神奇世界。別擔心如果你之前從未寫過一行代碼——我將成為你這次刺激旅程中的友好導遊。所以，拿起你的虛擬魔杖（鍵盤），讓我們施展一些條件咒語吧！

條件運算符是什麼？

想像你是一個交通燈。你的工作是決定車輛應該前行還是停止。這正是JavaScript中的條件運算符所做的——它們幫助我們的程序根據某些條件來做出決定。

三元運算符：條件運算符的瑞士軍刀

我們今天的主角是三元運算符。它就像一個緊湊且超高效的if-else語句。讓我們來分解它：

條件 ? 為真的表達式 : 為假的表達式

這就像我們在提一個問題：

• 如果答案是是（為真），做第一件事。
• 如果答案是不是（為假），做第二件事。

語法：條件魔法的配方

讓我們來看看我們條件藥水的成分：

1. 條件：這是我們的問題。天在下雨嗎？用戶登錄了嗎？這個數字是偶數嗎？
2. ?：這就像在說"然後..."
3. 為真的表達式：如果條件為真要做的事情
4. :：這就像在說"否則..."
5. 為假的表達式：如果條件為假要做的事情

示例 1：天氣決定器

讓我們從一個簡單的例子開始。我們將創建一個程序，根據天氣來決定是否帶傘。

let isRaining = true;
let decision = isRaining ? "帶傘" : "把傘留在家里";
console.log(decision);

如果你運行這段代碼，它將輸出："帶傘"

讓我們分解一下：

• isRaining是我們的條件。它被設置為true。
• 如果在下雨（isRaining為真），我們的表達式返回"帶傘"。
• 如果不下雨，它會返回"把傘留在家里"。
• 我們將這個結果存儲在decision變量中。

嘗試將isRaining改為false並看看會發生什麼！

示例 2：年齡檢查器

現在，讓我們創建一個程序來檢查某人是否有資格投票。

let age = 20;
let canVote = age >= 18 ? "是的，你可以投票！" : "對不起，你年紀太小，無法投票。";
console.log(canVote);

這將輸出："是的，你可以投票！"

這裡發生了什麼：

• 我們將age設為20。
• 我們的條件是age >= 18（年齡是否大於或等於18）。
• 如果為真，我們返回"是的，你可以投票！"。
• 如果為假，我們返回"對不起，你年紀太小，無法投票。"。

嘗試將年齡改為16並看看輸出如何變化！

示例 3：成績分配器

讓我們來得稍微複雜一些。我們將創建一個程序，根據分數來分配成績。

let score = 85;
let grade = score >= 90 ? 'A' :
score >= 80 ? 'B' :
score >= 70 ? 'C' :
score >= 60 ? 'D' : 'F';
console.log(`你的成績是: ${grade}`);

這將輸出："你的成績是: B"

哇，這看起來不一樣！我們其實是將多個三元運算符串聯在一起。這就像一個決策的水流：

• 首先檢查分數是否達到90或以上。如果是，那就是'A'。
• 如果不是，我們檢查是否達到80或以上。如果是，那就是'B'。
• 這樣一直檢查到'F'，對於60以下的分數。

這是一種強大的技巧，但請謹慎使用——太多的串聯可能會使代碼變得難以閱讀！

處理null值：空值合并運算符

有時候，我們需要處理可能為null或undefined的值。這時，空值合并運算符??就派上用場了：

let username = null;
let displayName = username ?? "訪客";
console.log(`歡迎，${displayName}！`);

這將輸出："歡迎，訪客！"

這是怎麼發生的：

• 如果username是null或undefined，我們使用"訪客"。
• 如果username有值，我們就用那個值。

這是一種在處理默認值時很方便的方法！

條件運算符速查表

這裡是我們學過的運算符的快速參考表：

運算符	名稱	用途
?:	三元運算符	根據條件在兩個值之間做決定
??	空值合并運算符	在處理null或undefined時提供默認值

記住，熟能生巧！嘗試創建你自己的例子並用這些運算符進行實驗。在你還未意識到之前，你將能夠在你的代碼中指揮一整個條件的樂團！

快樂編程，願你的條件總是如您所願（當您想要它們為真時）！

Credits: Image by storyset