JavaScript - 錯誤與異常處理

JavaScript 中的錯誤處理是一個檢測和處理程式執行過程中出現的錯誤的過程。錯誤可以是語法錯誤、執行時錯誤或邏輯錯誤。程式執行過程中發生的錯誤稱為執行時錯誤或異常。

在 JavaScript 中，錯誤可能由於程式設計錯誤、使用者輸入錯誤等原因導致。錯誤會中斷程式碼執行並導致糟糕的使用者體驗。有效的錯誤和異常處理對於構建健壯、可靠且使用者友好的 JavaScript 應用程式至關重要。

什麼是錯誤？

錯誤是在程式執行過程中發生的事件，阻止程式正常繼續執行。錯誤可能由多種因素導致，例如語法錯誤、執行時錯誤和邏輯錯誤。

語法錯誤

語法錯誤，也稱為解析錯誤，在傳統的程式語言中發生在編譯時，在 JavaScript 中發生在解釋時。

例如，以下行會導致語法錯誤，因為它缺少一個閉合括號。

<script>
   window.print();
</script>

當 JavaScript 中發生語法錯誤時，只有包含語法錯誤的同一執行緒中的程式碼受到影響，其他執行緒中的其餘程式碼將繼續執行，假設它們中沒有任何內容依賴於包含錯誤的程式碼。

執行時錯誤（異常）

執行時錯誤，也稱為異常，發生在執行期間（編譯/解釋之後）。

例如，以下行會導致執行時錯誤，因為這裡的語法是正確的，但在執行時，它試圖呼叫一個不存在的方法。

<script>
   window.printme();
</script>

異常也會影響發生它們的執行緒，允許其他 JavaScript 執行緒繼續正常執行。

有很多 JavaScript 執行時錯誤（異常），其中一些如下所示：

ReferenceError - 嘗試訪問未定義的變數/方法。
TypeError - 嘗試對不相容的資料型別進行操作。
RangeError - 值超出允許的範圍。

邏輯錯誤

邏輯錯誤可能是最難追蹤的錯誤型別。這些錯誤不是語法或執行時錯誤的結果。相反，當你在驅動指令碼的邏輯中犯錯並且沒有得到預期的結果時，就會發生這些錯誤。

例如，當你將任何數值除以 10 時，它會返回 undefined。

<script>
   let num = 10/0;
</script>

什麼是錯誤處理？

每當 JavaScript 程式碼中發生任何錯誤時，JavaScript 引擎都會停止整個程式碼的執行。如果你以正確的方式處理這些錯誤，你可以跳過有錯誤的程式碼並繼續執行其他 JavaScript 程式碼。

你可以使用以下機制來處理錯誤。

try...catch...finally 語句
throw 語句
onerror() 事件處理程式屬性
自定義錯誤

try...catch...finally 語句

最新版本的 JavaScript 添加了異常處理功能。JavaScript 實現了 try...catch...finally 結構以及 throw 運算子來處理異常。

你可以捕獲程式設計師生成的和執行時異常，但你無法捕獲 JavaScript 語法錯誤。

以下是 try...catch...finally 塊的語法：

<script>
   try {
      // Code to run
      [break;]
   } 
   catch ( e ) {
      // Code to run if an exception occurs
      [break;]
   }
   [ finally {
      // Code that is always executed regardless of 
      // an exception occurring
   }]
</script>

try 塊後面必須緊跟一個 catch 塊或一個 finally 塊（或兩者之一）。當 try 塊中發生異常時，異常將放置在 e 中並執行 catch 塊。可選的 finally 塊在 try/catch 後無條件執行。

示例

以下是一個示例，我們嘗試呼叫一個不存在的函式，這反過來會引發異常。

讓我們嘗試使用 try...catch 捕獲此異常並顯示一條使用者友好的訊息。如果要隱藏此錯誤，你也可以禁止顯示此訊息。

你可以使用 finally 塊，它將在 try/catch 後始終無條件執行。

<html>
<head>
<script>               
   try {
      var a = 100;
      alert(myFunc(a));                  
   }
   catch (e) {
      alert(e);
   }
   finally {
      alert("Finally block will always execute!" );
   }
</script>
</head>
<body>
   <p>Exception handling using try...catch...finally statements</p>
</body>
</html>

輸出

Exception handling using try...catch...finaly statements

throw 語句

你可以使用 throw 語句來引發你的內建異常或你的自定義異常。稍後可以捕獲這些異常，並且你可以採取適當的操作。

示例

以下示例演示瞭如何使用 throw 語句。

<html>
<head>
<script>
   function myFunc() {
      var a = 100;
      var b = 0;

      try {
         if ( b == 0 ) {
            throw( "Divide by zero error." ); 
         } else {
            var c = a / b;
         }
      }
      catch ( e ) {
         alert("Error: " + e );
      }
   }
</script>      
</head>
<body>
   <p>Click the following to see the result:</p>
   <form>
      <input type = "button" value = "Click Me" onclick = "myFunc();" />
   </form>
</body>
</html>

輸出

