JavaScript 错误 Try Catch Throw


目录

    显示目录


抛出尝试...捕获...最后

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 语句 trycatch 成对出现:

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


JavaScript 抛出错误

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

技术术语是:JavaScript 将抛出一个 异常(抛出错误)

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


throw 语句

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

从技术上讲,您可以抛出异常(抛出错误)

例外可以是 JavaScript 字符串数字布尔值对象

throw "Too big";    // throw a text
throw 500;          // throw a number

如果您将 throwtry 一起使用, 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>




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 有一个内置的错误对象,可以在以下情况下提供错误信息: 发生错误。

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


错误对象属性

name

设置或返回错误名称

message

设置或返回错误消息(字符串)


错误名称 值

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

EvalError

eval() 函数发生错误

RangeError

发生号码“超出范围”

ReferenceError

发生非法引用

SyntaxError

发生语法错误

TypeError

发生类型错误

URIError

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(统一资源标识符)错误

如果在 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 错误参考。