鬆軟科技Web課堂:JavaScript 異常

時間 2019-12-18

標籤鬆軟科技 web 課堂 javascript 異常欄目 HTML 简体版

原文原文鏈接

JavaScript 錯誤 - Throw 和 Try to Catch

try 語句使您可以測試代碼塊中的錯誤。html

catch 語句容許您處理錯誤。程序員

throw 語句容許您建立自定義錯誤。瀏覽器

finally 使您可以執行代碼，在 try 和 catch 以後，不管結果如何。函數

錯誤總會發生！

當執行 JavaScript 代碼時，會發生各類錯誤。測試

錯誤多是程序員的編碼錯誤，由錯誤輸入引發的錯誤，或者因爲其餘不可預見的問題。編碼

實例

在本例中，咱們經過 adddlert 編寫警告代碼來故意製造了一個錯誤：spa

<p id="demo"></p>

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

JavaScript 將 adddlert 捕獲爲一個錯誤，而後執行代碼來處理該錯誤。code

JavaScript try 和 catch

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

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 {
     不管 try / catch 結果如何都執行的代碼塊
}

實例

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;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。