JavaScript - try...catch

上一頁
下一頁

JavaScript try...catch 語句

JavaScript 中的try-catch 語句用於處理執行時錯誤（異常）。這在大多數程式語言中都很常見，用於處理異常。try-catch 語句只能處理執行時錯誤。try 塊後面必須緊跟一個 catch 塊或一個 finally 塊（或兩者都有）。

在try{} 語句中，您可以編寫可能出現錯誤或存在錯誤可能性的程式碼。您可以將常規 JavaScript 程式碼新增到 try{} 語句中。

catch{} 語句用於處理錯誤。當 try{} 語句的程式碼中發生任何錯誤時，JavaScript 執行引擎將執行 catch{} 語句的程式碼來處理這些錯誤。

如果 try{} 語句的程式碼中沒有發生任何錯誤，它將跳過 catch{} 語句的程式碼，並執行程式碼的下一行。

語法

您可以按照以下語法在程式碼中使用 try-catch 語句來處理異常。

try {
   // JavaScript code
} catch(error) {
   // Handle error
}

您可以在 catch{} 語句中列印錯誤物件或基於錯誤型別的自定義錯誤訊息以顯示錯誤。

引數

  • error − catch{} 語句將‘error’ 物件作為引數。它包含 name 和 message 屬性。但是，這是一個可選引數。

示例

在下面的程式碼中，我們在 try{} 語句中將‘num1’ 變數的值賦給‘num’ 變數。這裡，‘num1’ 變數未定義。因此，它將丟擲一個錯誤。

在 catch{} 語句中，我們列印 error 物件的‘name’ 和‘message’ 屬性的值。

在輸出中，您可以看到它丟擲一個引用錯誤，並帶有相應的錯誤訊息。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         let num = num1;
      } catch (err) {
         output.innerHTML += "The error name is: " + err.name + "<br>";
         output.innerHTML += "The error message is: " + err.message + ".<br>";
      }
   </script>
</body>
</html>

輸出

The error name is: ReferenceError
The error message is: num1 is not defined.

當 try{} 語句中發生任何錯誤時，它將跳過其餘程式碼的執行，並執行 catch{} 語句的程式碼。

讓我們透過下面的示例來了解它。

示例

在下面的程式碼中，我們呼叫 welcome() 函式，該函式未定義。因此，它將丟擲一個引用錯誤。

在 catch{} 語句中，我們處理錯誤。

在輸出中，您可以看到它列印了 try{} 語句的開始訊息、catch{} 語句的開始訊息和錯誤訊息。由於在該訊息之前發生了錯誤，因此它跳過了 try{} 語句的結束訊息。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         output.innerHTML += "In the start of try block <br>";
         welcome();
         output.innerHTML += "In the end of try block <br>";
      } catch (err) {
         output.innerHTML += "In the catch block <br>";
         output.innerHTML += "The error name is: " + err.name + "<br>";
         output.innerHTML += "The error message is: " + err.message + ".<br>";
      }
   </script>
</body>
</html>

輸出

In the start of try block
In the catch block
The error name is: ReferenceError
The error message is: welcomeis not defined.

注意 − try-catch 語句不允許您處理語法錯誤。它只能處理執行時錯誤。

例如，如果您執行以下程式碼。它將在瀏覽器的控制檯中顯示錯誤，但無法使用{}語句捕獲錯誤。

try {
   let num = ;
} catch (err) {
   // Error handling
}

JavaScript try…catch…finally 語句

finally{} 語句允許您在執行 try{} 和 catch{} 語句之後執行特定程式碼。

無論 try{} 語句中的程式碼是否發生錯誤，JavaScript 都會始終執行 finally{} 語句中的程式碼。如果發生錯誤，它將執行 catch{} 語句的程式碼，然後執行 finally{} 語句的程式碼。

示例

在下面的程式碼中，我們在 try{} 語句內將變數 'b' 的值賦給變數 'a'。這會引發錯誤。

