JavaScript SyntaxError: Unexpected token 错误
“Uncaught SyntaxError: Unexpected token”的出现有多种原因:
-
具有指向 HTML 文件而不是 JS 文件的
<script />
标记。 - 从需要 JSON 的服务器获取 HTML 响应。
-
有一个指向不正确路径的
<script />
标签。 - 代码中缺少或多余的括号、括号或逗号。
- 忘记关闭脚本标签。
这是一个如何导致错误的示例,当我们的脚本标签指向一个 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>
确保我们的脚本标签指向有效路径,并尝试将所有文件仅重命名为小写字母。 如果文件名包含大写字母或特殊字符,有时会导致错误。
该错误的另一个常见原因是忘记关闭脚本标签。
<!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;
}}
第三行有一个额外的大括号,这会导致错误。
我们可以将代码粘贴到在线语法验证器中。 验证器应该能够告诉我们错误发生在哪一行。
或者,我们也可以打开浏览器的控制台并查看行号。 它看起来像 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”错误,请确保:
-
我们没有指向 HTML 文件而不是 JS 文件的
<script />
标记。 - 我们不是从服务器请求 HTML 文件,而是请求 JSON。
-
我们没有指向错误路径的
<script />
标记。 - 我们的代码中没有丢失或多余的括号、括号或逗号。
-
我们没有忘记关闭
<script
标记。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间:2023/04/28 浏览次数:146 分类:CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间:2023/03/29 浏览次数:69 分类:PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间:2023/03/24 浏览次数:93 分类:JavaScript
-
在本文中,我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间:2023/03/24 浏览次数:141 分类:JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法