JavaScript - 錯誤與異常處理
你好啊，未來的 JavaScript 巫師們！? 歡迎來到我們令人興奮的旅程，探索 JavaScript 的錯誤處理世界。作為你們親切的鄰居電腦老師，我將指導你們進行這次冒險。所以，請繫好安全帶，我們一起潛入水中！
什麼是錯誤？
想像你正在烤蛋糕?，不小心用了鹽而不是糖。那就是一個錯誤！在編程中，錯誤也很類似 - 它們是我們的代碼運行時發生的意外問題。這些問題可能是打字錯誤、邏輯錯誤，甚至是與我們正在使用數據有關的問題。
這裡有一個 JavaScript 中錯誤的簡單例子：
console.log(Hello, World!);如果你運行這段代碼，你會得到一個錯誤，因為我們忘了給我們的文本加引號。JavaScript 預期字符串應該被引號包圍。
什麼是錯誤處理？
錯誤處理就像你在走繩索時有一個安全網。它是一種在我們的代碼中優雅地管理錯誤的方式，防止我們的整個程序在出現問題時崩潰。
try...catch...finally 語句
try...catch...finally 語句是我們在 JavaScript 中處理錯誤的主要工具。它就像一個超級英雄三重奏來拯救世界！?♀️?♂️?♀️
這是它如何工作：
try {
// 可能會引起錯誤的代碼
let result = 10 / 0;
console.log(result);
} catch (error) {
// 處理錯誤的代碼
console.log("哎呀！發生了一個錯誤:", error.message);
} finally {
// 無論是否有錯誤都會運行的代碼
console.log("這總是會運行！");
}在這個例子中：
-
try區塊包含可能會引起錯誤的代碼（除以零）。 - 如果發生錯誤，
catch區塊會捕捉它並優雅地處理。 -
finally區塊總是會運行，無論是否有錯誤。
throw 語句
有時候，我們想創造我們自己的自定義錯誤。這時 throw 語句就派上用場了。這就像在比賽中當裁判並吹罰犯規！?
這有一個例子：
function checkAge(age) {
if (age < 0) {
throw new Error("年齡不能是負數！");
}
console.log("年齡有效:", age);
}
try {
checkAge(-5);
} catch (error) {
console.log("捕捉到錯誤:", error.message);
}在這段代碼中，當有人嘗試使用負數年齡時，我們會抛出一個自定義錯誤。然後 catch 區塊會處理這個錯誤。
onerror 事件處理器屬性
onerror 事件處理器就像是你整個 JavaScript 應用程序的一個警覺的守護者。它會捕捉到你代碼中任何地方的錯誤。
這是你可以如何使用它：
window.onerror = function(message, source, lineno, colno, error) {
console.log("發生了一個錯誤：");
console.log("訊息:", message);
console.log("來源:", source);
console.log("行號:", lineno);
console.log("列號:", colno);
console.log("錯誤對象:", error);
return true;
};
// 這會觸發 onerror 處理器
nonExistentFunction();這段代碼設置了一個全局錯誤處理器，它會捕捉到你應用程序中的任何未捕捉到的錯誤。
JavaScript 錯誤對象參考
JavaScript 提供了幾種內置的錯誤類型。我們來看一下這個方便的表格：
| 錯誤類型 | 描述 |
|---|---|
| Error | 通用錯誤類型 |
| SyntaxError | 當代碼中存在語法錯誤時發生 |
| ReferenceError | 當引用不存在的變量時發生 |
| TypeError | 當值的類型不是預期類型時發生 |
| RangeError | 當數字超出允許範圍時發生 |
| URIError | 當使用不正確的 URI 函數時發生 |
| EvalError | 當與 eval() 函數相關的錯誤發生時 |
這裡有一個這些錯誤可能會發生的例子：
try {
// SyntaxError
eval("Hello World");
// ReferenceError
console.log(undefinedVariable);
// TypeError
null.f();
// RangeError
let arr = new Array(-1);
// URIError
decodeURIComponent("%");
} catch (error) {
console.log(error.name + ": " + error.message);
}這些行中的每一行都會抛出不同類型的錯誤，我們的 catch 區塊會處理它們。
這就是我們的旅程，親愛的學生們！我們已經穿越了 JavaScript 錯誤處理的土地。記住，錯誤不是你的敵人 - 它們是寶貴的反饋，幫助你改進你的代碼。擁抱它們，從中學習，很快你將會像專家一樣處理錯誤！?
繼續編程，繼續學習，並且不要忘了在途中玩得開心！在下一次課程中見！?
Credits: Image by storyset