小码哥的IT人生

JavaScript try/catch/finally 语句

JavaScript基础 2022-06-08 11:18:30小码哥的IT人生shichen

JavaScript try/catch/finally 语句

实例

在这个例子中,我们在代码中(在 try 块中)打错了字。

本例应提示 "Welcome guest!",但 alert 拼写错误。

catch 块会捕获错误,并执行代码来处理它:

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

完整实例:

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

页面下方有更多 TIY 实例。

定义和用法

try/catch/finally 语句处理代码块中可能发生的部分或全部错误,同时仍在运行代码。

错误可能是程序员造成的编码错误、错误输入导致的错误以及其他不可预见的情况。

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

如果 try 块中发生错误,catch 语句允许您定义要执行的代码块。

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

注释:catch 和 finally 语句都是可选的,但是在使用 try 语句时需要使用其中之一(如果不是同时使用)。

提示:当发生错误时,JavaScript 通常会停止,并生成错误消息。请使用 throw 语句创建自定义错误(抛出异常)。如果将 throw 与 try 和 catch 一起使用,则可以控制程序流并生成自定义错误消息。

有关 JavaScript 错误的更多知识,请学习 JavaScript 错误教程。

浏览器支持

语句 Chrome IE Firefox Safari Opera
try/catch/finally 支持 支持 支持 支持 支持

语法

try {
  tryCode - Block of code to try
}
catch(err) {
  catchCode - Block of code to handle errors
} 
finally {
  finallyCode - Block of code to be executed regardless of the try / catch result
}

参数值

参数 描述
tryCode 必需。在执行时要测试错误的代码块。
err 必需,如果与 catch 一起使用。指定引用错误的局部变量。该变量可以引用 Error 对象(包含有关发生错误的信息,例如消息 "'addlert' is not defined")。如果异常是由 throw 语句创建的,则该变量指的是 throw 语句中指定的对象(请参见“更多实例”)。
catchCode 可选。如果在 try 块中发生错误,要执行的代码块。如果未发生错误,则永远不会执行此代码块。
finallyCode 可选。无论 try / catch 结果如何,都要执行的代码块。

技术细节

JavaScript 版本: ECMAScript 3

更多实例

示例代码:

本例检查输入。如果值是错的,则抛出异常 (err)。

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

<!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="message"></p>
<script>
function myFunction() {
  var message, x;
  message = document.getElementById("message");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "is Empty";
    if(isNaN(x)) throw "not a number";
    if(x > 10) throw "too high";
    if(x < 5) throw "too low";
  }
  catch(err) {
    message.innerHTML = "Input " + err;
  }
}
</script>
</body>
</html>

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>请输入一个 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">检查输入</button>
<p id="message"></p>
<script>
function myFunction() {
  var message, x;
  message = document.getElementById("message");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "")  throw "is Empty";
    if(isNaN(x)) throw "not a number";
    if(x > 10)   throw "too high";
    if(x < 5)  throw "too low";
  }
  catch(err) {
    message.innerHTML = "Input " + err;
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

finally 语句让你在 try 和 catch 之后执行代码,而不管结果如何:

function myFunction()
  var message, x;
  message = document.getElementById("message");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "Empty";
    if(isNaN(x)) throw "Not a number";
    if(x > 10) throw "Too high";
    if(x < 5) throw "Too low";
  }
  catch(err) {
    message.innerHTML = "Error: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>请输入一个 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">检查输入</button>
<p id="message"></p>
<script>
function myFunction() {
  var message, x;
  message = document.getElementById("message");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "")  throw "is Empty";
    if(isNaN(x)) throw "not a number";
    if(x > 10)   throw "too high";
    if(x < 5)  throw "too low";
  }
  catch(err) {
    message.innerHTML = "Input " + err;
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

相关页面

JavaScript 教程:JavaScript 错误

JavaScript 参考手册:JavaScript throw 语句

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024