2.4K
在程式開發過程中，錯誤是無法避免的。JavaScript 提供了一個強大的工具來處理錯誤，這就是 try...catch 語句。這個教學將介紹如何使用 try...catch 來處理錯誤，並且用簡單易懂的範例來說明。
基本結構
try...catch 語句包含兩個主要部分：try 和 catch。在 try 區塊內放置可能會出錯的程式碼，如果這些程式碼中有錯誤發生，控制權會轉移到 catch 區塊，並執行 catch 區塊中的程式碼。
try {
// 可能會出錯的程式碼
} catch (error) {
// 處理錯誤的程式碼
}使用範例
假設我們有一個函數，用於從一個字串中解析數字：
function parseNumber(str) {
try {
let num = parseInt(str);
if (isNaN(num)) {
throw new Error("這不是一個有效的數字");
}
console.log("解析成功，數字是：" + num);
} catch (error) {
console.error("錯誤：" + error.message);
}
}
parseNumber("123"); // 解析成功，數字是：123
parseNumber("abc"); // 錯誤：這不是一個有效的數字
在這個例子中，parseInt 函數用於將字串轉換為數字。如果轉換失敗（例如，輸入的字串不是有效的數字），我們就會拋出一個錯誤。這個錯誤會被 catch 區塊捕獲並處理。
finally 區塊
有時我們希望不論 try 區塊中是否發生錯誤，都執行一些程式碼。這時可以使用 finally 區塊。
function parseNumberWithFinally(str) {
try {
let num = parseInt(str);
if (isNaN(num)) {
throw new Error("這不是一個有效的數字");
}
console.log("解析成功，數字是：" + num);
} catch (error) {
console.error("錯誤：" + error.message);
} finally {
console.log("解析過程結束");
}
}
parseNumberWithFinally("123"); // 解析成功，數字是：123 解析過程結束
parseNumberWithFinally("abc"); // 錯誤：這不是一個有效的數字 解析過程結束
在這個例子中，無論 try 區塊中是否發生錯誤，finally 區塊中的程式碼都會被執行。
錯誤物件
當錯誤發生時，catch 區塊會接收一個錯誤物件，這個物件包含了錯誤的詳細資訊。常用的屬性有：
message：錯誤訊息。name：錯誤名稱（如TypeError,ReferenceError等）。stack：錯誤的堆疊訊息（顯示錯誤發生的地方）。
try {
// 故意產生錯誤
nonExistentFunction();
} catch (error) {
console.log("錯誤名稱：" + error.name);
console.log("錯誤訊息：" + error.message);
console.log("堆疊訊息：" + error.stack);
}
練習題目
- 基本錯誤處理：寫一個函數，接收一個物件並返回其屬性的值。如果屬性不存在，拋出錯誤並在
catch區塊中處理。 - 數字解析器：改進上面的
parseNumber函數，使其不僅能解析整數，還能解析浮點數，並在錯誤時顯示自定義錯誤訊息。 - API 請求：模擬一個 API 請求，使用
try...catch來處理可能的網路錯誤或解析錯誤，並確保finally區塊中記錄請求結束時間。
總結
try...catch 是一個非常實用的工具，可以幫助我們捕捉和處理程式中的錯誤。透過適當的錯誤處理，我們可以提高程式的穩定性和使用者體驗。希望這篇教學能夠幫助國中生朋友們更好地理解和使用 try...catch 語句來處理錯誤。
探索更多來自 雖然沒準備什麼資料 的內容
訂閱即可透過電子郵件收到最新文章。