JavaScript 教程

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 Break JS 类型转换 JS 位运算符 JS 正则表达式 JS 错误处理 JS 作用域 JS Hoisting JS 严格模式 JS this 关键词 JS Let 关键词 JS Const 关键词 JS 箭头函数 JS 类 JS 调试 JS 样式指南 JS 最佳实践 JS 常见错误 JS 性能优化 JS 保留关键词 JS 版本 JS ES5 JS ES6 JS JSON

JS 表单

JS Forms Forms API

JS 对象

Object 对象定义 Object 对象属性 Object 对象方法 Object Display Object 对象访问器 Object 对象构造器 Object 对象原型 Object ECMAScript 5

JS 函数

JS 函数定义 JS 函数参数 JS 函数调用 JS Call 函数 JS Apply 函数 JS 函数闭包

JS 类库

Class 类简介 Class 类继承 Class Static

JS 异步

JS 回调 JS 异步 JS Promises JS Async/Await

JS HTML DOM

DOM 简介 DOM 方法 DOM 文档 DOM 元素 DOM HTML DOM CSS DOM 动画 DOM 事件 DOM 事件监听 DOM 导航 DOM 节点 DOM 集合 DOM 节点列表

JS 浏览器 BOM

JS Window JS Screen JS Location JS History JS Navigator JS 弹出框 JS Timing JS Cookies

JS AJAX

AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 实例

JS JSON

JSON 简介 JSON 语法 JSON vs XML JSON 数据类型 JSON 解析 JSON 字符串化 JSON 对象 JSON 数组 JSON PHP JSON HTML JSON JSONP

JS Web APIs

Web API 简介 Web History API Web Storage API Web Geolocation API

JS vs jQuery

jQuery 选择器 jQuery HTML jQuery CSS jQuery DOM

JS 实例

JS 实例 JS HTML DOM JS HTML 输入 JS HTML 对象 JS HTML 事件 JS Browser JS 编辑器 JS 练习 JS 测验

JS 参考手册

JS 对象 HTML DOM 对象



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 参考手册