在 catch{} 語句中，我們列印錯誤。

在 finally{} 語句中，它列印訊息。

您可以觀察到輸出結果：它首先執行 try{} 語句的程式碼，然後執行 catch{} 語句的程式碼，最後執行 finally{} 語句的程式碼。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         let a = b;
      } catch (e) {
         document.getElementById("output").innerHTML = e;
      }
      finally {
         document.getElementById("output").innerHTML += "<br>Finally block always executes";
      }
   </script>
</body>
</html>

輸出

ReferenceError: b is not defined
Finally block always executes

示例

在下面的示例中，我們在 try{} 語句中編寫了沒有任何錯誤的程式碼。

此外，我們還添加了 catch{} 和 finally{} 語句。

輸出顯示它執行 try{} 語句的程式碼，然後執行 finally{} 語句的程式碼。由於程式碼沒有錯誤，它跳過了 catch{} 語句的執行。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         let a = 10;
         output.innerHTML = "Value of a is " + a + "<br>";
      } catch (e) {
         output.innerHTML = e.name + " : " + e.message;
      }
      finally {
         output.innerHTML += "Inside the finally block.";
      }
   </script>
</body>
</html>

輸出

Value of a is 10
Inside the finally block.

JavaScript throw 語句

當代碼中發生任何錯誤時，JavaScript 會預設丟擲錯誤。但是您也可以手動丟擲錯誤。例如，您正在執行表單資料驗證。如果資料無效，您可以丟擲錯誤並要求使用者更正資料。

當您使用 'throw' 語句丟擲錯誤時，try{} 語句中之後存在的程式碼將不會執行，它將執行 catch{} 語句的程式碼。

您可以按照以下語法使用 'throw' 語句丟擲錯誤。

throw <error>;

在上述語法中，<error> 可以是 'Error' 物件、字串、數字、原始值或特定型別的錯誤物件。最好丟擲 Error 物件，而不是丟擲原始值。

示例：丟擲 Error 物件

在下面的程式碼中，我們使用 'throw' 語句從 try{} 語句丟擲一個 Error 物件。它停止執行 'throw' 語句的其餘程式碼，並執行 catch{} 語句的程式碼。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         output.innerHTML += "Start of the try block. <br />";
         throw new Error("Custom error");
         output.innerHTML += "End of the try block. <br />"; //not executed
      } catch (e) {
         output.innerHTML += "Catch block: Caught exception. <br />";
         output.innerHTML += e.name + " : " + e.message;
      }
   </script>
</body>
</html>

輸出

Start of the try block
Catch block: Caught exception.
Error: Custom error

示例：丟擲原始值

在下面的程式碼中，我們從 try{} 語句丟擲原始數值。在 catch{} 語句中，我們獲取丟擲的原始值並列印它。

<html>
<body>
   <div id = "output">The error message is:  </div>
   <script>
      try {
         throw 20;
      } catch (e) {
         document.getElementById("output").innerHTML += e;
      }
   </script>
</body>
</html>

輸出

The error message is: 20

示例：輸入驗證示例

在下面的程式碼中，我們定義了數字型別的 <input> 元素來獲取使用者年齡作為輸入。

當用戶點選提交年齡按鈕時，它將呼叫 handleAge() 函式。handleAge() 函式檢查年齡是否小於 18。如果是，則丟擲 rangeError。

catch{} 語句列印錯誤訊息以驗證年齡。

<html>
<body>
   <p>Age: <input type = "number" id = "age" value = "20"></p>
   <button onclick = "handleAge()"> Submit Age </button>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function handleAge() {
         let age = document.getElementById("age").value;
         try {
            if (age < 18) {
               throw RangeError("You are not eligible to vote");
            } else {
               output.innerHTML += "<br>You are eligible to vote";
            }
         } catch (e) {
            output.innerHTML += "<br>The error is - " + e;
         }
      }
   </script>
