如何在 JavaScript 中編寫條件語句
這篇文章最初是為 DigitalOcean 寫的。
簡介
在編程中,很多情況下您會希望根據用戶輸入或其他因素運行不同的代碼塊。例如,如果每個字段都正確填寫,您可能希望提交表單,但如果缺少某些必填字段,您可能希望阻止該表單提交。為了完成這樣的任務,我們有條件語句 ,它們是所有編程語言的組成部分。條件語句根據 true
的結果執行特定操作 或 false
.
您可能會看到的幾個 JavaScript 條件語句示例:
- 檢查用戶的位置並根據國家/地區顯示正確的語言
- 在提交時發送表單,或在缺少必填字段旁邊顯示警告
- 在點擊事件時打開下拉菜單,如果下拉菜單已經打開,則關閉它
- 如果用戶超過法定飲酒年齡,則顯示酒類供應商的網站
- 顯示酒店的預訂表格,除非酒店已預訂
條件語句也稱為邏輯或決策。您可以將條件語句與“選擇自己的冒險”一書或流程圖進行比較。在本文中,我們將介紹常用於條件語句的邏輯運算符,以及 if
, else
, 和 else if
關鍵詞。我們還將介紹三元運算符。
邏輯運算符
在了解 if
之前 和 else
語句,了解邏輯運算符很重要 .有三個邏輯運算符通常與條件語句一起使用。這些運算符是 AND (&&
), 或 (||
),而不是 (!
)。
下表匯總了邏輯運算符。
|運算符 |語法 |說明 || -------- | ------ | ------------------------------------------------------ | --- | ------------------------------------------ ||和 | &&
|返回 true
如果兩個操作數都是 true
||或 | | |
|返回 true
如果任一操作數是 true
||不是 | !
|返回 true
如果操作數是 false
|
AND
AND 運算符由兩個 &符號 (&&
) 並將返回 true
如果左邊和右邊的操作數是兩個。我們可以檢查某樣東西是不是既高品質又低價格。
// High quality and low price are true
const highQuality = true
const lowPrice = true
highQuality && lowPrice
true
由於兩個變量都為真,括號內的 AND 運算返回真。
OR
OR 運算符由兩個管道(||
) 並將返回 true
如果其中一個操作數為真。在這裡,我們將檢查是否有 highQuality
或 lowPrice
.
// Only low price is true
const highQuality = false
const lowPrice = true
highQuality && lowPrice
true
由於兩個條件之一(highQuality
或 lowPrice
) 是 true
,整個操作返回true
.
不是
NOT 運算符由感嘆號 (!
) 如果操作數是 false
則返回 true .
const highQuality = true
!highQuality
false
在上面的語句中,highQuality
是 true
.使用 NOT 運算符,我們檢查是否 hiqhQuality
是 false
.如果是 false
,輸出將返回 true
,但因為它是 true
,輸出返回 false
.
NOT 運算符起初有點難以理解。要記住的重要部分是 NOT 檢查某事是否為 false
.
if 語句
最基本的條件語句是 if
陳述。一個 if
語句將評估語句是否為 true
或 false
,並且僅在語句返回 true
時運行 .在 false
的情況下,代碼塊將被忽略 結果,程序將跳到下一節。
一個 if
語句用 if
編寫 關鍵字,後跟括號中的條件,要執行的代碼在大括號之間。總之,可以寫成if () {}
.
這是對基本 if
的更長檢查 聲明。
if (condition) {
// code that will execute if condition is true
}
if
的內容 語句是縮進的,包含要運行的代碼塊的大括號不以分號結尾,就像函數塊一樣。
例如,我們可以假裝我們有一個購物應用程序。您已將一定數量的資金存入您的帳戶,並且您想從商店購買商品。
// Set balance and price of item
const balance = 500
const jeans = 40
// Check if there is enough funds to purchase item
if (jeans <= balance) {
console.log('You have enough money to purchase the item!')
}
You have enough money to purchase the item!
我們的帳戶餘額為 500
,並想為 40
買一條牛仔褲 .使用小於或等於運算符,我們可以檢查牛仔褲的價格是否小於或等於我們擁有的資金量。自 jeans <= balance
計算結果為 true
,條件將通過,代碼塊將運行。
在一個新示例中,我們將創建一個價格高於可用餘額的新商店商品。
// Set balance and price of item
const balance = 500
const phone = 600
// Check if there is enough funds to purchase item
if (phone <= balance) {
console.log('You have enough money to purchase the item!')
}
這個例子沒有輸出,因為 phone <= balance
評估為假。代碼塊將被簡單地忽略,程序將繼續下一行。
else 聲明
使用 if
語句,我們只在語句評估為真時執行代碼,但如果條件失敗,我們通常會希望發生其他事情。例如,如果表單未正確提交,我們可能希望顯示一條消息,告訴用戶哪些字段填寫正確。在這種情況下,我們將使用 else
語句,即原條件不成立時執行的代碼。
else
語句寫在 if
之後 語句,並且它在括號中沒有條件。這是基本 if...else
的語法 聲明。
if (condition) {
// code that will execute if condition is true
} else {
// code that will execute if condition is false
}
使用與上面相同的示例,如果帳戶中的資金過少,我們可以添加一條消息來顯示。
// Set balance and price of item
const balance = 500
const phone = 600
// Check if there is enough funds to purchase item
if (phone <= balance) {
console.log('You have enough money to purchase the item!')
} else {
console.log(
'You do not have enough money in your account to purchase this item.'
)
}
You do not have enough money in your account to purchase this item.
自if
條件不成功,代碼繼續執行 else
中的內容 陳述。這對於顯示警告或讓用戶知道要採取什麼行動繼續前進非常有用。通常成功和失敗都需要一個動作,所以 if...else
比單獨的 if
更常見 聲明。
else if 語句
使用 if
和 else
,我們可以根據條件是否為 true
運行代碼塊 或 false
.但是,有時我們可能有多個可能的條件和輸出,並且需要的不僅僅是兩個選項。一種方法是使用 else if
語句,它可以評估兩個以上的可能結果。
這是包含 if
的代碼塊的基本示例 語句,多個 else if
語句和一個 else
在沒有條件評估為 true
的情況下聲明 .
if (condition a) {
// code that will execute if condition a is true
} else if (condition b) {
// code that will execute if condition b is true
} else if (condition c) {
// code that will execute if condition c is true
} else {
// code that will execute if condition is false
}
JavaScript 會嘗試按順序運行所有語句,如果沒有一個成功,則默認為 else
堵塞。您可以擁有盡可能多的 else if
必要時的聲明。在很多else if
的情況下 語句,switch
語句可能是首選的可讀性。閱讀關於開啟 Mozilla 開發者網絡的信息。
以多個else if
為例 語句,我們可以創建一個簡單的評分應用程序,它將根據 100
的分數輸出一個字母等級 .
這個應用程序的要求如下:
- 90 分及以上為 A
- 80 到 89 分是 B
- 70 到 79 分是 C
- 60 到 69 分是 D
- 59 分或以下為 F
下面我們將創建一組簡單的if
, else
, 和 else if
陳述,並根據給定的成績對其進行測試。
// Set the current grade of the student
let grade = 87
// Check if it is an A, B, C, D, or failing grade
if (grade >= 90) {
console.log('A')
} else if (grade >= 80) {
console.log('B')
} else if (grade >= 70) {
console.log('C')
} else if (grade >= 60) {
console.log('D')
} else {
console.log('F')
}
B
在我們的示例中,我們首先檢查最高分數,該分數將大於或等於 90
.之後,else if
語句將檢查大於 80
, 70
, 和 60
直到達到默認的 else
成績不及格。
雖然我們的 grade
87
的值 C
在技術上也是如此 , D
和 F
,語句將在第一個成功的語句處停止。因此,我們得到 B
的輸出 ,這是第一個匹配項。
三元運算符
三元運算符 ,也稱為條件運算符,用作 if...else
的簡寫 聲明。
三元運算符是用問號的語法編寫的(?
) 後跟一個冒號 (:
),如下所示。
(condition) ? expression on true : expression on false
在上面的語句中,條件是先寫的,然後是一個?
.第一個表達式將在 true
上執行 ,第二個表達式將在 false 時執行。它與 if...else
非常相似 語句,語法更簡潔。
在本例中,我們將創建一個程序來檢查用戶是否為 21
或更老。如果是,它將打印 "You may enter"
到控制台。如果不是,它將打印 "Sorry, you are not old enough to enter."
到控制台。
// Set age of user
let age = 20
// Place result of ternary operation in a variable
const oldEnough =
age >= 21 ? 'You may enter.' : 'Sorry, you are not old enough to enter.'
// Print output
oldEnough
'Sorry, you are not old enough to enter.'
自 age
的用戶小於 21
,失敗消息被輸出到控制台。 if...else
相當於這將是 "You may enter."
在 if
語句和 "Sorry, you are not old enough to enter."
在 else
聲明。
要了解更多信息,請閱讀有關三元運算符的文檔。
結論
條件語句為我們提供了可以用來控製程序輸出的邏輯。它們是編程的基本組成部分之一,幾乎可以在所有編程語言中找到。
在本文中,我們了解了邏輯運算符,這是條件語句中經常使用的運算符,以及如何使用 if
, else
, 和 else if
關鍵詞。最後,我們介紹了嵌套和三元運算符的使用。要更深入地了解條件語句,請閱讀 Mozilla 開發者網絡上的 if...else。