JS SyntaxError: Unexpected token 报错解决

二川bro

已于 2025-02-13 15:03:43 修改

阅读量1.6w

点赞数 17

分类专栏：前端 bug集合文章标签： javascript 开发语言 ecmascript

于 2024-08-21 18:14:08 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34419312/article/details/141400091

版权

前端同时被 2 个专栏收录

91 篇文章

订阅专栏

bug集合

63 篇文章

订阅专栏

JS SyntaxError: Unexpected token 报错解决

在JavaScript开发中，SyntaxError: Unexpected token 是一个常见的错误，它通常表示JavaScript引擎在解析代码时遇到了意料之外的符号。这个错误可能由多种原因引起，包括拼写错误、缺少括号、引号不匹配等。

在这里插入图片描述

一、注意检查

SyntaxError: Unexpected token 错误可能由以下几种常见情况引起：

拼写错误：如将 function 误写为 funciton。
缺少括号：例如，在调用函数时忘记写括号。
引号不匹配：字符串的开头和结尾使用了不同类型的引号。
不恰当的逗号或分号：在不应该出现逗号或分号的地方添加了这些符号。
模板字符串使用不当：如忘记在模板字符串的占位符前加 $ 或 {}。

二、解决思路

遇到 SyntaxError: Unexpected token 错误时，可以采取以下思路进行排查和解决：

仔细检查报错行及其附近的代码：通常错误会在报错行或其前后几行内。
检查引号和括号是否匹配：确保所有的引号和括号都正确配对，并且没有遗漏。
审查拼写和语法：仔细检查代码中的拼写和语法，特别是关键词和函数名。
使用代码编辑器的语法高亮功能：这可以帮助你快速定位语法错误。
分段测试：如果错误难以定位，可以尝试分段测试代码，逐步缩小错误范围。

三、解决方法

针对上述常见报错问题，以下是一些具体的解决方法：

修正拼写错误：确保所有关键词和函数名的拼写正确。

// 错误示例
funciton sayHello() {
    console.log("Hello, world!");
}

// 正确示例
function sayHello() {
    console.log("Hello, world!");
}

添加缺失的括号：确保函数调用时括号完整。

// 错误示例
console.log "Hello, world!";

// 正确示例
console.log("Hello, world!");

匹配引号：确保字符串的开头和结尾使用相同类型的引号。

// 错误示例
var greeting = 'Hello, "world"!;

// 正确示例
var greeting = 'Hello, "world"!';

移除不恰当的逗号或分号：检查并移除代码中不必要的逗号或分号。

// 错误示例
var numbers = [1, 2, 3,];

// 正确示例
var numbers = [1, 2, 3];

正确使用模板字符串：确保模板字符串的占位符格式正确。

// 错误示例
var name = "world";
console.log(`Hello, ${name}!`);

// 注意：这个示例本身是正确的，但如果你看到类似 `Hello, world!`（没有占位符）则可能是错误用法。

四、直击问题——快速排查

1. 确认错误位置

错误信息中通常会显示出错行号。例如：SyntaxError: Unexpected token '{' at line 10。
根据行号，快速定位到可能出错的代码区域。

2. 检查常见语法错误

(1) 缺少括号或引号

确保括号 ()、大括号 {}、方括号 [] 成对出现，没有遗漏。
确保字符串使用正确的引号，例如单引号 ' 或双引号 "，不要混用。

// 错误：引号未闭合
let str = "Hello World;

// 正确：
let str = "Hello World";

(2) 忘记写分号

虽然 JavaScript 是容忍分号的缺失的，但在某些情况下，缺少分号会导致解析错误。

// 错误：缺少分号导致意外解析
let a = 10
let b = 20 let c = a + b;

// 正确：
let a = 10;
let b = 20;
let c = a + b;

(3) 多余或错误的符号

检查是否有多余的符号，例如多余的逗号 ,、问号 ?、冒号 : 等。

// 错误：数组最后多余的逗号
let arr = [1, 2, 3,];

// 正确：
let arr = [1, 2, 3];

3. 检查模板字符串

使用模板字符串时，确保使用的是反引号 `` 而不是单引号 ' 或双引号 "。

// 错误：使用了双引号，而不是反引号
let str = `Hello ${name}";

// 正确：
let str = `Hello ${name}`;

4. 确保变量或函数名合法

JavaScript 的变量和函数名必须以字母、下划线 _ 或 $ 开头，不能以数字开头或包含非法字符。
检查是否使用了保留字（如 class、return）作为变量名。

// 错误：变量名以数字开头
let 1num = 10;

// 正确：
let num1 = 10;

5. 调试嵌套结构

在嵌套结构（如函数、if 语句、for 循环）中，检查是否遗漏了括号 {}、圆括号 ()。

// 错误：if 语句缺少括号
if x > 10 {
  console.log("Hello");
}

// 正确：
if (x > 10) {
  console.log("Hello");
}

6. 逐步缩小问题范围

如果错误行并不明显，可以通过注释掉部分代码，逐步测试，缩小问题范围。
将复杂的表达式拆分成多个简单的语句，更容易找到问题。

7. 利用工具

代码格式化工具：使用代码格式化工具（如 Prettier）自动整理代码格式，可以更容易发现错误。
Lint 工具：使用 Linter 工具（如 ESLint）帮你静态分析代码，提示潜在的语法问题。
在线调试器：将代码粘贴到在线调试器（如 JSFiddle、CodePen、JSBin）中运行，快速定位问题。
浏览器开发者工具：在浏览器控制台中直接运行代码，查看报错信息。

8. 特殊场景

(1) JSON 格式问题

如果处理的是 JSON 数据，确保 JSON 格式正确，例如属性名要使用双引号。

// 错误：JSON 属性名缺少引号
let data = {name: "John", age: 30};

// 正确：
let data = {"name": "John", "age": 30};

(2) 箭头函数语法

使用箭头函数时，确保参数和返回值的写法正确。

// 错误：箭头函数参数缺少括号
let add = x, y => x + y;

// 正确：
let add = (x, y) => x + y;

(3) 模块导入导出

如果使用了 ES6 模块语法，确保导入导出的语法正确。

// 错误：缺少 `{}` 或使用错误的关键词
import myFunction from './utils.js';

// 正确：
import { myFunction } from './utils.js';

9. 总结与预防

写代码时养成良好的习惯：
- 每行代码结束后加分号。
- 合理使用缩进，保持代码整洁。
- 变量命名遵循规范。
定期测试和运行代码：不要等到写完所有代码再运行，而是经常测试小程序段，及时发现错误。
使用现代开发工具：大多数现代代码编辑器（如 VS Code）都会提供语法检测和自动提示功能，合理利用这些工具。

如果仍然无法解决，可以留言，我可以帮你进一步分析！ 😊
也可在下方添加博主好友，欢迎进群交流