javascript 錯誤處理 - throw 和 try to catch
try 語句使您能夠測試代碼塊中的錯誤。
catch 語句允許您處理錯誤。
throw 語句允許您創建自定義錯誤。
finally 使您能夠執行代碼,在 try 和 catch 之后,無論結果如何。
1. 錯誤總會發生!
當執行 javascript 代碼時,會發生各種錯誤。
錯誤可能是程序員的編碼錯誤,由錯誤輸入引起的錯誤,或者由于其他不可預見的問題。
范例
在本例中,我們通過 adddlert 編寫警告代碼來故意制造了一個錯誤:
<p id="demo"></p> <script> try { adddlert("歡迎訪問!"); } catch(err) { document.getelementbyid("demo").innerhtml = err.message; } </script>
javascript 將 adddlert 捕獲為一個錯誤,然后執行代碼來處理該錯誤。
2. javascript try 和 catch
try 語句允許您定義一個代碼塊,以便在執行時檢測錯誤。
catch 語句允許你定義一個要執行的代碼塊,如果 try 代碼塊中發生錯誤。
javascript 語句 try 和 catch 成對出現:
try { 供測試的代碼塊 } catch(err) { 處理錯誤的代碼塊 }
3. javascript 拋出錯誤
當發生錯誤時,javascript 通常會停止并產生錯誤消息。
技術術語是這樣描述的:javascript 將拋出異常(拋出錯誤)。
javascript 實際上會創建帶有兩個屬性的 error 對象:name 和 message。
4. throw 語句
throw 語句允許您創建自定義錯誤。
從技術上講您能夠拋出異常(拋出錯誤)。
異常可以是 javascript 字符串、數字、布爾或對象:
throw "too big"; // 拋出文本 throw 500; //拋出數字
如果把 throw 與 try 和 catch 一同使用,就可以控制程序流并生成自定義錯誤消息。
5. 輸入驗證案例
本例會檢查輸入。如果值是錯誤的,將拋出異常(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>
6. html 驗證
以上代碼僅僅是一個例子。
現代瀏覽器通常會結合 javascript 與內置的 html 驗證,通過使用在 html 屬性中定義的預定義的驗證規則:
<input id="demo" type="number" min="5" max="10" step="1">
您將在本教程稍后的章節學到更多有關表單驗證的知識。
7. 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 = ""; } }
8. error 對象
javascript 擁有當錯誤發生時提供錯誤信息的內置 error 對象。
error 對象提供兩個有用的屬性:name 和 message。
9. error 對象屬性
屬性 | 描述 |
---|---|
name | 設置或返回錯誤名 |
message | 設置或返回錯誤消息(一條字符串) |
10. error name values
error 的 name 屬性可返回六個不同的值:
錯誤名 | 描述 |
---|---|
evalerror | 已在 eval() 函數中發生的錯誤 |
rangeerror | 已發生超出數字范圍的錯誤 |
referenceerror | 已發生非法引用 |
syntaxerror | 已發生語法錯誤 |
typeerror | 已發生類型錯誤 |
urierror | 在 encodeuri() 中已發生的錯誤 |
下面為您詳解這六個不同的值。
11. eval 錯誤
evalerror 指示 eval() 函數中的錯誤。
更新版本的 javascript 不會拋出任何 evalerror。請使用 syntaxerror 代替。
12. 范圍錯誤
rangeerror 會在您使用了合法值的范圍之外的數字時拋出。
例如:您不能將數字的有效位數設置為 500。
范例
var num = 1;
try {
num.toprecision(500); // 數無法擁有 500 個有效數
}
catch(err) {
document.getelementbyid("demo").innerhtml = err.name;
}
13. 引用錯誤
假如您使用(引用)了尚未聲明的變量,則 referenceerror 會被拋出:
范例
var x;
try {
x = y + 1; // y 無法被引用(使用)
}
catch(err) {
document.getelementbyid("demo").innerhtml = err.name;
}
14. 語法錯誤
假如您計算帶語法錯誤的代碼,會 syntaxerror 被拋出:
范例
try {
eval("alert('hello)"); // 缺少 ' 會產生錯誤
}
catch(err) {
document.getelementbyid("demo").innerhtml = err.name;
}
15. 類型錯誤
假如您使用的值不在期望值的范圍之內,則 typeerror 被拋出:
范例
var num = 1;
try {
num.touppercase(); // 您無法將數字轉換為大寫
}
catch(err) {
document.getelementbyid("demo").innerhtml = err.name;
}
16. uri 錯誤
假如您在 uri 函數中使用非法字符,則 urierror 被拋出:
范例
try {
decodeuri("%%%"); // 您無法對這些百分號進行 uri 編碼
}
catch(err) {
document.getelementbyid("demo").innerhtml = err.name;
}
17. 非標準的 error 對象屬性
mozilla 和 microsoft 定義了非標準的 error 對象屬性:
- filename (mozilla)
- linenumber (mozilla)
- columnnumber (mozilla)
- stack (mozilla)
- description (microsoft)
- number (microsoft)
請勿在公共網站使用這些屬性。它們并不會在所有瀏覽器中工作。