如何捕获 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。"未捕获的 SyntaxError:无效或意外的令牌" 将显示在浏览器开发工具(如控制台)中。
处理 SyntaxError
无法使用 try-catch 块在 js 中处理 SyntaxError,因为它们是在解析代码时抛出的错误。要处理 SyntaxError,我们可以使用 window.onerror() 函数。
当我们的代码中出现未捕获的异常或编译错误时,将调用 window.onerror() 并提供一些有关错误的方法信息,从而为错误处理提供更大的机会。
何时使用 window.onerror()
通常,当我们的代码中出现任何错误时,我们会在浏览器控制台中检查抛出了哪些错误。当开发人员开发包含大量JS 代码。为了以实用的方式处理这个问题,window.onerror 将允许我们以方便的方式报告/检查错误。
此函数接受的参数是
message - 错误消息,即 DOMString
url - 包含错误的文件的 URL,即 DOMString
linenumber - 发生错误的行号,即 long
要使用此功能,我们需要在单独的标记中定义 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 的知识。