当前位置：首页 > news >正文

SyntaxError: Invalid or unexpected token in JSON at position x

news 2026/2/10 5:22:28

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过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);});
}

总结

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

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

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

SyntaxError: Invalid or unexpected token in JSON at position x

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

编程日记 2025/3/8 6:03:23

Uncaught TypeError: Cannot read properties of undefined (reading ‘xxx‘)

编程日记 2025/3/8 6:02:22

Nginx 跨域配置详细讲解

一、跨域请求概述跨域资源共享（CORS，Cross-Origin Resource Sharing）是一种机制，它使用额外的HTTP头部来告诉浏览器让运行在一个origin（域）上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资…...

编程日记 2025/3/8 6:01:21

前端开发基石：HTML语义化深度解析与实践指南

一、语义化设计的本质价值 1.1 从文档结构到信息表达在Web诞生初期（1991年），HTML仅包含18个标签用于学术文档展示。经过30年发展，HTML5已拥有超过110个标签，其中语义化标签占比提升至60%。这种演进背后是互联网从简…...

编程日记 2025/3/8 6:00:20

mongodb安装教程以及mongodb的使用

MongoDB是由C语言编写的一种面向文档的NoSQL数据库，旨在为WEB应用提供可扩展的高性能数据存储解决方案。与传统的关系型数据库（如 MySQL 或 PostgreSQL）不同，MongoDB 存储数据的方式是以 BSON（类似于 JSON 的二进制格式…...

编程日记 2025/3/8 5:58:17

C# 中的多线程同步机制：lock、Monitor 和 Mutex 用法详解

在多线程编程中，线程同步是确保多个线程安全地访问共享资源的关键技术。C# 提供了几种常用的同步机制，其中 lock、Monitor 和 Mutex 是最常用的同步工具。本文将全面介绍这三种同步机制的用法、优缺点以及适用场景，帮助开发者在多线程开发中做…...

编程日记 2025/3/8 5:57:16

【通义万相】蓝耘智算 | 开源视频生成新纪元：通义万相2.1模型部署与测评

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈人工智能与大模型应用 ⌋ ⌋ ⌋ 人工智能（AI）通过算法模拟人类智能，利用机器学习、深度学习等技术驱动医疗、金融等领域的智能化。大模型是千亿参数的深度神经网络（如ChatGPT&…...

编程日记 2025/3/8 5:55:13

期权帮|中证1000股指期权交割结算价怎么算？

期权帮锦鲤三三每日分享期权知识，帮助期权新手及时有效地掌握即市趋势与新资讯！ 中证1000股指期权交割结算价怎么算？ 一、按照最后交易日结算价： （1）计算方法：最后交易日标的指数&#xff08…...

编程日记 2025/3/8 5:53:11

Python 面向对象高级编程-定制类

目录 __str__ __iter__ __getitem__ __getattr__ __call__ 小结看到类似__slots__这种形如__xxx__的变量或者函数名就要注意，这些在Python中是有特殊用途的。 __slots__我们已经知道怎么用了，__len__()方法我们也知道是为了能让class作用于len()…...

编程日记 2025/3/8 5:52:10

qt creator示例空白

通常情况下，进入qt后，就会弹出以下窗口： 但如果出现示例空白，那可能是因为 Qt Creator 无法正确识别 Qt 的安装路径或配置。解决： 点击“添加”： 然后跳转到你的qmake.exe的目录，例如我的qmak…...

编程日记 2025/3/8 5:51:09

MyBatis-Plus 与 Spring Boot 的最佳实践

在现代 Java 开发中，MyBatis-Plus 和 Spring Boot 的结合已经成为了一种非常流行的技术栈。MyBatis-Plus 是 MyBatis 的增强工具，提供了许多便捷的功能，而 Spring Boot 则简化了 Spring 应用的开发流程。本文将探讨如何将 MyBatis-Plus 与 Spring Boot 进行整合，并分享一些…...

编程日记 2025/3/8 5:50:08

TDengine 中的标签索引

简介本节说明 TDengine 的索引机制。在 TDengine 3.0.3.0 版本之前（不含），默认在第一列 TAG 上建立索引，但不支持给其它列动态添加索引。从 3.0.3.0 版本开始，可以动态地为其它 TAG 列添加索引。对于第一个 TAG 列上…...

