轻松上手,快乐学习!

JS 教程

JS 首页JS 教程JS 简介JS 如何使用JS 输出JS 语句JS 语法JS 注释JS 变量JS 运算符JS 算法JS 赋值JS 数据类型JS 函数JS 对象JS 事件JS 字符串JS 字符串方法JS 数值JS 数值方法JS 数组JS 数组方法JS 数组排序JS 数组迭代JS 日期JS 日期格式JS 日期获取方法JS 日期设置方法JS 数学运算JS 随机数JS 布尔运算符JS 比较运算符JS 条件语句JS Switch 语句JS For 循环JS While 循环JS BreakJS 类型转换JS 位运算符JS 正则表达式JS 错误处理JS 作用域JS HoistingJS 严格模式JS this 关键词JS Let 关键词JS Const 关键词JS 箭头函数JS 类JS 调试JS 样式指南JS 最佳实践JS 常见错误JS 性能优化JS 保留关键词JS 版本JS ES5JS ES6JS JSONJS FormsForms APIObject 对象定义Object 对象属性Object 对象方法Object DisplayObject 对象访问器Object 对象构造器Object 对象原型Object ECMAScript 5JS 函数定义JS 函数参数JS 函数调用JS Call 函数JS Apply 函数JS 函数闭包Class 类简介Class 类继承Class StaticJS 回调JS 异步JS PromisesJS Async/AwaitDOM 简介DOM 方法DOM 文档DOM 元素DOM HTMLDOM CSSDOM 动画DOM 事件DOM 事件监听DOM 导航DOM 节点DOM 集合DOM 节点列表JS WindowJS ScreenJS LocationJS HistoryJS NavigatorJS 弹出框JS TimingJS CookiesAJAX 简介AJAX XMLHttpAJAX 请求AJAX 响应AJAX XML 文件AJAX PHPAJAX ASPAJAX 数据库AJAX 应用程序AJAX 实例JSON 简介JSON 语法JSON vs XMLJSON 数据类型JSON 解析JSON 字符串化JSON 对象JSON 数组JSON PHPJSON HTMLJSON JSONPWeb API 简介Web History APIWeb Storage APIWeb Geolocation APIjQuery 选择器jQuery HTMLjQuery CSSjQuery DOMJS 实例JS HTML DOMJS HTML 输入JS HTML 对象JS HTML 事件JS BrowserJS 编辑器JS 练习JS 测验

JS 参考手册

JS 参考手册(类别排序)JS 参考手册(字母排序)


JavaScript Errors – Throw Try Catch 错误处理


try 语句使您能够测试代码块中的错误。

try 语句使您能够测试代码块中的错误。

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

finally 使您能够执行代码,在 try 和 catch 之后,无论结果如何。


错误总会发生!

当执行 JavaScript 代码时,会发生各种错误。

错误可能是程序员的编码错误,由错误输入引起的错误,或者由于其他不可预见的问题。

实例

在本例中,我们通过 adddlert 编写警告代码来故意制造了一个错误:

<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>
亲自试一试 »

JavaScript 将 adddlert 捕获为一个错误,然后执行代码来处理该错误。


JavaScript 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 对象namemessage


throw 语句

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

从技术上讲您能够抛出异常(抛出错误)

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

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

如果把 throwtrycatch 一同使用,就可以控制程序流并生成自定义错误消息。


输入验证案例

本例会检查输入。如果值是错误的,将抛出异常(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() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try {
    if(x == "") 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() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try {
    if(x == "") 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 对象提供两个有用的属性:namemessage


Error 对象属性

属性描述
name设置或返回错误名
message设置或返回错误消息(一条字符串)

Error Name Values

error 的 name 属性可返回六个不同的值:

错误名 描述
EvalError 已在 eval() 函数中发生的错误
RangeError 已发生超出数字范围的错误
ReferenceError 已发生非法引用
SyntaxError 已发生语法错误
TypeError 已发生类型错误
URIError 在 encodeURI() 中已发生的错误

下面为您详解这六个不同的值。


Eval 错误

EvalError 指示 eval() 函数中的错误。

更新版本的 JavaScript 不会抛出任何 EvalError。请使用 SyntaxError 代替。


范围错误

RangeError 会在您使用了合法值的范围之外的数字时抛出。

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

实例

var num = 1;
try {
  num.toPrecision(500);   // 一个数字不能有 500 个有效数字
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
亲自试一试 »

引用错误

假如您使用(引用)了尚未声明的变量,则 ReferenceError 会被抛出:

实例

var x;
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 被抛出:

实例

var num = 1;
try {
  num.toUpperCase();   // 您不能将数字转换为大写
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
亲自试一试 »

URI 错误

假如您在 URI 函数中使用非法字符,则 URIError 被抛出:

实例

try {
  decodeURI("%%%");   // 您无法通过 URI 解码百分号
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}
亲自试一试 »

非标准的 Error 对象属性

Mozilla 和 Microsoft 定义了非标准的 error 对象属性:

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

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


完整的 Error 参考手册

如需完整的参考手册,请访问我们完整的 JavaScript Error 参考手册