SyntaxError：JavaScript 中的意外标记

作者

SyntaxError: JavaScript 中的意外标记

SyntaxError: Unexpected token in JavaScript

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

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

未捕获的语法错误意外标记

script当我们的标签指向一个
html文件而不是 JS 文件时，这里有一个错误是如何引起的例子。

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

  <body>
    <!-- ⛔️ Uncaught SyntaxError: Unexpected token '<' ⛔️ -->
    <script src="index.html"></script>
  </body>
</html>
确保您的script标签指向有效路径并尝试将所有文​​件重命名为仅小写字母。有时文件名包含大写字母或特殊字符会导致错误。

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

索引.html
<!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>

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

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

您还可以打开浏览器的开发人员工具，单击Network选项卡并检查响应。

如果缺少或多余的方括号、圆括号或逗号，也会发生“未捕获的语法错误：意外的标记”错误。

索引.js
// ⛔️ SyntaxError: Unexpected token '}'
function sum(a, b) {
  return a + b;
}}
第三行多了一个花括号，导致错误。

意想不到的标记大括号

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

或者，您也可以打开浏览器的控制台并查看行号。它看起来像index.js:4. 这意味着错误发生在index.js文件行上4。

这些语法错误很难发现，但一般的经验法则是：

  • 如果您收到“Uncaught SyntaxError: Unexpected token ‘<‘”（注意<），您可能正在尝试阅读一些以 开头的 HTML 代码<。
  • 如果您的错误消息包含花括号、圆括号、逗号、冒号等，您很可能有一个SyntaxError，您的代码中有一个额外或缺失的字符。
错误消息意味着需要一个字符，但提供了另一个字符。这通常是由于拼写错误。

这是另一个例子。

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

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

如果您有额外的逗号，也会发生这种情况。

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

然而，方括号和圆括号是最难追踪的语法错误。

结论

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

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

–

发表评论