码农教程 - 一技在手,衣食无忧! tools

目录

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 块中发生错误时要执行的代码块。

JavaScript 语句try和catch成对出现：

try {
  Block of code to try
}
catch( err) {
  Block of code to handle errors
}

JavaScript 抛出错误

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

其技术术语是：JavaScript 将抛出异常（抛出错误）。

JavaScript 实际上会创建一个错误对象有两个属性：姓名和信息。

抛出语句

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

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

异常可以是 JavaScriptString， ANumber， ABoolean或一个Object：

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>
亲自试一试 »

HTML 验证

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

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

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

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

最后的声明

这个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 = "";
  }
}
亲自试一试 »

错误对象

JavaScript 有一个内置的错误对象，可以在发生错误时提供错误信息。

错误对象提供了两个有用的属性：名称和消息。

错误对象属性

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

错误名称 值

错误名称属性可以返回六个不同的值：

错误名称 描述
评估错误 eval() 函数发生错误
范围误差 发生了"out of range"号
参考错误 发生非法引用
语法错误 发生语法错误
类型错误 发生类型错误
URI错误 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;
}
亲自试一试 »

参考错误

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

示例

let x = 5;
try {
  x = y + 1;   // y cannot be used (referenced)
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
亲自试一试 »

语法错误

SyntaxError如果您尝试评估有语法错误的代码，则会抛出该错误。

示例

try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
亲自试一试 »

类型错误

TypeError如果您使用的值超出预期类型范围，则会抛出异常：

示例

let num = 1;
try {
  num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
亲自试一试 »

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

URIError如果在 URI 函数中使用非法字符，则会抛出异常：

示例

try {
  decodeURI("%%%");   // You cannot URI decode percent signs
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
亲自试一试 »

非标准错误对象属性

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

文件名 (Mozilla)
行号 (Mozilla)
列号 (Mozilla)
堆栈（Mozilla）
说明（微软）
号码（微软）

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

完整的错误参考

有关 Error 对象的完整参考，请访问我们的完整的 JavaScript 错误参考。


❮ 上一节 下一节 ❯