JavaScript青少年简明教程：异常处理
在 JavaScript 中，异常指的是程序执行过程中出现的错误或异常情况。这些错误可能导致程序无法正常执行，甚至崩溃。ECMA-262规范了多种JavaScript错误类型，这些类型都继承自Error基类。主要的错误类型包括：
Error：这是所有错误的基类。
EvalError：这个描述部分正确，但需要注意的是，在现代JavaScript中，EvalError几乎不再被使用。eval()函数的错误通常会抛出其他类型的错误（如SyntaxError）。
SyntaxError：当JavaScript代码不符合语法规则时抛出。
ReferenceError：当引用一个未声明的变量时，或者在变量声明之前访问块级作用域中的变量时抛出。
TypeError：当操作数或参数的类型与预期不符时抛出。
URIError：当使用全局URI处理函数时，如果URI格式不正确会抛出此错误。
RangeError：当数值变量或参数超出其有效范围时抛出。
此外，开发者可以通过继承Error或其子类来创建自定义异常。
JavaScript 的异常处理机制通过 try...catch...finally 语句和 throw 语句提供了一种优雅的方式来捕获和处理运行时错误。
以下是关键点：
try...catch 语句：用于捕获和处理在 try 块中发生的异常。
finally 块：无论是否发生异常，都会执行，用于清理资源或执行收尾工作。
throw 语句：用于手动抛出异常，可以抛出任意类型的异常。
自定义异常：通过继承 Error 类，可以创建自定义的异常类型。
try...catch...finally语句
语法：
try {
// 尝试执行的代码块
// 如果在尝试执行时发生异常，控制将立即转到catch块
} catch (error) {
// 当try块中发生异常时执行的代码块
// 可以在这里处理异常，如记录错误或执行一些清理操作
} [finally {
// 无论是否发生异常，都会执行的代码块
// 通常用于执行清理操作，如关闭文件或释放资源
}]
说明：
try 块:
包含可能抛出异常的代码。
如果发生异常,执行会立即转到catch块。
catch 块:
捕获并处理try块中抛出的异常。
error参数包含异常信息。
catch块是可选的,但如果没有catch,则必须有finally。
finally 块:
finally块是可选的。
无论是否发生异常都会执行。
通常用于清理资源。
throw 语句
throw 语句用于手动抛出异常，可以抛出任意类型的异常（如字符串、数字、对象等）。
基本语法：
throw expression;
throw 可以在任何地方使用，但通常建议将可能抛出异常的代码包裹在 try-catch 块中，以便适当处理异常。其中，expression 可以是任何类型的值，例如：
字符串: 用于描述错误信息。
数字: 用于表示错误代码。
对象: 用于提供更详细的错误信息，例如错误类型、错误位置等。
Error 对象: JavaScript 内置的 Error 对象，可以用于创建自定义错误类型。
示例：
function divide(a, b) {
if (b === 0) {
throw new Error("除数不能为零");
}
return a / b;
}
try {
console.log(divide(10, 0));
} catch (error) {
console.log("捕获到错误：", error.message);
}
下面给出几个例子。
例1：限制HTML5输入框，限制输入 0 到 100 之间的正整数（不能带小数）。
使用try-catch，源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>整数输入验证</title>
</head>
<body>
<h1>整数输入验证（实时，使用try-catch）</h1>
<label for="integerInput">请输入一个 0 到 100 之间的正整数（不能带小数）：</label>
<input type="text" id="integerInput">
<p id="integerError"></p>
<script>
function validateInteger() {
const input = document.getElementById('integerInput');
const error = document.getElementById('integerError');
const value = input.value.trim();
try {
if (value === '') throw new Error("请输入一个数值");
// 检查是否只包含数字
for (let i = 0; i < value.length; i++) {
if (value[i] < '0' || value[i] > '9') {
throw new Error("输入的不是正整数，请重新输入");
}
}
const n = parseInt(value, 10);
// 检查是否为整数
if (n.toString() !== value) throw new Error("输入的不是正整数，请重新输入");
// 检查范围
if (n < 0 || n > 100) throw new Error("输入的正整数不在 0 到 100 之间，请重新输入");
error.textContent = "输入正确";
error.style.color = "green";
} catch (e) {
error.textContent = e.message;
error.style.color = "red";
}
}
document.getElementById('integerInput').addEventListener('input', validateInteger);
</script>
</body>
</html>
例2：限制HTML5输入框，请输入一个 0 到 100 之间的数值（可带小数）。
使用try-catch，源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮点数输入验证</title>
</head>
<body>
<h1>浮点数输入验证（实时，使用try-catch）</h1>
<label for="floatInput">请输入一个 0 到 100 之间的数值（可带小数）：</label>
<input type="text" id="floatInput">
<p id="floatError"></p>
<script>
function validateFloat() {
const input = document.getElementById('floatInput');
const error = document.getElementById('floatError');
const value = input.value.trim();
try {
if (value === '') throw new Error("请输入一个数值");
// 检查是否为有效数值格式
let dotCount = 0;
let isNegative = false;
for (let i = 0; i < value.length; i++) {
if (i === 0 && value[i] === '-') {
isNegative = true;
continue;
}
if (value[i] === '.') {
dotCount++;
if (dotCount > 1) throw new Error("输入的不是有效的数值格式，请重新输入");
continue;
}
if (value[i] < '0' || value[i] > '9') {
throw new Error("输入的不是有效的数值格式，请重新输入");
}
}
const num = parseFloat(value);
if (isNaN(num)) throw new Error("输入的不是有效的数值格式，请重新输入");
// 检查范围
if (num < 0 || num > 100) throw new Error("输入的数值不在 0 到 100 之间，请重新输入");
error.textContent = "输入正确";
error.style.color = "green";
} catch (e) {
error.textContent = e.message;
error.style.color = "red";
}
}
document.getElementById('floatInput').addEventListener('input', validateFloat);
</script>
</body>
</html>
自定义异常
通过创建自定义错误类，可以更具体地描述异常情况。所有自定义异常类应该继承自 Error 类。
示例：
class CustomError extends Error {
constructor(message) {
super(message);
this.name = "CustomError";
// 可以添加自定义属性
this.customProperty = "some value";
}
}
try {
throw new CustomError("这是一个自定义错误");
} catch (error) {
console.log(error.name); // 输出: CustomError
console.log(error.message); // 输出: 这是一个自定义错误
console.log(error.customProperty); // 输出: some value
}
在 ES6 及以后的版本中，自定义异常通常是通过创建类来实现的，这是最常见和推荐的方式。
附录
JavaScript异常处理和调试 JavaScript异常处理和调试_js catch 异常栈-CSDN博客
扫一扫
3429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
