JS Try...Catch(中英解释)

最新推荐文章于 2025-06-11 20:51:36 发布

转载最新推荐文章于 2025-06-11 20:51:36 发布 · 1.3k 阅读

文章标签：

#javascript #button #mozilla #function #internet #测试

Javascript 专栏收录该内容

19 篇文章

订阅专栏

本章节教你使用try...catch语句捕获并处理JavaScript错误，避免因错误导致的用户流失，通过实例演示了如何在错误发生时提供自定义反馈，包括使用确认框引导用户操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

The try...catch statement allows you to test a block of code for errors.
使用try...catch声明让你能够测试出错误的代码

Examples
举例

The try...catch statement
How to write a try...catch statement.
怎么书写一段try...catch声明

The try...catch statement with a confirm box
Another example of how to write a try...catch statement.
另一个例子（带信息确认框）

JavaScript - Catching Errors
JS-捕捉错误

When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but not for users. When users see errors, they often leave the Web page.
当在网上浏览页面时，我猜各位都见过JS警告框，告诉你有运行错误，并问：”你希望调试吗？“这类错误信息或许对开发者十分有用，但对用户就不是了。当用户见到错误，他们通常会离开页面。

This chapter will teach you how to trap and handle JavaScript error messages, so you don't lose your audience.
这章节将教你怎样来获取JS的错误信息并处理掉，所以不要浪费听取的机会。

There are two ways of catching errors in a Web page:
有两种办法来捕捉错误：

By using the try...catch statement (available in IE5+, Mozilla 1.0, and Netscape 6)
通过使用try...catch
By using the onerror event. This is the old standard solution to catch errors (available since Netscape 3)
使用onerror事件

Try...Catch Statement

The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs.
try...catch声明可以让你测试出一块区域代码中的错误。尝试（try）运行里面的代码并捕捉(catch)执行中出现的错误

Syntax
语法

try{//Run some code here}catch(err){//Handle errors here}

Note that try...catch is written in lowercase letters. Using uppercase letters will generate a JavaScript error!
注意下try...catch是小写，大写的话会出错！

Example 1
例子1

The example below contains a script that is supposed to display the message "Welcome guest!" when you click on a button. However, there's a typo in the message() function. alert() is misspelled as adddlert(). A JavaScript error occurs:
下面例子中假设当你按下按钮脚本就显示"Welcome guest!"。然而message()函数中有拼写错误。alert() 被错写成 adddlert()。JS错误出现了：

<html><head><script type="text/javascript">function message(){adddlert("Welcome guest!")}</script></head><body><input type="button" value="View message" onclick="message()" /></body></html>

To take more appropriate action when an error occurs, you can add a try...catch statement.
当错误出现时，想给一个更合适的行动你可以添加try...catch声明

The example below contains the "Welcome guest!" example rewritten to use the try...catch statement. Since alert() is misspelled, a JavaScript error occurs. However, this time, the catch block catches the error and executes a custom code to handle it. The code displays a custom error message informing the user what happened:
下面的例子就给上面的"Welcome guest!" 例子加入了try...catch声明。这会出现错误时就会显示自定义的错误信息来公司用户发生了什么事：

<html><head><script type="text/javascript">var txt=""function message(){try { adddlert("Welcome guest!") }catch(err) { txt="There was an error on this page.nn" txt+="Error description: " + err.description + "nn" txt+="Click OK to continue.nn" alert(txt) }}</script></head><body><input type="button" value="View message" onclick="message()" /></body></html>

Example 2
例子2

The next example uses a confirm box to display a custom message telling users they can click OK to continue viewing the page or click Cancel to go to the homepage. If the confirm method returns false, the user clicked Cancel, and the code redirects the user. If the confirm method returns true, the code does nothing:
错误出现后弹出的信息确认框提示用户按OK就继续浏览该页，按取消就返回首页：

<html><head><script type="text/javascript">var txt=""function message(){try { adddlert("Welcome guest!") }catch(err) { txt="There was an error on this page.nn" txt+="Click OK to continue viewing this page,n" txt+="or Cancel to return to the home page.nn" if(!confirm(txt)) { document.location.href="http://www.w3schools.com/" } }}</script></head>

</html>

The onerror Event
onerror事件

The onerror event will be explained soon, but first you will learn how to use the throw statement to create an exception. The throw statement can be used together with the try...catch statement.