SyntaxError: Invalid or unexpected token in JSON at position x

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

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

问题描述

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

原因分析

JSON字符串格式错误：
- 缺少引号 ：JSON键和值必须用双引号括起来，否则会导致解析错误。例如：
  json 复制代码
```
{ name: "John", age: 30 }
```
  正确的格式应该是：
  json 复制代码
```
{ "name": "John", "age": 30 }
```
- 多余的逗号 ：在对象或数组中，最后一个元素后添加了多余的逗号，导致解析失败。例如：
  json 复制代码
```
{ "name": "John", "age": 30 }
```
  正确的格式应该是：
  json 复制代码
```
{ "name": "John", "age": 30 }
```
- 引号未正确闭合 ：JSON字符串中的引号未正确闭合，例如：
  json 复制代码
```
{ "name": "John, "age": 30 }
```
  正确的格式应该是：
  json 复制代码
```
{ "name": "John", "age": 30 }
```
- 键名未使用双引号括起来 ：JSON对象中的键名未使用双引号括起来，例如：
  json 复制代码
```
{ name: "John", age: 30 }
```
  正确的格式应该是：
  json 复制代码
```
{ "name": "John", "age": 30 }
```
- 值未使用双引号括起来 ：JSON字符串中的值未使用双引号括起来（如果是字符串类型的值），例如：
  json 复制代码
```
{ "name": John, "age": 30 }
```
  正确的格式应该是：
  json 复制代码
```
{ "name": "John", "age": 30 }
```
- 使用了无效的转义字符 ：JSON字符串中包含了无效的转义字符，例如：
  json 复制代码
```
{ "name": "John\", "age": 30 }
```
  正确的格式应该是：
  json 复制代码
```
{ "name": "John\\", "age": 30 }
```
数据源问题：
- 非JSON格式的数据 ：服务器返回的数据不是有效的JSON格式，而是HTML或其他文本格式。例如：
  html 复制代码
```
<html>
  <body>
    <script>console.log('Hello World');</script>
  </body>
</html>
```
- 数据传输错误：JSON数据在传输过程中可能被截断或损坏，导致解析失败。
代码逻辑问题：
- 未对数据源进行非空判断 ：在使用 JSON.parse() 进行转换时，未对数据源进行非空判断，导致空值或格式改变时解析失败。例如：
  javascript 复制代码
```
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 语句捕获并处理异常，以便更好地处理错误。例如：

javascript 复制代码

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

3. 验证数据源

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

javascript 复制代码

console.log(response);

4. 非空判断

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

javascript 复制代码

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

实战案例

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

javascript 复制代码

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

总结

SyntaxError: Invalid or unexpected token in JSON at position x 错误通常是由于JSON字符串格式错误、数据源问题或代码逻辑问题引起的。通过以下方法可以有效避免该问题：

检查JSON字符串格式：使用在线工具检查JSON字符串的格式是否正确。
添加异常捕获机制 ：在解析JSON时，使用 try-catch 语句捕获并处理异常。
验证数据源：确保从服务器获取的数据是有效的JSON格式。
非空判断 ：在使用 JSON.parse() 之前，对数据源进行非空判断。

通过这些方法，开发者可以提高代码的健壮性，减少运行时错误，提升应用的稳定性和用户体验。建议开发者定期检查和测试代码，确保所有JSON解析操作都具备正确的数据源和格式。