JavaScript 錯誤
Throw, and Try...Catch...Finally
try 語句定義一個要執行（嘗試）的程式碼塊。
catch 語句定義一個處理任何錯誤的的程式碼塊。
finally 語句定義一個無論結果如何都會執行的程式碼塊。
throw 語句定義一個自定義錯誤。
錯誤是不可避免的！
執行 JavaScript 程式碼時，可能會發生各種錯誤。
錯誤可能是程式設計師的編碼錯誤、錯誤的輸入錯誤，以及其他無法預料的情況。
示例
在此示例中，我們將 "alert" 拼寫錯誤為 "adddlert" 以故意產生錯誤
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
自己動手試一試 »
JavaScript 將 adddlert 捕獲為錯誤，並執行 catch 程式碼來處理它。
JavaScript try 和 catch
try 語句允許您定義一個程式碼塊，在執行時對其進行錯誤測試。
catch 語句允許您定義一個程式碼塊，在 `try` 塊中發生錯誤時執行。
JavaScript 的 try 和 catch 語句成對出現
try {
要嘗試的程式碼塊
}
catch(err) {
處理錯誤的 Adde
}
JavaScript 丟擲錯誤
當發生錯誤時，JavaScript 通常會停止並生成錯誤訊息。
這在技術上的術語是：JavaScript 將丟擲異常（丟擲錯誤）。
JavaScript 將建立一個包含name和message兩個屬性的Error 物件。
throw 語句
throw 語句允許您建立自定義錯誤。
從技術上講，你可以丟擲異常（丟擲錯誤）。
異常可以是 JavaScript 的 String、Number、Boolean 或 Object
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="p01"></p>
<script>
function myFunction() {
const message = document.getElementById("p01");
message.innerHTML = "";
let x = document.getElementById("demo").value;
try {
if(x.trim() == "") throw "empty";
if(isNaN(x)) throw "不是數字";
x = Number(x);
if(x < 5) throw "過低";
if(x > 10) throw "過高";
}
catch(err) {
message.innerHTML = "Input is " + 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) {
處理錯誤的 Adde
}
finally {
無論 try / catch 結果如何都要執行的程式碼塊
}示例
function myFunction() {
const message = document.getElementById("p01");
message.innerHTML = "";
let x = document.getElementById("demo").value;
try {
if(x.trim() == "") throw "is empty";
if(isNaN(x)) throw "is not a number";
x = Number(x);
if(x > 10) throw "is too high";
if(x < 5) throw "is too low";
}
catch(err) {
message.innerHTML = "Error: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
自己動手試一試 »
Error 物件
JavaScript 有一個內建的錯誤物件，它在發生錯誤時提供錯誤資訊。
錯誤物件提供兩個有用的屬性：name 和 message。
Error 物件屬性
| 屬性 | 描述 |
|---|---|
| name | 設定或返回錯誤名稱 |
| message | 設定或返回錯誤訊息（字串） |
Error Name 值
error name 屬性可以返回六個不同的值
| 錯誤名稱 | 描述 |
|---|---|
| EvalError | eval() 函式中發生錯誤 |
| RangeError | 發生“超出範圍”的數字 |
| ReferenceError | 發生非法引用 |
| SyntaxError | 發生語法錯誤 |
| TypeError | 發生型別錯誤 |
| URIError | encodeURI() 中發生錯誤 |
六個不同的值描述如下。
Eval Error
EvalError 表示 eval() 函式中的錯誤。
較新版本的 JavaScript 不會丟擲 EvalError。請使用 SyntaxError。
Range Error
如果使用超出合法值範圍的數字，則會丟擲 RangeError。
例如：你不能將數字的有效數字位數設定為 500。
示例
let num = 1;
try {
num.toPrecision(500); // 一個數字不能有 500 位有效數字
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
自己動手試一試 »
Reference Error
如果你使用（引用）一個未宣告的變數，則會丟擲 ReferenceError。
示例
let x = 5;
try {
x = y + 1; // y 不能被使用（引用）
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
自己動手試一試 »
Syntax Error
如果你嘗試評估具有語法錯誤的 Adde，則會丟擲 SyntaxError。
示例
try {
eval("alert('Hello)"); // 缺少 ' 會產生錯誤
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
自己動手試一試 »
Type Error
如果運算元或引數與運算子或函式期望的型別不相容，則會丟擲 TypeError。
示例
let 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;
}
自己動手試一試 »
非標準 Error 物件屬性
Mozilla 和 Microsoft 定義了一些非標準的錯誤物件屬性
fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)
不要在公共網站上使用這些屬性。它們在所有瀏覽器中都可能無法正常工作。
完整的錯誤參考
有關 Error 物件的完整參考，請訪問我們的完整 JavaScript 錯誤參考。
