初學者指南：JavaScript 三元運算子

更新日期： 2024 年 10 月 16 日

在學習 JavaScript 的過程中，你可能經常會遇到需要根據某些條件，來選擇不同結果的情況。

三元運算子是一種簡單而高效的條件判斷方式，它能夠幫助你以更精煉的語法寫出判斷邏輯。

這篇文章將帶你了解 JavaScript 的三元運算子及其應用，幫助你掌握這個強大工具，讓代碼更簡潔易讀。

什麼是三元運算子？

三元運算子（Ternary Operator） 是 JavaScript 中用於條件判斷的一種語法結構。

它是一個運算符，可以根據條件表達式的結果，來選擇兩個不同的值。

三元運算子通常用於取代簡單的 if...else 語句，使代碼更精簡。

基本語法

condition ? expr1 : expr2;

• condition：這是一個條件表達式，會返回 true 或 false。
• expr1：當 condition 為 true 時要執行的表達式或值。
• expr2：當 condition 為 false 時要執行的表達式或值。

例子

以下是一個三元運算子的例子：

let age = 18;
let canVote = age >= 18 ? '可以投票' : '不能投票';
console.log(canVote); // 輸出：可以投票

在這個例子中，age >= 18 是條件，如果這個條件為真（true），變量 canVote 的值將是 '可以投票'，否則它的值將是 '不能投票'。

這行代碼的功能類似於下面的 if...else 語句：

let canVote;
if (age >= 18) {
  canVote = '可以投票';
} else {
  canVote = '不能投票';
}

三元運算子讓代碼顯得更加簡潔明瞭，尤其適合於簡單的條件判斷。

三元運算子的應用場景

簡化 if...else 語句

三元運算子通常用於簡化，需要根據條件選擇不同結果的語句。

特別是在條件判斷簡單且僅有一個表達式時，使用三元運算子能讓代碼看起來更精煉。

在 JSX 中使用三元運算子

在 React 中，三元運算子常用於 JSX 中的條件渲染。例如，根據某個狀態來顯示不同的 UI 元素：

return (
  <div>
    {isLoggedIn ? <h1>歡迎回來！</h1> : <h1>請登入</h1>}
  </div>
);

這樣可以根據 isLoggedIn 的值來選擇顯示「歡迎回來！」或「請登入」。

變量的初始化

當需要根據條件來初始化變量時，三元運算子也是很好的選擇。例如：

let discount = isMember ? 0.1 : 0;

這行代碼表示，如果 isMember 為 true，那麼折扣為 10%；否則，折扣為 0。

使用三元運算子的注意事項

雖然三元運算子很方便，但過度使用三元運算子可能會使代碼難以閱讀。

當條件判斷變得複雜或需要多重嵌套時，應該考慮使用 if...else 來保持代碼的可讀性。

例子：避免過度嵌套的三元運算子

// 這樣的多層三元運算子代碼可能很難閱讀
let result = condition1 ? (condition2 ? 'A' : 'B') : (condition3 ? 'C' : 'D');

上面的代碼有多層嵌套，難以一眼看懂它的邏輯。在這種情況下，使用 if...else 語句可以讓代碼更清晰明瞭。

結論

三元運算子是一種用於條件判斷的便捷工具，它能夠幫助你在簡單的判斷中使代碼更加簡潔。

對於簡單的條件表達式，使用三元運算子可以讓代碼更加直觀和精煉。

然而，當判斷變得複雜時，還是建議使用 if...else 來保持代碼的可讀性。

希望這篇文章能幫助你理解並掌握 JavaScript 中的三元運算子，讓你在寫代碼時更加靈活。

如果還有其他問題，隨時告訴我，我們可以一起學習更多的 JavaScript 知識！