如何在 JavaScript 中捕获语法错误？

在本教程中，我们将学习如何在 JavaScript 中捕获语法错误。

在 JavaScript 中，如果我们在代码中犯任何错误，就会出现错误。例如，ReferenceError，即当我们调用代码中不存在的变量时。

TypeError，即当我们尝试更改不可变的值或尝试以不合适的方式使用变量时。

SyntaxError，即当我们尝试解释无效代码时。我们将在下面详细了解此错误。

什么是语法错误？

当我们的代码中存在故障时，会抛出语法错误。此错误发生在尝试解释语义上无效的代码时。如果我们创建编译器无法解释的无效代码。

语法错误的原因

它是由代码中不正确的预定义语法引起的。例如，

  • 缺少开始或结束括号、方括号或花括号。

  • 拼写错误的关键字，例如变量名或函数名。

这些错误在解析或解释代码时检测到。这些错误将显示在浏览器开发工具（如 Chrome Devtools）的控制台中。JS 错误堆栈树将帮助我们找到错误，其中包含错误代码行的描述以及错误说明。

示例

让我们看一个例子

<!DOCTYPE html>
<html>
<body>
   <h1>Displaying syntaxError</h1>
   <p id="result">
   </p>
   <script>
      var message = "Hello world!";
      document.getElementById("result).innerHTML = message;
   </script>
</body>
</html>

在这里，我们可以看到我们错过了“result”后面的双引号的关闭。这导致了 SyntaxError。浏览器开发工具（如控制台）将显示“Uncaught SyntaxError: Invalid or unexpected token”。

处理 SyntaxError

由于 SyntaxError 在代码被解析时抛出，因此无法使用 try-catch 块在 js 中处理它们。要处理 SyntaxError，我们可以使用 window.onerror() 函数。

当我们的代码中出现未捕获的异常或编译错误时，将调用 window.onerror()，并提供有关错误的一些方法信息，从而为错误处理提供了更强大的机会。

何时使用 window.onerror()

通常，当我们在代码中遇到任何错误时，都会在浏览器控制台中检查抛出的错误。当开发包含大量 JS 代码的复杂 Web 应用程序时，这可能会给开发人员带来麻烦。为了以实用的方式解决此问题，window.onerror 将允许我们以方便的方式报告/检查错误。

此函数接受的参数为

  • message - 错误消息，即 DOMString

  • url - 包含错误文件的 URL，即 DOMString

  • linenumber - 发生错误的行号，即长整型

要使用此函数，我们需要在单独的标签中定义 onerror 函数，而不是在错误发生的位置。

示例

让我们看一个例子

<!DOCTYPE html>
<html>
<body>
   <h2>Displying syntaxError using onerror()</h2>
   <p id="result">
   </p>
   <script>
      window.onerror = function(message, url, linenumber) {
         document.getElementById('result').innerHTML = 'Error - ' + message + 'on line ' + linenumber + ' for ' + url;
      }
   </script>
   <script>
      var message = "Hello World!;
   </script>
</body>
</html>

这里，我在输出中删除了 URL。在第 13 行，我们错过了关闭双引号。我们也可以将此函数与错误消息参数一起使用。例如，

示例

<!DOCTYPE html>
<html>
<body>
   <h2>Displaying syntaxError using onerror()</h2>
   <p id="result"></p>
   <script>
      window.onerror = function(e) {
         document.getElementById('result').innerHTML = "Error is - " + e;
      };
   </script>
   <script>
      var message = "Hello World!;
   </script>
</body>
</html>

请注意，onerror() 函数应该写在单独的脚本标签中。在这里，无需使用控制台，我们就可以注意到代码失败的原因。这有助于向程序员传达代码中存在应修复的语法错误。通过检查代码中的所有表达式在语义上是否正确，可以最大程度地减少此错误。

希望本教程能让你了解 SyntaxError 以及如何处理 SyntaxError。

更新于：2022 年 12 月 8 日

1K+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告