JavaScript SyntaxError: Unexpected token 错误

“Uncaught SyntaxError: Unexpected token”的出现有多种原因:

  1. 具有指向 HTML 文件而不是 JS 文件的 <script /> 标记。
  2. 从需要 JSON 的服务器获取 HTML 响应。
  3. 有一个指向不正确路径的 <script /> 标签。
  4. 代码中缺少或多余的括号、括号或逗号。
  5. 忘记关闭脚本标签。

这是一个如何导致错误的示例,当我们的脚本标签指向一个 html 文件而不是 JS 文件时。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- ⛔️ Uncaught SyntaxError: Unexpected token '<' ⛔️ -->
    <script src="index.html"></script>
  </body>
</html>

JavaScript SyntaxError: Unexpected token 错误

该错误的另一个常见原因是忘记关闭脚本标签。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <!-- 👇️ Forgot to close the script tag  -->
    <script
      console.log("Uncaught SyntaxError: Unexpected token '<'");
    </script>
  </head>

  <body></body>
</html>

如果我们在尝试解析 JSON 数据时向服务器发出 HTTP 请求并返回 HTML 响应,也会导致该错误。

要解决此问题,请使用 console.log 记录我们从服务器获得的响应,并确保它是有效的 JSON 字符串且不包含任何 HTML 标记。

我们还可以打开浏览器的开发人员工具,单击网络选项卡并检查响应。

如果我们缺少或多余的括号、括号或逗号,也会出现“Uncaught SyntaxError: Unexpected token”错误。

// ⛔️ SyntaxError: Unexpected token '}'
function sum(a, b) {
  return a + b;
}}

第三行有一个额外的大括号,这会导致错误。

我们可以将代码粘贴到在线语法验证器中。 验证器应该能够告诉我们错误发生在哪一行。

这些语法错误很难找到,但一般的经验法则是:

如果我们的错误消息包含大括号、括号、逗号、冒号等,则我们很可能遇到 SyntaxError,即代码中有多余或缺少的字符。

错误消息意味着需要一个字符,但提供了另一个字符。 这通常是由于拼写错误。

这是另一个例子。

// ⛔️ Uncaught SyntaxError: Unexpected token ':'
const obj = {
  name:: "Tom",
}

我们用 2 个冒号而不是 1 分隔对象中的键和值,导致错误。

如果有额外的逗号,也可能发生这种情况。

// ⛔️ Uncaught SyntaxError: Unexpected token ','
const obj = {
  name: 'Tom',,
}

然而,方括号和圆括号是最难追踪的 SyntaxErrors。


结论

要解决“Uncaught SyntaxError: Unexpected token”错误,请确保:

  1. 我们没有指向 HTML 文件而不是 JS 文件的 <script /> 标记。
  2. 我们不是从服务器请求 HTML 文件,而是请求 JSON。
  3. 我们没有指向错误路径的 <script /> 标记。
  4. 我们的代码中没有丢失或多余的括号、括号或逗号。
  5. 我们没有忘记关闭 <script 标记。