SyntaxError: Invalid or unexpected token in JSON at position x

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 问题描述
- 原因分析
- 解决方案
- - 1. 检查JSON字符串格式
  - 2. 添加异常捕获机制
  - 3. 验证数据源
  - 4. 非空判断
- 实战案例
- 总结

问题描述

在JavaScript开发过程中，开发者经常会遇到 SyntaxError: Invalid or unexpected token in JSON at position x 的错误提示。该错误通常表示在尝试解析JSON字符串时，字符串的格式不符合规范，导致解析失败。

原因分析

JSON字符串格式错误：
- 缺少引号：JSON键和值必须用双引号括起来，否则会导致解析错误。例如：
```
{ name: "John", age: 30 }
```
  正确的格式应该是：
```
{ "name": "John", "age": 30 }
```
- 多余的逗号：在对象或数组中，最后一个元素后添加了多余的逗号，导致解析失败。例如：
```
{ "name": "John", "age": 30 }
```
  正确的格式应该是：
```
{ "name": "John", "age": 30 }
```
- 引号未正确闭合：JSON字符串中的引号未正确闭合，例如：
```
{ "name": "John, "age": 30 }
```
  正确的格式应该是：
```
{ "name": "John", "age": 30 }
```
- 键名未使用双引号括起来：JSON对象中的键名未使用双引号括起来，例如：
```
{ name: "John", age: 30 }
```
  正确的格式应该是：
```
{ "name": "John", "age": 30 }
```
- 值未使用双引号括起来：JSON字符串中的值未使用双引号括起来（如果是字符串类型的值），例如：
```
{ "name": John, "age": 30 }
```
  正确的格式应该是：
```
{ "name": "John", "age": 30 }
```
- 使用了无效的转义字符：JSON字符串中包含了无效的转义字符，例如：
```
{ "name": "John\", "age": 30 }
```
  正确的格式应该是：
```
{ "name": "John\\", "age": 30 }
```
数据源问题：
- 非JSON格式的数据：服务器返回的数据不是有效的JSON格式，而是HTML或其他文本格式。例如：
```
<html><body><script>console.log('Hello World');</script></body>
</html>
```
- 数据传输错误：JSON数据在传输过程中可能被截断或损坏，导致解析失败。
代码逻辑问题：
- 未对数据源进行非空判断：在使用 JSON.parse() 进行转换时，未对数据源进行非空判断，导致空值或格式改变时解析失败。例如：
```
let jsonString = null;
let data = JSON.parse(jsonString); // 报错: SyntaxError: Unexpected token u in JSON at position 0
```

解决方案

1. 检查JSON字符串格式

使用在线JSON验证工具（如JSONLint）检查JSON字符串的格式是否正确。确保所有键值对都用双引号括起来，没有多余的逗号，并且引号正确闭合。

2. 添加异常捕获机制

在解析JSON时，使用 try-catch 语句捕获并处理异常，以便更好地处理错误。例如：

try {const data = JSON.parse(jsonString);
} catch (error) {console.error('JSON解析错误:', error.message);
}

3. 验证数据源

确保从服务器获取的数据是有效的JSON格式。可以在浏览器控制台中打印出响应数据，检查其格式是否正确。例如：

console.log(response);

4. 非空判断

在使用 JSON.parse() 之前，对数据源进行非空判断，避免因空值或格式改变导致的解析错误。例如：

if (jsonString) {let data = JSON.parse(jsonString);
} else {console.error('数据源为空');
}

实战案例

假设有一个函数用于从服务器获取JSON数据并进行解析：

function fetchData() {fetch('/api/data').then(response => response.text()).then(jsonString => {try {const data = JSON.parse(jsonString);console.log(data);} catch (error) {console.error('JSON解析错误:', error.message);}}).catch(error => {console.error('请求失败:', error);});
}