Click the following to see the result:
Click Me

您可以使用字串、整數、布林值或物件在一個函式中丟擲異常，然後您可以在與上面相同的函式中捕獲該異常，或者在另一個函式中使用 try...catch 塊捕獲該異常。

onerror 事件處理程式屬性

onerror 事件處理程式是 JavaScript 中首個用於簡化錯誤處理的功能。onerror 是 'window' 物件的一個事件處理程式屬性，當網頁上的任何元素髮生任何錯誤時，它會自動觸發。您可以呼叫回撥函式來處理發生的任何錯誤。

您可以按照以下語法使用 onerror 事件處理程式屬性。

window.onerror = errorhandler_func;
OR
<ele onerror="errorhandler_func()"> </ele>

在上述語法中，當發生任何錯誤時將執行 errorhandler_func()。

onerror 事件處理程式提供三條資訊來識別錯誤的確切性質：

錯誤訊息 - 瀏覽器針對給定錯誤顯示的相同訊息
URL - 發生錯誤的檔案
行號 - 給定 URL 中導致錯誤的行號

示例

在下面的程式碼中，我們在 <input> 元素上添加了 onclick 事件，並在使用者點選輸入元素時呼叫了 myFunc() 函式。myFunc() 函式未定義。因此，它會丟擲一個錯誤。

我們使用 'onerror' 事件處理程式來捕獲錯誤。在回撥函式中，我們在發生錯誤的檔案中列印錯誤訊息、檔案 URL 和行號。

<html>
<body>
   <p> Click the following button to see the result:</p>
   <form>
      <input type = "button" value = "Click Me" onclick = "myFunc();" />
   </form>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      window.onerror = function (msg, url, line) {
         output.innerHTML = "Error: " + msg + "<br>";
         output.innerHTML += "URL: " + url + "<br>";
         output.innerHTML += "Line: " + line + "<br>";
      }
   </script>
</body>
</html>

輸出

Click the following button to see the result:
Click Me
Error: Uncaught ReferenceError: myFunc is not defined
URL: file:///C:/Users/Lenovo/Desktop/intex.html
Line: 5

您可以使用 onerror 方法（如下所示）在載入影像時出現任何問題的情況下顯示錯誤訊息。

<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />

您可以將 onerror 與許多 HTML 標籤一起使用，以便在發生錯誤時顯示適當的訊息。

JavaScript Error 類和 Error 物件

每當程式碼中發生任何錯誤時，JavaScript 都會丟擲一個 Error 類的例項（物件）。Error 物件包含有關錯誤的資訊。

但是，Error() 是所有型別錯誤的通用建構函式，但對於不同型別的錯誤存在不同的物件。

JavaScript 自定義錯誤

您還可以使用 Error() 建構函式丟擲帶有自定義訊息的錯誤。

const customError = new Error(message);
customError.name = "CustomError";

這裡，我們建立了 'Error' 類的例項並將 'message' 作為引數傳遞。此外，我們還更改了 'name' 屬性的值。類似地，如果您不想將其作為 Error() 建構函式引數傳遞，則可以更改 'message' 屬性的值。

JavaScript Error 物件參考

JavaScript 錯誤型別或建構函式

JavaScript 包含以下型別的錯誤。您也可以將其用作建構函式來建立特定型別的新的錯誤。

錯誤型別/物件	描述
Error	它是錯誤的通用建構函式。您還可以透過擴充套件 Error 物件來建立自定義錯誤。
SyntaxError	當語法中存在任何錯誤時，會丟擲 SyntaxError 的例項。例如，缺少括號、無效的 JSON 等。
ReferenceError	當您嘗試訪問當前作用域中未定義的變數時，就會發生引用錯誤。
TypeError	當變數的型別無效時，JavaScript 會丟擲型別錯誤。
RangeError	當數值輸入超出範圍時，它會丟擲範圍錯誤。
URIError	當您向 decodeURI 或 encodeURI 方法傳遞無效引數時，JavaScript 會丟擲 URIError。
EvalError	已棄用。
AggregateError	它用於將多個錯誤物件聚合到單個錯誤物件中，並且允許您處理多個錯誤物件。

Error 物件屬性

Error 物件包含兩個屬性。

屬性	描述
name	用於設定或獲取錯誤名稱。
message	用於設定或獲取錯誤訊息。

非標準屬性和方法

以下是 Error 物件的非標準屬性和方法列表。但是，它們並非所有瀏覽器都支援。因此，您應該避免使用它們。

屬性	描述
columnNumber	僅在 Firefox 瀏覽器中受支援。
description	僅在 Microsoft 瀏覽器中受支援。
displayName	僅在 Firefox 瀏覽器中受支援。
fileName	僅在 Firefox 瀏覽器中受支援。
lineNumber	僅在 Firefox 瀏覽器中受支援。
number	僅在 Microsoft 瀏覽器中受支援。
stack	僅在 Firefox 瀏覽器中受支援。
internalError()	僅在 Firefox 瀏覽器中受支援。
toSource()	它是 Error 物件的非標準方法。

列印頁面