二维码
搜索 ×

JavaScript Errors

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

JavaScript Errors

Throw, 和 Try…Catch…Finally

try语句定义要运行（尝试）的代码块。

Catch语句定义一个代码块来处理任何错误。

finally语句定义一个代码块，无论结果如何，都要运行。

throw语句定义自定义错误。

错误会发生！

执行 JavaScript 代码时，不同的错误可能会发生。

错误可以是程序员犯的编码错误，也可以是由于错误而导致的错误 输入，以及其他不可预见的事情。

:在此示例中，我们将“alert”拼写错误为“adddlert”，以故意产生错误 
1
2
3
4
5
6
7
8
9
10
<p id="demo"></p>  

<script>  
try {  
  adddlert("Welcome guest!");  
}  
catch(err) {  
  document.getElementById("demo").innerHTML = err.message;  
}  
</script>

JavaScript 将 adddlert 捕获为错误，并执行 catch code 到 处理它。

JavaScript 尝试和捕获

try语句允许您将代码块定义为 在执行时测试错误。

catch语句允许您定义一个代码块 如果 try 块中发生错误，则执行。

JavaScript 语句try和catch成对出现：

1
2
3
4
5
6
try {  
  Block of code to try  
}  
catch(err) {  
  Block of code to handle errors  
}

JavaScript 抛出错误

当发生错误时，JavaScript 将 通常停止并生成错误消息。

这方面的技术术语是：JavaScript 会抛出一个 异常（抛出错误）。

JavaScript 实际上会创建一个具有两个属性的 Error 对象：name 和 message。

throw 语句

throw语句允许您创建自定义错误。

从技术上讲，您可以抛出异常（抛出错误）。

例外可以是 JavaScript String、a Number 、 a Boolean 或 an Object：

1
2
throw "Too big";    // throw a text  
throw 500;          // throw a number
如果将`throw`与`try`和`catch`一起使用，则可以控制程序流程并生成自定义错误消息。

输入验证示例

此示例检查输入。如果值错误， 引发异常 （ERR）。

catch 语句捕获异常 （err），并显示自定义错误消息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>

HTML 验证

上面的代码只是一个示例。

现代浏览器通常会结合使用 JavaScript 和内置 HTML 验证，使用 HTML 属性中定义的预定义验证规则：

1
<input id="demo" type="number" min="5" max="10" step="1">

您可以在本教程的后面章节中阅读有关表单验证的更多信息。

最后声明

finally 语句允许您在try 和catch之后执行代码，而不管结果如何：

1
2
3
4
5
6
7
8
9
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  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 有一个内置的错误对象，可在以下情况下提供错误信息 发生错误。

error 对象提供了两个有用的属性：name 和 message。

Error 对象属性

属性 描述
name 设置或返回错误名称
message 设置或返回错误消息（字符串）

错误名称值

error name 属性可以返回六个不同的值：

错误名称 描述
EvalError eval() 函数中发生错误
RangeError 出现了一些“超出范围”的情况
ReferenceError 发生了非法引用
SyntaxError 发生语法错误
TypeError 发生类型错误
URIError encodeURI() 中发生错误

下面描述了六个不同的值。

评估错误

EvalError 表示 eval() 函数中出现错误。

较新版本的 JavaScript 不会抛出 EvalError。请改用 SyntaxError。

范围误差

如果您使用的数字超出了合法值的范围，则会引发RangeError。

例如：不能将数字的有效位数设置为 500.

1
2
3
4
5
6
7
let num = 1;  
try {  
  num.toPrecision(500);   // A number cannot have 500 significant digits  
}  
catch(err) {  
  document.getElementById("demo").innerHTML = err.name;  
}

参考误差

如果您使用（引用）尚未声明的变量，则会引发 ReferenceError：

1
2
3
4
5
6
7
let x = 5;  
try {  
  x = y + 1;   // y cannot be used (referenced)  
}  
catch(err) {  
  document.getElementById("demo").innerHTML = err.name;  
}

语法错误

如果尝试使用SyntaxError语法错误。

1
2
3
4
5
6
try {  
  eval("alert('Hello)");   // Missing ' will produce an error  
}  
catch(err) {  
  document.getElementById("demo").innerHTML = err.name;  
}

类型错误

如果使用TypeError超出预期类型范围：

1
2
3
4
5
6
7
let num = 1;  
try {  
  num.toUpperCase();   // You cannot convert a number to upper case  
}  
catch(err) {  
  document.getElementById("demo").innerHTML = err.name;  
}

URI（统一资源标识符）错误

如果在 URI 函数中使用非法字符，则会引发 URIError：

1
2
3
4
5
6
try {  
  decodeURI("%%%");   // You cannot URI decode percent signs  
}  
catch(err) {  
  document.getElementById("demo").innerHTML = err.name;  
}

非标准错误对象属性

Mozilla和Microsoft定义了一些非标准的错误对象属性：

fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)

不要在公共网站中使用这些属性。它们不适用于所有浏览器。

推荐教程