抛出
和尝试...捕获...最后
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>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Error Handling</h2>
<p>How to use <b>catch</b> to display an error.</p>
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
</body>
</html>
JavaScript 将 adddlert 捕获为错误,并执行 捕获代码到 处理它。
try
...catch
try
语句允许您定义要执行的代码块 在执行时测试错误。
catch
语句允许您定义一个代码块来 如果 try 块中发生错误,则执行。
JavaScript 语句 try
和 catch
成对出现:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
当发生错误时,JavaScript 将 通常会停止并生成错误消息。
技术术语是:JavaScript 将抛出一个 异常(抛出错误)。
JavaScript 实际上会创建一个具有两个属性的 Error 对象: 名称和消息。
throw
语句throw
语句允许您创建自定义错误。
从技术上讲,您可以抛出异常(抛出错误)。
例外可以是 JavaScript 字符串
、数字
、布尔值
或对象
:
throw "Too big"; // throw a text
throw 500; // throw a number
如果您将 throw
与 try
一起使用, catch
,可以控制程序 流动并生成自定义错误消息。
此示例检查输入。如果数值错误, 抛出异常(err)。
异常(err)被catch语句捕获并显示自定义错误消息:
<!DOCTYPE html>
<html>
<body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button"
onclick="myFunction()">Test Input</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 "not a number";
x = Number(x);
if(x < 5) throw
"too low";
if(x > 10) throw "too high";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>
</body>
</html>
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript try catch</h2>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</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 "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>
</body>
</html>
上面的代码只是一个例子。
现代浏览器通常会结合使用 JavaScript 和内置 HTML 验证,使用 HTML 属性中定义的预定义验证规则:
<input id="demo" type="number" min="5" max="10" step="1">
您可以在本教程的后续章节中阅读有关表单验证的更多信息。
finally
语句finally
语句允许您在 try 和之后执行代码 catch,无论结果如何:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}
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 = "";
}
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript try catch</h2>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</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 "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 = "Input " + err;
}
finally {
document.getElementById("demo").value = "";
}
}
</script>
</body>
</html>
JavaScript 有一个内置的错误对象,可以在以下情况下提供错误信息: 发生错误。
错误对象提供了两个有用的属性:名称和消息。
设置或返回错误名称
设置或返回错误消息(字符串)
错误名称属性可以返回六个不同的值:
eval() 函数发生错误
发生号码“超出范围”
发生非法引用
发生语法错误
发生类型错误
encodeURI() 中发生错误
下面描述了六个不同的值。
EvalError
表示 eval() 函数中出现错误。
较新版本的 JavaScript 不会抛出 EvalError。请改用 SyntaxError。
如果您使用的数字超出范围,则会抛出 RangeError
法律价值的范围。
例如:您不能将数字的有效位数设置为 500。
let num = 1;
try {
num.toPrecision(500); // A number cannot have 500 significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Errors</h2>
<p>You cannot set the number of significant digits of a number to 500:</p>
<p id="demo">
<script>
let num = 1;
try {
num.toPrecision(500);
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>
</body>
</html>
如果您使用(引用)变量,则会抛出 ReferenceError
尚未宣布的:
let x = 5;
try {
x = y + 1; // y cannot be used (referenced)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Errors</h2>
<p>You cannot use the value of a non-existing variable:</p>
<p id="demo"></p>
<script>
let x = 5;
try {
x = y + 1;
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>
</body>
</html>
如果您尝试使用 语法错误。
try {
eval("alert('Hello)"); // Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Errors</h2>
<p>You cannot evaluate code that contains a syntax error:</p>
<p id="demo"></p>
<script>
try {
eval("alert('Hello)");
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>
</body>
</html>
如果您使用的值超出了范围,则会抛出 TypeError
预期类型范围:
let num = 1;
try {
num.toUpperCase(); // You cannot convert a number to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Errors</h2>
<p>You cannot convert a number to upper case:</p>
<p id="demo"></p>
<script>
let num = 1;
try {
num.toUpperCase();
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>
</body>
</html>
如果在 URI 函数中使用非法字符,则会引发 URIError
:
try {
decodeURI("%%%"); // You cannot URI decode percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Errors</h2>
<p>Some characters cannot be decoded with decodeURI():</p>
<p id="demo"></p>
<script>
try {
decodeURI("%%%");
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
</script>
</body>
</html>
Mozilla 和 Microsoft 定义了一些非标准错误对象属性:
fileName (Mozilla) lineNumber (Mozilla) columnNumber (Mozilla) stack (Mozilla) description (Microsoft) number (Microsoft)
不要在公共网站中使用这些属性。它们并不适用于所有浏览器。
有关 Error 对象的完整参考,请转到我们的 Complete JavaScript 错误参考。