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

總結

SyntaxError: Invalid or unexpected token in JSON at position x 錯誤通常是由于JSON字符串格式錯誤、數據源問題或代碼邏輯問題引起的。通過以下方法可以有效避免該問題：

檢查JSON字符串格式：使用在線工具檢查JSON字符串的格式是否正確。
添加異常捕獲機制：在解析JSON時，使用 try-catch 語句捕獲并處理異常。
驗證數據源：確保從服務器獲取的數據是有效的JSON格式。
非空判斷：在使用 JSON.parse() 之前，對數據源進行非空判斷。

通過這些方法，開發者可以提高代碼的健壯性，減少運行時錯誤，提升應用的穩定性和用戶體驗。建議開發者定期檢查和測試代碼，確保所有JSON解析操作都具備正確的數據源和格式。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/71549.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/71549.shtml
英文地址，請注明出處：http://en.pswp.cn/web/71549.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！