编程日记 2025/3/8 5:49:06

工业自动化核心：BM100 信号隔离器的强大力量

安科瑞吕梦怡 18706162527 BM100系列信号隔离器可以对电流、电压等电量参数或温度、电阻等非电量参数进行快速精确测量，经隔离转换成标准的模拟信号输出。既可以直接与指针表、数显表相接，也可以与自控仪表（如PLC）、各种 A/D …...

编程日记 2025/3/8 5:48:05

Ascend开发板镜像烧录、联网、其他设备访问

Ascend开发板镜像烧录、联网、外部访问 1.1 Ascend开发板制卡方式一：镜像烧录 SD卡插入读卡器，读卡器插入PC的USB接口烧录镜像前，先格式化一下SD卡参考教程：格式化SD卡、修复烧写系统失败的SD卡 WinR，输入cmd DIS…...

编程日记 2025/3/8 5:47:04

Llama-Factory框架下的Meta-Llama-3-8B-Instruct模型微调

目录引言 Llama - Factory 训练框架简介： Meta - Llama - 3 - 8B - Instruct 模型概述： Lora 方法原理及优势： 原理优势环境准备: 部署环境测试： 数据准备： 模型准备： 模型配置与训练&#xff1…...

编程日记 2025/3/8 5:45:02

MySQL进阶-分析查询语句EXPLAIN

概述能做什么？ 表的读取顺序数据读取操作的操作类型哪些索引可以使用哪些索引被实际使用表之间的引用每张表有多少行被优化器查询官网介绍 https://dev.mysql.com/doc/refman/5.7/en/explain-output.html https://dev.mysql.com/doc/refman/8.0/…...

编程日记 2025/3/8 5:44:00

Python 高级编程与实战：构建数据可视化应用

在前几篇文章中，我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧、数据科学、机器学习、Web 开发、API 设计、网络编程、异步IO、并发编程、设计模式与软件架构、性能优化与调试技巧、分布式系统、微服务架构、自动化测试框架以及 RESTf…...

编程日记 2025/3/8 5:42:59

学习threejs，Animation、Core、CustomBlendingEquation、Renderer常量汇总

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️Animation常量汇总1.1.1 循…...

编程日记 2025/3/8 5:41:58

Java直通车系列14【Spring MVC】（深入学习 Controller 编写）

目录基本概念编写 Controller 的步骤和要点 1. 定义 Controller 类 2. 映射请求 3. 处理请求参数 4. 调用业务逻辑 5. 返回响应场景示例 1. 简单的 Hello World 示例 2. 处理路径变量和请求参数 3. 处理表单提交 4. 处理 JSON 数据 5. 异常处理基本概念 Cont…...

编程日记 2025/3/8 5:40:57

【蓝桥杯集训·每日一题2025】 AcWing 5539. 牛奶交换 python

AcWing 5539. 牛奶交换 Week 3 3月6日题目描述农夫约翰的 N N N 头奶牛排成一圈，使得对于 1 , 2 , … , N − 1 1,2,…,N−1 1,2,…,N−1 中的每个 i i i，奶牛 i i i 右边的奶牛是奶牛 i 1 i1 i1，而奶牛 N N N 右边的奶牛是奶牛 …...

编程日记 2025/3/8 5:39:56

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...

编程新知 2026/1/23 12:16:56

循环冗余码校验CRC码算法步骤+详细实例计算

通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）&#xff0…...

编程新知 2026/2/9 21:57:29

cf2117E

原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置或，也可以在执行上述操作前执行一次删除任意和。求…...

编程新知 2026/2/4 15:29:40

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/29 17:06:33

Python如何给视频添加音频和字幕

在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。环境准备在开始之前，需要安装以下Python库：…...

编程新知 2025/9/3 4:12:17

【HTTP三个基础问题】

面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...

编程新知 2025/12/10 6:18:55

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2026/1/25 14:40:59

【网络安全】开源系统getshell漏洞挖掘

审计过程： 在入口文件admin/index.php中： 用户可以通过m,c,a等参数控制加载的文件和方法，在app/system/entrance.php中存在重点代码： 当M_TYPE system并且M_MODULE include时，会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/31 2:59:25

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象： android studio报错： [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决： 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42