如何在 JavaScript 中使用三元運算子

語言: CN / TW / HK

theme: fancy

持續創作,加速成長!這是我參與「掘金日新計劃 · 10 月更文挑戰」的第15天,點選檢視活動詳情

在本教程中,我們將探討 JavaScript 中三元運算子的語法及其一些常見用法。

三元運算子(也稱為條件運算子)可用於執行內聯條件檢查,而不是使用if...else語句。它使程式碼更短,更易讀。它可用於根據條件為變數賦值,或根據條件執行表示式。

語法

三元運算子接受三個運算元;它是JavaScript中唯一能做到這一點的運算子。您提供一個要測試的條件,後跟一個問號,然後是兩個用冒號分隔的表示式。如果條件被認為為真,則執行第一個表示式;如果它被認為是假的,則執行最終的表示式。

它以以下格式使用:

JavaScript condition ? expr1 : expr2

這裡,condition是要測試的條件。如果其值被認為是trueexpr1則執行。否則,如果其值被認為是falseexpr2則執行。

expr1並且expr2是任何一種表達方式。它們可以是變數、函式呼叫,甚至是其他條件。

例如:

JavaScript 1 > 2 ? console.log("true") : console.log('false');

使用三元運算子進行賦值

三元運算子最常見的用例之一是決定將哪個值分配給變數。通常,一個變數的值可能取決於另一個變數或條件的值。

雖然這可以使用if...else語句來完成,但它會使程式碼更長且可讀性更低。例如:

```JavaScript const numbers = [1,2,3]; let message; if (numbers.length > 2) { message = '陣列太長'; } else { message = '陣列太短'; }

console.log(message); // 陣列太長 ```

在此程式碼示例中,您首先定義變數message。然後,您使用該if...else語句來確定變數的值。

這可以使用三元運算子在一行中簡單地完成:

```JavaScript const numbers = [1,2,3]; let message = numbers.length > 2 ? '陣列太長' : '陣列太短';

console.log(message); // 陣列太長 ```

使用三元運算子執行表示式

三元運算子可用於執行任何型別的表示式。

例如,如果您想根據變數的值決定執行哪個函式,您可以使用以下if...else語句執行此操作:

JavaScript if (feedback === "yes") { sayThankYou(); } else { saySorry(); }

這可以使用三元運算子在一行中完成:

JavaScript feedback === "yes" ? sayThankYou() : saySorry();

如果feedback具有 value yes,則將sayThankYou呼叫並執行該函式。否則,該saySorry函式將被呼叫並執行。

使用三元運算子進行空檢查

在許多情況下,您可能正在處理可能有也可能沒有定義值的變數——例如,從使用者輸入檢索結果時,或從伺服器檢索資料時。

使用三元運算子,您可以通過在條件運算元的位置傳遞變數名稱來檢查變數是否存在nullundefined

這在變數是物件時特別有用。如果您嘗試訪問實際上是nullor的物件上的屬性undefined,則會發生錯誤。首先檢查物件是否實際設定可以幫助您避免錯誤。

例如:

```JavaScript let book = { name: '小明', works: '鬥破蒼穹' }; console.log(book ? book.name : '張三'); // "小明"

book = null; console.log(book ? book.name : '張三'); // "張三" ```

在此程式碼塊的第一部分,book是一個具有兩個屬性的物件 -nameworks在上使用三元運算子時book,它會檢查它是否不是nullor undefined。如果不是——意味著它有一個值——name則訪問該屬性並將輸出控制檯。否則,如果它為空,張三輸出控制檯。

因為bookis not null,所以書名會記錄在控制檯中。但是,在第二部分中,當應用相同的條件時,三元運算子中的條件將失敗,因為bookis null。因此,“張三”輸出控制檯。

巢狀條件

儘管三元運算子是內聯使用的,但可以將多個條件用作三元運算子表示式的一部分。您可以巢狀或連結多個條件來執行類似於if...else if...else語句的條件檢查。

例如,一個變數的值可能取決於多個條件。它可以使用if...else if...else

```JavaScript let score = '67'; let grade; if (score < 50) { grade = 'F'; } else if (score < 70) { grade = 'D' } else if (score < 80) { grade = 'C' } else if (score < 90) { grade = 'B' } else { grade = 'A' }

console.log(grade); // "D" ```

在此程式碼塊中,您測試變數的多個條件score以確定變數的字母等級。

可以使用三元運算子執行這些相同的條件,如下所示:

```JavaScript let score = '67'; let grade = score < 50 ? 'F' : score < 70 ? 'D' : score < 80 ? 'C' : score < 90 ? 'B' : 'A';

console.log(grade); // "D" ```

評估第一個條件,即score < 50。如果是true,那麼 的grade值為F。如果是false,則計算第二個表示式,即score < 70

這一直持續到所有條件都為false,這意味著等級的值將為A,或者直到其中一個條件被評估為true並且其真實值被分配給grade

示例

在這個實時示例中,您可以測試三元運算子如何在更多條件下工作。 如果您輸入的值小於 100,則會顯示“太低”訊息。如果您輸入的值大於 100,則會顯示訊息“太高”。如果輸入 100,將顯示“完美”訊息。

程式碼片段

結論

正如本教程中的示例所解釋的,JavaScript 中的三元運算子有很多用例。if...else在許多情況下,三元運算子可以通過替換冗長的語句來增加程式碼的可讀性。

相關閱讀