JavaScript - if...else 語句

JavaScript 的if...else語句在指定條件為真時執行一段程式碼。當條件為假時，將執行else程式碼塊。if-else語句可用於根據不同條件控制程式的執行流程。

編寫程式時，您可能需要在一組給定的路徑中選擇一條。在這種情況下，您需要使用條件語句，使您的程式能夠做出正確的決策並執行正確的操作。

JavaScript 支援條件語句，用於根據不同的條件執行不同的操作。這裡我們將解釋if...else語句。

if-else流程圖

下圖顯示了if-else語句的工作方式。

JavaScript 支援以下幾種形式的if...else語句：

if 語句
if...else 語句
if...else if...語句。

JavaScript if 語句

if語句是基本的控制語句，允許JavaScript根據條件執行語句。

語法

基本if語句的語法如下：

if (expression) {
   Statement(s) to be executed if expression is true
}

這裡評估一個JavaScript表示式。如果結果值為真，則執行給定的語句。如果表示式為假，則不執行任何語句。大多數情況下，您會在決策時使用比較運算子。

示例

嘗試以下示例以瞭解if語句的工作方式。

<html>
<body>     
   <div id ='output'> </div>
   <script type = "text/javascript">
      let result;
      let age = 20;
      if( age > 18 ) {
         result = "Qualifies for driving";
      }
	  document.getElementById("output").innerHTML = result;
   </script>      
<p> Set the variable to a different value and then try... </p>
</body>
</html>

輸出

Qualifies for driving
Set the variable to different value and then try...

JavaScript if...else 語句

'if...else'語句是另一種控制語句，允許JavaScript以更受控的方式執行語句。

語法

if (expression) {
   Statement(s) to be executed if expression is true
} else {
   Statement(s) to be executed if expression is false
}

這裡評估JavaScript表示式。如果結果值為真，則執行‘if’塊中的給定語句。如果表示式為假，則執行else塊中的給定語句。

示例

嘗試以下程式碼來學習如何在JavaScript中實現if-else語句。

<html>
<body>
   <div id ='output'> </div>
   <script type = "text/javascript">
	  let result;
      let age = 15;
      if( age > 18 ) {
         result = "Qualifies for driving";
      } else {
         result = "Does not qualify for driving";
      }
      document.getElementById("output").innerHTML = result;
   </script>     
   <p> Set the variable to a different value and then try... </p>
</body>
</html>

輸出

Does not qualify for driving
Set the variable to different value and then try...

JavaScript if...else if...語句

if...else if...語句（也稱為if...else階梯）是if…else的更高階形式，允許JavaScript從多個條件中做出正確的決策。

語法

if-else-if語句的語法如下：

if (expression 1) {
   Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
   Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
   Statement(s) to be executed if expression 3 is true
} else {
   Statement(s) to be executed if no expression is true
}

這段程式碼沒有什麼特別的。它只是一系列的if語句，每個if語句都是前面語句else子句的一部分。根據真值條件執行語句，如果所有條件都不成立，則執行else塊。

示例

嘗試以下程式碼，學習如何在JavaScript中實現if-else-if語句。

<html>
<body>
   <div id ="demo"></div>
   <script type="text/javascript">
	  const output = document.getElementById("demo")
      let book = "maths";
      if (book == "history") {
         output.innerHTML="<b>History Book</b>";
      } else if (book == "maths") {
         output.innerHTML="<b>Maths Book</b>";
      } else if (book == "economics") {
         output.innerHTML="<b>Economics Book</b>";
      } else {
         output.innerHTML="<b>Unknown Book</b>";
      }
    </script>
    <p> Set the variable to a different value and then try... </p>
</body>
<html>

輸出

Maths Book
Set the variable to different value and then try...

列印頁面