</body>
</html>

輸出

Age: 20
Submit Age
The error is - RangeError: You are not eligible to vote

巢狀 Try 塊

有時，開發人員需要編寫巢狀的 try-catch 語句。巢狀 try-catch 指的是 try 塊內巢狀 try 塊。

如果內部 catch{} 語句無法處理錯誤，則外部 catch{} 語句可能會處理它。您也可以跳過內部 catch{} 語句，但在這種情況下，您需要使用 try{} 語句編寫 finally{} 語句。

示例

我們在下面的程式碼中使用了兩個巢狀的 try{} 語句。我們在外部 try{} 語句中添加了 try-finally 語句。

內部 try{} 語句丟擲錯誤，由外部 catch{} 語句處理。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         try {
            throw Error("Error in the inner try block");
         } finally {
            output.innerHTML += "Inside the inner finally block. <br>";
         }
      } catch (e) {
         output.innerHTML += "Inside the outer catch block. <br>";
         output.innerHTML += "Error: " + e.message;
      }
   </script>
</body>
</html>

輸出

Inside the inner finally block.
Inside the outer catch block.
Error: Error in the inner try block

重新丟擲錯誤

有時，catch{} 語句可能無法處理錯誤。在這種情況下，您可以使用 'throw' 語句從 catch 塊重新丟擲錯誤。

如果可用，外部 catch{} 語句可以處理重新丟擲的錯誤。

示例

在下面的程式碼中，我們建立了兩個巢狀的 try-catch 塊。在內部 try 塊中，我們使用 'throw' 語句丟擲錯誤。內部 catch{} 語句將捕獲錯誤，然後我們從內部 catch{} 語句重新丟擲錯誤。

之後，我們在外部 catch{} 語句中處理錯誤。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      let output = document.getElementById("demo");
      try {
         try {
            throw 20;
         } catch (e) {
            // Rethrowing the error.
            output.innerHTML = "Inside the inner catch block. <br>";
            output.innerHTML += "Error: " + e + "<br> <br>";
            throw e;
         }
      } catch (e) {
         output.innerHTML += "Inside the outer catch block. <br>";
         output.innerHTML += "Error: " + e;
      }
   </script>
</body>
</html>

輸出

inside the inner catch block.
Error: 20

Inside the outer catch block.
Error: 20

條件 Catch 塊

在 catch{} 塊中，您可以使用 if-else 語句有條件地處理錯誤。這樣，您可以對多個 try{} 語句使用單個 catch{} 語句。

在 catch{} 語句中，您可以使用 'instanceOf' 運算子檢查錯誤的型別，並根據錯誤型別處理錯誤。

示例

在下面的程式碼中，我們在 try{} 語句中呼叫了 welcome 函式，但未定義 welcome() 函式。

在 catch{} 語句中，我們使用 'instanceOf' 運算子檢查錯誤的型別，並根據錯誤型別在網頁上列印訊息。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         welcome(); // Function not defined
      } catch (e) {
         if (e instanceof ReferenceError) {
            output.innerHTML = "Reference error is occurred.";
         } else if (e instanceof TypeError) {
            output.innerHTML = "Type error is occurred.";
         } else if (e instanceof RangeError) {
            output.innerHTML = "Range error is occurred.";
         } else if (e instanceof SyntaxError) {
            output.innerHTML = "Syntax error is occurred.";
         } else {
            output.innerHTML = "Error is occurred.";
         }
      }
   </script>
</body>
</html>

輸出

Reference error is occurred.

JavaScript try...catch 與 setTimeout() 方法

使用 try-catch 語句處理非同步 JavaScript 程式碼不會捕獲從 try 塊丟擲的錯誤。

原因是 JavaScript 在所有主執行緒程式碼執行完畢後才執行非同步程式碼。

讓我們透過下面的示例來了解它。

