迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

JavaScript SyntaxError: Unexpected token 错误

作者:迹忆客 最近更新:2022/11/09 浏览次数:

“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;
}}

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

JavaScript SyntaxError- Unexpected token

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

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

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

如果我们收到 Uncaught SyntaxError: Unexpected token '<'(注意 <),我们可能正在尝试阅读一些以 < 开头的 HTML 代码。

如果我们的错误消息包含大括号、括号、逗号、冒号等,则我们很可能遇到 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 标记。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便