try | 能够测试代码块中的错误。 |
---|---|
catch | 语句允许处理错误。 |
throw | 语句允许创建自定义错误。 |
finally | 使您能够执行代码,在 try 和 catch 之后,无论结果如何。 |
一、先编写一个错误(try、catch)
try {
供测试的代码块
}
catch(err) {
处理错误的代码块
}
<!DOCTYPE html>
<html>
<body>
<meta charset="UTF-8">
<p id="demo"></p>
<script>
try {
adddlert("我把alert错写成了adddlert");
}
catch(err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
浏览器:
ReferenceError: adddlert is not defined
Error 对象
JavaScript 拥有当错误发生时提供错误信息的内置 error 对象。
error 对象提供两个有用的属性:name 和 message。
error 的 name 属性可返回六个不同的值
EvalError | 已在 eval() 函数中发生的错误 |
---|---|
RangeError | 已发生超出数字范围的错误 |
ReferenceError | 已发生非法引用 |
SyntaxError | 已发生语法错误 |
TypeError | 已发生类型错误 |
URIError | 在 encodeURI() 中已发生的错误 |
JavaScript 抛出错误
当发生错误时,JavaScript 通常会停止并产生错误消息。
技术术语是这样描述的:JavaScript 将抛出异常(抛出错误)。
JavaScript 实际上会创建带有两个属性的 Error 对象:name 和 message。
在上面的测试代码中err.name就是ReferenceError,
err.message就是adddlert is not defined
throw 语句允许您创建自定义错误。
异常可以是 JavaScript 字符串、数字、布尔或对象
本例会检查输入。如果值是错误的,将抛出异常(err)。 该异常(err)被 catch 语句捕获并显示一条自定义的错误消息
<!DOCTYPE html>
<html>
<body>
<meta charset="UTF-8">
<style>
#p02{
color: red;
}
</style>
<p>请输入 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">检测输入</button>
<p id="p01"></p>
<script>
function myFunction() {
var message, x;
message = document.querySelectorAll('p')[1];
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "是空的";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
if(err != null)
{
document.querySelectorAll('p')[1].id = "p02";
message.innerHTML = "输入:" + err;
}
else {
document.querySelectorAll('p')[1].id = "";
}
}
}
</script>
</body>
</html>
finally 语句
finally 语句允许在 try 和 catch 之后执行代码,无论结果
try {
供测试的代码块
}
catch(err) {
处理错误的代码块
}
finally {
无论 try / catch 结果如何都执行的代码块
}
<!DOCTYPE html>
<html>
<body>
<meta charset="UTF-8">
<style>
#p02{
color: red;
}
</style>
<p>请输入 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">检测输入</button>
<p id="p01"></p>
<script>
function myFunction() {
var message, x;
message = document.querySelectorAll('p')[1];
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "是空的";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
if(err != null)
{
document.querySelectorAll('p')[1].id = "p02";
message.innerHTML = "输入:" + err;
}
else {
document.querySelectorAll('p')[1].id = "";
}
}
finally {
document.getElementById('demo').value = "";//将input标签中输入的数据清空
document.querySelectorAll('p')[1].innerHTML = "";//不显示错误
}
}
</script>
</body>
</html>