示例

在下面的程式碼中，我們在 try{} 語句中使用了 setTimeOut() 方法。它在 1000 毫秒後執行回撥函式。在回撥函式中，我們使用 'throw' 語句丟擲錯誤。

在輸出中，您可以看到 cathc{} 語句沒有捕獲錯誤，它在瀏覽器的控制檯中列印錯誤。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      try {
         output.innerHTML = "Inside the try block. <br>";
         setTimeout(() => {
            throw new Error("Whoops!");
         }, 1000);
      } catch (err) {
         output.innerHTML += "Inside the catch block. <br>";
         output.innerHTML = err;
      }
   </script>
</body>
</html>

輸出

Inside the try block.

基於 Promise 的錯誤

當使用 Promise 程式碼時發生任何錯誤時，您可以使用 catch() 方法來處理錯誤。或者，您可以將錯誤處理程式作為 then() 方法的第二個引數傳遞。

示例

在下面的程式碼中，我們建立了一個 Promise，並在 1000 毫秒後將其拒絕。

之後，我們使用 then() 和 catch() 方法來處理 Promise。在這裡，我們拒絕了 Promise，因此控制將執行 catch() 方法的程式碼。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      output.innerHTML = "The promise is pending...";
      let promise = new Promise((resolve, reject) => {
         setTimeout(() => {
            reject("The promise is rejected!");
         }, 1000);
      });
      promise
      .then((result) => {
         output.innerHTML = result;
      })
      .catch((error) => {
         output.innerHTML = error;
      });
   </script>
</body>
</html>

輸出

The promise is rejected !

JavaScript 中的錯誤型別

JavaScript 可以丟擲不同型別的錯誤。在這裡，我們將逐一學習每種型別及其示例。

JavaScript RangeError

當值超出指定範圍時，JavaScript 程式碼會丟擲範圍錯誤。

示例

在下面的程式碼中，我們使用了 toPrecision() 方法並傳遞了 1000 作為引數。它丟擲範圍錯誤，因為數字不能有 1000 位。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         let num = 10;
         num.toPrecision(1000);
      } catch (err) {
         document.getElementById("output").innerHTML = err;
      }
   </script>
</body>
</html>

輸出

RangeError: toPrecision() argument must be between 1 and 100

JavaScript ReferenceError

當您嘗試訪問未定義的變數、函式、類方法等時，就會發生引用錯誤。

示例

在下面的程式碼中，我們執行 'window' 物件的 test() 方法。這裡沒有定義 test() 方法，所以它會丟擲引用錯誤。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         window.test();
      } catch (err) {
         document.getElementById("output").innerHTML = err;
      }
   </script>
</body>
</html>

輸出

TypeError: window.test is not a function

JavaScript TypeError

如果您不使用有效型別的數值與方法或運算子，JavaScript 程式碼將丟擲型別錯誤。

示例

在下面的示例中，我們使用布林變數使用 toLowerCase() 方法，但 toLowerCase() 方法僅受字串值支援。因此，它會丟擲型別錯誤。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         let bool = true;
         bool.toLowerCase();
      } catch (err) {
         document.getElementById("output").innerHTML = err;
      }
   </script>
</body>
</html>

輸出

TypeError: bool.toLowerCase is not a function

JavaScript URI（統一資源識別符號）錯誤

當您沒有將有效的 URL 作為 encodeURI、decodeURI 等方法的引數傳遞時，就會發生 URI 錯誤。

示例

在下面的示例中，我們將無效的編碼 URI 作為 decodeURI() 方法的引數傳遞。因此，它會丟擲 URIError。

<html>
<body>
   <div id = "output"> </div>
   <script>
      try {
         decodeURI("%");
      } catch (err) {
         document.getElementById("output").innerHTML = err;
      }
   </script>
</body>
</html>

輸出

URIError: URI malformed
列印頁面
上一頁
下一頁
廣告