JS-10: Error handling

電資鼠

發佈於前端網頁程式設計入門

2025/03/03 更新2025/03/03 發佈閱讀 6 分鐘

了解常見的錯誤消息將幫助您更有效的調試程式碼，四種常見的錯誤消息為

SyntaxError，當程式碼的語法不符合 JavaScript 語法規範時，就會拋出 SyntaxError。

常見情況：

缺少括號、引號、分號。
使用了無效的語法結構。

範例:

// 語法錯誤：少了一個括號
if (true {
  console.log("This will throw a SyntaxError");
}

// 語法錯誤：使用了非法的識別符號
let my-variable = 10; // "-" 是非法的變數名稱字符

ReferenceError，當引用了一個不存在的變數或尚未初始化的變數時，就會拋出 ReferenceError。

常見情況：

變數未定義。
變數的作用域超出範圍。

範例:

// 變數未定義
console.log(x); // ReferenceError: x is not defined

// 使用變數前沒有定義
function test() {
  console.log(myVar); // ReferenceError: myVar is not defined
}

TypeError，當對一個數據類型執行了不合法的操作時，就會拋出 TypeError。

常見情況：

試圖調用 null 或 undefined 上的方法。
非函數類型的對象被當作函數調用。
賦值時類型不匹配。
對數據類型使用方法，但那個方法不適用於此數據類型。

範例:

// 對 null 調用方法
let obj = null;
obj.toString(); // TypeError: Cannot read properties of null

// 非函數被當作函數調用
let num = 123;
num(); // TypeError: num is not a function

RangeError，當一個數值超出有效範圍，或使用了一個無效的陣列長度等情況時，會拋出 RangeError。

常見情況：

設定無效的數組長度。
遞迴深度超過限制。

// 無效的數組長度
let arr = new Array(-1); // RangeError: Invalid array length

// 遞迴深度過深
function recurse() {
  return recurse();
}
recurse(); // RangeError: Maximum call stack size exceeded

好，對一些常見的錯誤有了基本的了解後，我們要認識 throw 語句，其用於拋出用戶自訂義的異常情況，而處理這些異常能防止你的程式終止或崩潰。

範例:

function validataNumber(input) {
	if(typeof input !== "Number") {
		throw new TypeError("Expected a number, but received " + typeof input);
	}
	return input * 5;
}

明確表示這是一個類型錯誤，用來指示數據類型不正確的錯誤。

如果你想拋出一個完全自訂的錯誤消息，你可以使用錯誤構造函數，用來拋出通用的錯誤，不限制特定類型。

範例:

function divide(numerator, denominator) {
	if(denominator === 0) {
		throw new Error("除零錯誤");
	}
	return numerator / denominator;
}

將檢查分母是否為0，如果是的話，他會回傳自訂義的錯誤訊息，否則就執行除法動作。
當錯誤不屬於 JavaScript 內建的特定錯誤類型（如 TypeError、RangeError）時，使用 Error。

好，現在我要來介紹try-catch-finally，其是 JavaScript 中用來處理錯誤的結構，讓程式在發生異常時能優雅地處理。

結構:

try {
  // 嘗試執行的代碼塊
  // 如果此處的代碼拋出錯誤，會跳到 catch 區塊執行
} catch (error) {
  // 捕捉錯誤並處理
  // error 是自動傳入的參數，包含錯誤訊息和堆疊信息
} finally {
  // 無論是否發生錯誤，這裡的代碼都會執行
  // 通常用來清理資源
}

示範:

try {
	const numerator = Number(window.prompt("請輸入被除數: "));
	const denominator = Number(window.prompt("請輸入除數: "));
	
		if(denominator === 0) {
		throw new Error("不能除零")
	}
	if(isNaN(numerator) || isNaN(denominator)) {
		throw new Error("輸入必須是數字")
	}
	const result = numerator / denominator;
	console.log(result)
}
catch(error) {
	console.log(error);
}
finally {
	console.log("This will always run, no matter what.");
}