前端必知必会-JavaScript 错误_expression expected.javascript-CSDN博客

文章目录

JavaScript 错误
总结

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 语句允许您定义一个代码块，以便在执行时测试错误。

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

JavaScript 语句 try 和 catch 成对出现：

try {
要尝试的代码块
}
catch(err) {
用于处理错误的代码块
}

JavaScript 抛出错误

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

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

JavaScript 实际上将创建一个具有两个属性的 Error 对象：名称和消息。

throw 语句

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

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

异常可以是 JavaScript 字符串、数字、布尔值或对象：

throw "Too big"; // 抛出一个文本
throw 500; // 抛出一个数字

如果将 throw 与 try 和 catch 一起使用，则可以控制程序流程并生成自定义错误消息。

输入验证示例

此示例检查输入。如果值错误，则抛出异常 (err)。

异常 (err) 被 catch 语句捕获并显示自定义错误消息：

<!DOCTYPE html>
<html>
<body>

<p>请输入一个介于 5 和 10 之间的数字：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</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 语句

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

语法

try {
要尝试的代码块
}
catch(err) {
用于处理错误的代码块
}
finally {
无论 try / catch 结果如何，都要执行的代码块
}

示例

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 对象，当发生错误时，该对象提供错误信息。

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

Error对象属性

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

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

错误名称	描述
EvalError	eval() 函数中发生错误
RangeError	发生“超出范围”的数字
ReferenceError	发生非法引用
SyntaxError	发生语法错误
TypeError	发生类型错误
URIError	encodeURI() 中发生错误
下面描述了六个不同的值。

Eval Error

EvalError 表示 eval() 函数中发生错误。

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

范围错误

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

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

示例

let num = 1;
try {
num.toPrecision(500); // 数字不能有 500 个有效位数
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}

引用错误

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

示例

let x = 5;
try {
x = y + 1; // y 不能使用（引用）
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}

语法错误

如果尝试评估语法错误的代码，则会引发 SyntaxError。

示例

try {
eval("alert('Hello)"); // 缺少 ' 将产生错误
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}

类型错误

如果操作数或参数与运算符或函数所期望的类型不兼容，则会引发 TypeError。

示例

let num = 1;
try {
num.toUpperCase(); // 您无法将数字转换为大写
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}

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

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

示例

try {
decryptURI("%%%"); // 您无法对百分号进行 URI 解码
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}

非标准错误对象属性

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

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

请勿在公共网站中使用这些属性。它们不会在所有浏览器中起作用。

总结

本文介绍了JavaScript 错误的使用，如有问题欢迎私信和评论