JavaScript 錯誤 - Throw 和 Try to Catch

try 語句使您能夠測試代碼塊中的錯誤。

catch 語句允許您處理錯誤。

throw 語句允許您創建自定義錯誤。

finally 使您能夠執行代碼，在 try 和 catch 之后，無論結果如何。

錯誤總會發生！

當執行 JavaScript 代碼時，會發生各種錯誤。

錯誤可能是程序員的編碼錯誤，由錯誤輸入引起的錯誤，或者由于其他不可預見的問題。

實例

在本例中，我們通過 adddlert 編寫警告代碼來故意制造了一個錯誤：

<p id="demo"></p>
<script>
try {
    adddlert("歡迎訪問！");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

親自試一試

JavaScript 將 adddlert 捕獲為一個錯誤，然后執行代碼來處理該錯誤。

JavaScript try 和 catch

try 語句允許您定義一個代碼塊，以便在執行時檢測錯誤。

catch 語句允許你定義一個要執行的代碼塊，如果 try 代碼塊中發生錯誤。

JavaScript 語句 try 和 catch 成對出現：

try {
     供測試的代碼塊
}
 catch(err) {
     處理錯誤的代碼塊
}

JavaScript 拋出錯誤

當發生錯誤時，JavaScript 通常會停止并產生錯誤消息。

技術術語是這樣描述的：JavaScript 將拋出異常（拋出錯誤）。

JavaScript 實際上會創建帶有兩個屬性的 Error 對象：name 和 message。

throw 語句

throw 語句允許您創建自定義錯誤。

從技術上講您能夠拋出異常（拋出錯誤）。

異常可以是 JavaScript 字符串、數字、布爾或對象：

throw "Too big";    // 拋出文本
throw 500;          //拋出數字

如果把 throw 與 try 和 catch 一同使用，就可以控制程序流并生成自定義錯誤消息。

輸入驗證案例

本例會檢查輸入。如果值是錯誤的，將拋出異常（err）。

該異常（err）被 catch 語句捕獲并顯示一條自定義的錯誤消息：

<!DOCTYPE html>
<html>
<body>
<p>請輸入 5 - 10 之間的數字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">測試輸入</button>
<p id="message"></p>
<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "空的";
         if(isNaN(x)) throw "不是數字";
         x = Number(x);
        if(x < 5) throw  "太小";
        if(x > 10) throw "太大";
    }
    catch(err) {
        message.innerHTML = "輸入是 " + err;
    }
}
</script>
</body>
</html>

親自試一試

HTML 驗證

以上代碼僅僅是一個例子。

現代瀏覽器通常會結合 JavaScript 與內置的 HTML 驗證，通過使用在 HTML 屬性中定義的預定義的驗證規則：

<input id="demo" type="number" min="5" max="10" step="1">

您將在本教程稍后的章節學到更多有關表單驗證的知識。

finally 語句

finally 語句允許您在 try 和 catch 之后執行代碼，無論結果：

try {
     // 供測試的代碼塊
}
 catch(err) {
     // 處理錯誤的代碼塊
} 
finally {
     // 無論結果如何都執行的代碼塊
}

實例

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "是空的";
        if(isNaN(x)) throw "不是數字";
         x = Number(x);
        if(x >  10) throw "太大";
        if(x <  5) throw "太小";
    }
    catch(err) {
        message.innerHTML = "錯誤：" + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

親自試一試

Error 對象

JavaScript 擁有當錯誤發生時提供錯誤信息的內置 error 對象。

error 對象提供兩個有用的屬性：name 和 message。

Error 對象屬性

屬性 描述
name 設置或返回錯誤名
message 設置或返回錯誤消息（一條字符串）

Error Name Values

error 的 name 屬性可返回六個不同的值：

錯誤名 描述
EvalError 已在 eval() 函數中發生的錯誤
RangeError 已發生超出數字范圍的錯誤
ReferenceError 已發生非法引用
SyntaxError 已發生語法錯誤
TypeError 已發生類型錯誤
URIError 在 encodeURI() 中已發生的錯誤

下面為您詳解這六個不同的值。

Eval 錯誤

EvalError 指示 eval() 函數中的錯誤。

更新版本的 JavaScript 不會拋出任何 EvalError。請使用 SyntaxError 代替。

范圍錯誤

RangeError 會在您使用了合法值的范圍之外的數字時拋出。

例如：您不能將數字的有效位數設置為 500。

實例

var num = 1;
try {
    num.toPrecision(500);   // 數無法擁有 500 個有效數
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

親自試一試

引用錯誤

假如您使用（引用）了尚未聲明的變量，則 ReferenceError 會被拋出：

實例

var x;
try {
    x = y + 1;   // y 無法被引用（使用）
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

親自試一試

語法錯誤

假如您計算帶語法錯誤的代碼，會 SyntaxError 被拋出：

實例

try {
    eval("alert('Hello)");   // 缺少 ' 會產生錯誤
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

親自試一試

類型錯誤

假如您使用的值不在期望值的范圍之內，則 TypeError 被拋出：

實例

var num = 1;
try {
    num.toUpperCase();   // 您無法將數字轉換為大寫
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

親自試一試

URI 錯誤

假如您在 URI 函數中使用非法字符，則 URIError 被拋出：

實例

try {
    decodeURI("%%%");   // 您無法對這些百分號進行 URI 編碼
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

親自試一試

非標準的 Error 對象屬性

Mozilla 和 Microsoft 定義了非標準的 error 對象屬性：

  • fileName (Mozilla)
  • lineNumber (Mozilla)
  • columnNumber (Mozilla)
  • stack (Mozilla)
  • description (Microsoft)
  • number (Microsoft)

請勿在公共網站使用這些屬性。它們并不會在所有瀏覽器中工作。