JavaScript try...catch - JavaScript 教程

摘要: 在本教程中，您将学习如何使用 JavaScript try...catch 语句来处理异常。

JavaScript try…catch 语句简介

以下示例尝试调用不存在的 add() 函数

let result = add(10, 20);
console.log(result);

console.log('Bye');
Code language: JavaScript (javascript)

JavaScript 引擎发出以下错误

Uncaught TypeError: add is not a functionCode language: JavaScript (javascript)

错误消息表明 add 不是一个函数，错误类型为 TypeError。

当 JavaScript 引擎遇到错误时，它会发出该错误并立即终止整个脚本的执行。在上面的示例中，代码执行在第一行停止。

有时，您希望处理错误并继续执行。为此，您使用 try...catch 语句，语法如下

try {
  // code may cause error
} catch(error){
  // code to handle error
}Code language: JavaScript (javascript)

在此语法中

首先，将可能导致错误的代码放在 try 块中。
其次，在 catch 块中实现处理错误的逻辑。

如果 try 块中出现错误，JavaScript 引擎会立即执行 catch 块中的代码。此外，JavaScript 引擎会为您提供一个错误对象，其中包含有关错误的详细信息。

基本上，错误对象至少有两个属性

name 指定错误名称。
message 详细说明错误。

如果 try 块中没有发生错误，JavaScript 引擎会忽略 catch 块。

请注意，Web 浏览器可能会在 error 对象中添加更多属性。例如，Firefox 在 error 对象中添加 filename、lineNumber 和 stack 属性。

将可能导致异常的代码放在 try 块中是一个好习惯。

以下流程图说明了 try...catch 语句的工作原理

JavaScript try…catch 语句示例

以下示例使用 try...catch 语句来处理错误

try {
  let result = add(10, 20);
  console.log(result);
} catch (e) {
  console.log({ name: e.name, message: e.message });
}
console.log('Bye');Code language: JavaScript (javascript)

输出

{name: 'TypeError', message: 'add is not a function'}
ByeCode language: CSS (css)

在此示例中，我们调用 add() 函数并将返回值分配给 result 变量。因为 add() 函数不存在，所以 JavaScript 引擎会跳过将结果输出到控制台的语句

console.log(result);Code language: JavaScript (javascript)

并立即执行 catch 块中输出错误名称和消息的语句

console.log({ name: e.name, message: e.message });Code language: CSS (css)

由于我们已经处理了错误，因此 JavaScript 引擎会继续执行最后一个语句

console.log('Bye');Code language: JavaScript (javascript)

忽略 catch 块

以下示例定义了 add() 函数，该函数返回两个参数的总和

const add = (x, y) => x + y;

try {
  let result = add(10, 20);
  console.log(result);
} catch (e) {
  console.log({ name: e.name, message: e.message });
}
console.log('Bye');Code language: JavaScript (javascript)

输出

30
Bye

在此示例中，不会发生错误，因为 add() 函数存在。因此，JavaScript 引擎会跳过 catch 块。

异常标识符

当 try 块中发生异常时，catch 块中的异常变量 (e) 会存储异常对象。

如果您不想使用异常变量，可以像这样省略它

try {
  //...
} catch {
  //...
}
Code language: JavaScript (javascript)

例如，以下示例使用 try…catch 语句，但没有异常变量

const isValidJSON = (str) => {
  try {
    JSON.parse(str);
    return true;
  } catch {
    return false;
  }
};

let valid = isValidJSON(`{"language":"JavaScript"}`);
console.log(valid);Code language: JavaScript (javascript)

工作原理。

首先，定义 isValidJSON() 函数，该函数接受一个字符串，如果该字符串是有效的 JSON，则返回 true，否则返回 false。

为了验证 JSON，isValidJSON() 函数使用 JSON.parse() 方法和 try...catch 语句。

JSON.parse() 方法解析 JSON 字符串并返回一个对象。如果输入字符串不是有效的 JSON，则 JSON.parse() 会抛出异常。

如果没有发生异常，函数会在 try 块中返回 true。否则，它会在 catch 块中返回 false。

其次，调用 isValidJSON() 函数并将 JSON 字符串传递到其中

let valid = isValidJSON(`{"language":"JavaScript"}`);Code language: JavaScript (javascript)

由于输入字符串是有效的 JSON 格式，因此函数返回 true。

第三，将 result 输出到控制台

console.log(valid);Code language: JavaScript (javascript)

总结

使用 try...catch 语句来处理 JavaScript 中的异常。
将可能导致异常的代码放在 try 块中。

本教程对您有帮助吗？