ทำไม JSON.parse ถึงบอก "Unexpected token"

นี่คือการไล่ Unexpected token ของ JSON.parse: ความหมายของข้อผิดพลาด วิธีอ่าน position และจะทำอย่างไรเมื่อตัวเนื้อเป็น HTML ลูกน้ำท้าย อัญประกาศ และ Unexpected end แบบกว้างอยู่ที่ ข้อผิดพลาด JSON ที่พบบ่อย: ลูกน้ำท้าย, เครื่องหมายคำพูด และ Unexpected token

“Unexpected token” ใน JSON.parse() หมายความว่าอะไร

JSON.parse() ต้องการไวยากรณ์ JSON ตัวอักษรผิดกฎหมายที่ตำแหน่งปัจจุบันโยน SyntaxError {“name”:“Alex”,} ไม่ถูกต้อง: หลังลูกน้ำนั้นอ็อบเจ็กต์จบไม่ได้ ข้อความและ position ยังต่างกันตามรันไทม์

JSON.parse() โยนข้อผิดพลาดอะไร

JSON ที่ไม่ถูกต้องโดยทั่วไปโยน SyntaxError บันทึก error.name เพื่อยืนยันชนิด อย่าฮาร์ดโค้ด error.message ทั้งข้อความ: เอนจินและรุ่นใช้ถ้อยคำต่างกัน

try {
  JSON.parse('{"name":"Alex",}');
} catch (error) {
  console.log(error.name);
  // SyntaxError
}

1. ใช้อัญประกาศเดี่ยวแทนอัญประกาศคู่

{‘name’:‘Alex’} ไม่ใช่ JSON ที่ถูกต้อง {“name”:“Alex”} ถูกต้อง สตริง JSON และชื่อสมาชิกอ็อบเจ็กต์ใช้อัญประกาศคู่ อ็อบเจ็กต์ลิเทอรัลของ JavaScript เช่น const user = { name: ‘Alex’ } อาจเป็น JavaScript ที่ถูกกฎหมาย แต่ยังไม่ใช่ข้อความ JSON

ไม่ถูกต้อง

{'name':'Alex'}

ถูกต้อง

{"name":"Alex"}

2. ลูกน้ำท้าย

ลูกน้ำหลังคุณสมบัติหรือรายการอาร์เรย์สุดท้ายไม่ถูกต้องใน JSON มาตรฐาน {“name”:“Alex”,“age”:30,} และ [1, 2, 3,] ทั้งคู่ล้มเหลว ถือเป็นสาเหตุ Unexpected token อย่างหนึ่ง ข้อผิดพลาด JSON ที่พบบ่อย: ลูกน้ำท้าย, เครื่องหมายคำพูด และ Unexpected token ลงลึกเรื่องลูกน้ำท้ายมากกว่า

ไม่ถูกต้อง

{
  "name": "Alex",
  "age": 30,
}

ถูกต้อง

{
  "name": "Alex",
  "age": 30
}

[1, 2, 3,]

3. ชื่อคุณสมบัติไม่มีเครื่องหมายคำพูด

{ name: “Alex” } อาจเป็นอ็อบเจ็กต์ลิเทอรัลของ JavaScript ใน JSON ชื่อสมาชิกอ็อบเจ็กต์เป็นสตริงและต้องมีอัญประกาศคู่: {“name”:“Alex”}

ไม่ถูกต้อง

{
  name: "Alex"
}

ถูกต้อง

{
  "name": "Alex"
}

4. การ escape สตริงที่ไม่ถูกต้อง

ในข้อความ JSON แบ็กสแลชเริ่ม escape พาธดิบอย่าง C:\Users\Alex ไม่ถูกต้องเพราะ \U ไม่ใช่ escape ที่ถูกกฎหมาย ทำให้แบ็กสแลชเป็นสองตัว อย่าผสมการ escape สตริงของภาษาโฮสต์กับการ escape ของ JSON ข้อผิดพลาด JSON ที่พบบ่อย: ลูกน้ำท้าย, เครื่องหมายคำพูด และ Unexpected token อธิบายเรื่องนี้ลึกกว่า

ไม่ถูกต้อง

{"file":"C:\Users\Alex"}

ถูกต้อง

{"file":"C:\\Users\\Alex"}

5. ข้อความเกินก่อนหรือหลัง JSON

JSON.parse คาดหวังค่า JSON หนึ่งค่า คำนำอย่าง Success: ก่อน {“ok”:true} หรือคำต่อท้ายอย่าง done หลังมัน ทำให้ทั้งสตริงไม่ถูกต้อง ช่องว่างที่ไม่มีนัยรอบค่า JSON เดียวได้รับอนุญาต JSON ไม่ได้ห้ามมีช่องว่างก่อนหรือหลังค่า

Success:
{"ok":true}

{"ok":true}
done

6. แยกวิเคราะห์ HTML แทน JSON

การเรียก response.json() บนหน้า HTML เป็นกรณี Unexpected token ที่พบบ่อย เอนด์พอยต์ผิด หน้า HTML 404 หรือ 500 การเปลี่ยนเส้นทางล็อกอิน ตัวเนื้อพร็อกซี และหน้าสำรอง มักเริ่มด้วยมาร์กอัป “Unexpected token < หมายถึง HTML เสมอ” แรงเกินไป: < เป็นคำใบ้ ไม่ใช่หลักฐาน

fetch('/api/data')
  .then(response => response.json())

“Unexpected token <” มักหมายความว่าอะไร

ค่า JSON โดยปกติไม่เริ่มด้วย < ถ้าตัวเนื้อเริ่มด้วย หรือ < อาจเป็นตัวอักษรผิดกฎหมายตัวแรก ขณะไล่ในเครื่อง ให้ตรวจสถานะ HTTP, Content-Type และตัวเนื้อดิบ ถ้อยคำของเอนจินยังต่างกัน

ตรวจการตอบก่อนแยกวิเคราะห์

ตัวเนื้อของ fetch บริโภคได้ครั้งเดียว ขณะไล่ในเครื่อง ให้อ่าน text() ก่อน ดูคำนำสั้น ๆ แล้ว JSON.parse สตริงเดียวกัน อย่าเรียก response.json() แล้วตามด้วย response.text() บนการตอบเดียวกัน อย่าบันทึกเพย์โหลดที่อ่อนไหวในสภาพแวดล้อมจริงเป็นค่าเริ่มต้น

const response = await fetch(url);
const text = await response.text();

console.log(response.status);
console.log(response.headers.get("content-type"));
console.log(text.slice(0, 200));

try {
  const data = JSON.parse(text);
  console.log(data);
} catch (error) {
  console.error("Invalid JSON:", error);
}

“at Position 123” หมายความว่าอะไร

เอนจินบางตัวรายงาน position บรรทัด หรือคอลัมน์ มองใกล้ ๆ หาอัญประกาศ ลูกน้ำ วงเล็บ หรือ escape ที่เสีย ดัชนีนั้นคือจุดที่การแยกวิเคราะห์สังเกตปัญหา สาเหตุจริงอาจอยู่ก่อนหน้า ไม่ได้รับประกันว่าเป็นตัวอักษรที่เสียพอดี

Unexpected token กับ Unexpected end

Unexpected token หมายความว่าพาร์เซอร์เจอตัวอักษรที่ไม่คาด Unexpected end อาจปรากฏเมื่ออินพุตหยุดก่อนค่าจะครบ เช่น {“name”:“Alex” ที่ไม่มีวงเล็บปิด ถ้อยคำที่แน่นอนขึ้นกับเอนจิน ข้อผิดพลาด JSON ที่พบบ่อย: ลูกน้ำท้าย, เครื่องหมายคำพูด และ Unexpected token ครอบคลุม JSON ที่ไม่สมบูรณ์กว้างกว่า

{"name":"Alex"

JSON ไม่เหมือนอ็อบเจ็กต์ลิเทอรัลของ JavaScript

JSON เป็นรูปแบบข้อมูล อ็อบเจ็กต์ลิเทอรัลของ JavaScript คือวากยสัมพันธ์ JavaScript อ็อบเจ็กต์ JS ที่มีคีย์ไม่มีเครื่องหมายคำพูด อัญประกาศเดี่ยว และลูกน้ำท้าย ไม่ใช่ข้อความ JSON ที่ถูกต้อง JSON.parse ไม่สามารถแยกวิเคราะห์อ็อบเจ็กต์ลิเทอรัลของ JavaScript อย่างปลอดภัย

const data = {
  name: 'Alex',
  active: true,
};

{
  "name": "Alex",
  "active": true
}

JSON มีความคิดเห็นได้หรือไม่

JSON มาตรฐานไม่รองรับความคิดเห็น บรรทัด // ในอ็อบเจ็กต์ไม่ถูกต้อง JSON5 และส่วนขยายคล้ายกันเป็นรูปแบบอื่น จัดรูปแบบและเปรียบเทียบ JSON ตรวจ JSON มาตรฐานด้วย JSON.parse และไม่ถือ JSON5 เป็น JSON

{
  // user name
  "name": "Alex"
}

undefined, NaN และ Infinity เป็น JSON ที่ถูกต้องหรือไม่

ไม่ ค่า JSON คือ object, array, string, number, true, false และ null undefined, NaN และ Infinity ไม่ใช่ ค่าระดับบนสุดไม่จำเป็นต้องเป็นอ็อบเจ็กต์หรืออาร์เรย์: true, 123, “hello” และ null เป็น JSON ที่ถูกต้อง

{"a":undefined}
{"a":NaN}
{"a":Infinity}

true
123
"hello"
null

วิธีแก้ข้อผิดพลาด Unexpected token ทีละขั้น

จัดการที่แหล่ง ไม่ใช่ที่สตริงข้อผิดพลาด:

1. ยืนยันว่าอินพุตเป็น JSON จริง ไม่ใช่ HTML บันทึก หรือ JavaScript
2. ดูตัวอักษรแรกของอินพุตดิบ
3. ถ้ามาจาก API ให้ตรวจสถานะ HTTP และ Content-Type ทั้ง 200 และ application/json ไม่ได้รับประกัน JSON ที่ถูกต้อง
4. ตรวจไวยากรณ์ในพาร์เซอร์ JSON
5. ใช้ position บรรทัด หรือคอลัมน์ที่รายงานเป็นคำใบ้ ไม่ใช่รากสาเหตุที่รับประกัน
6. ตรวจอัญประกาศ ลูกน้ำ ปีกกา วงเล็บเหลี่ยม และ escape ใกล้บริเวณนั้น
7. เทียบกับสำเนาที่จัดรูปแบบและตรวจแล้ว
8. แก้ตัวทำให้เป็นอนุกรมหรือเอนด์พอยต์ อย่าลบโทเค็นที่รายงานแบบสุ่ม

ใช้ JSON.stringify() เมื่อสร้าง JSON ใน JavaScript

เลือก JSON.stringify มากกว่าการต่อสตริงด้วยมือ มันปล่อยข้อความ JSON ที่ถูกต้องสำหรับค่าที่ทำให้เป็นอนุกรม มันไม่รักษาทุกค่า JavaScript: undefined ฟังก์ชัน และซิมโบลมีพฤติกรรมพิเศษ รายละเอียดนั้นอยู่นอกขอบเขตที่นี่

const data = {
  name: "Alex",
  active: true
};
const json = JSON.stringify(data);
// {"name":"Alex","active":true}

JSON ที่ไม่ถูกต้องกับการแก้จริง

คู่เหล่านี้ตรวจด้วย JSON.parse แล้ว สำหรับ HTML การแก้คือการตอบ ไม่ใช่การแก้ไวยากรณ์

ปัญหา	ไม่ถูกต้อง	วิธีแก้
อัญประกาศเดี่ยว	{'a':1}	{"a":1}
ลูกน้ำท้าย	{"a":1,}	{"a":1}
คีย์ไม่มีเครื่องหมายคำพูด	{a:1}	{"a":1}
undefined	{"a":undefined}	{"a":null}
ตัวเนื้อ HTML	<html>...	ตรวจเอนด์พอยต์และการตอบดิบ อย่าแก้ HTML ให้เป็น JSON

แนวตัดสินใจ Unexpected token อย่างง่าย

ถ้า JSON.parse ล้มเหลว ให้ตัดสินก่อนว่าคุณมี JSON หรือไม่ ก่อนจะเขียนอัญประกาศใหม่

• JSON.parse ล้มเหลว
• ↓
• จาก API? ตรวจสถานะ Content-Type และตัวเนื้อดิบ
• เริ่มด้วย JSON หรือไม่ ถ้าไม่ ให้แก้แหล่งหรือเอนด์พอยต์
• ถ้าใช่ ตรวจอัญประกาศ ลูกน้ำ ปีกกา วงเล็บเหลี่ยม escape ค่าที่ไม่รองรับ
• ใช้ position ที่รายงานเป็นคำใบ้
• ↓
• แก้แหล่ง แล้วแยกวิเคราะห์อีกครั้ง

ตรวจ JSON ก่อนแยกวิเคราะห์หรือใช้งาน

NEXNARA จัดรูปแบบและเปรียบเทียบ JSON ตรวจ JSON ในเบราว์เซอร์ด้วย JSON.parse ไม่ใช่ eval

ตรวจ จัดให้อ่านง่ายด้วยช่องว่าง 2 ช่อง 4 ช่อง หรือแท็บ minify คัดลอก ดาวน์โหลด และอัปโหลด .json JSON Diff ครอบคลุมอ็อบเจ็กต์และอาร์เรย์ซ้อน พาธ สรุป ตัวกรอง และการสลับ หลังแยกวิเคราะห์ สำเนาที่จัดรูปแบบกับที่ minify ของข้อมูลเดียวกันเปรียบเทียบเท่ากัน คีย์อ็อบเจ็กต์เปรียบเทียบตามชื่อ

ข้อความใหญ่กว่า 5 MB อาจรู้สึกช้า ข้อความใหญ่กว่า 15 MB จะไม่ถูกประมวลผลในเบราว์เซอร์

การตรวจและการจัดรูปแบบ JSON เกิดในเบราว์เซอร์ของคุณ เครื่องมือนี้ไม่ส่ง JSON ไปเซิร์ฟเวอร์ NEXNARA โฆษณาและฟีเจอร์ไซต์อื่นยังใช้เครือข่าย

วางสตริงที่ล้มเหลวลง จัดรูปแบบและเปรียบเทียบ JSON แล้วอ่านตัวอักษรแรกก่อนเขียนอัญประกาศใหม่

FAQ

ทำไม JSON.parse ถึงบอก Unexpected token

ข้อความไม่ใช่ JSON ที่ถูกต้อง ณ จุดที่พาร์เซอร์หยุด สาเหตุทั่วไปคืออัญประกาศ ลูกน้ำ ข้อความเกิน หรือตัวเนื้อที่ไม่ใช่ JSON เช่น HTML

Unexpected token < ใน JSON หมายความว่าอะไร

ตัวอักษรผิดกฎหมายตัวแรกอาจเป็น < มักชี้ไปหน้า HTML แต่ไม่ใช่หลักฐานว่าเป็น 404 หรือเป็น HTML ในทุกกรณี ตรวจสถานะ Content-Type และตัวเนื้อดิบ

จะหาตำแหน่งข้อผิดพลาดใน JSON ได้อย่างไร

ถ้าเอนจินรายงาน position บรรทัด หรือคอลัมน์ ให้มองใกล้ ๆ ความผิดพลาดจริงอาจอยู่ก่อน ใช้เป็นคำใบ้ แล้วจึงตรวจ

JSON ใช้อัญประกาศเดี่ยวได้หรือไม่

ไม่ได้ สตริงและชื่อสมาชิกของ JSON มาตรฐานใช้อัญประกาศคู่

JSON มีลูกน้ำท้ายได้หรือไม่

ไม่ได้ JSON มาตรฐานไม่อนุญาตลูกน้ำหลังคุณสมบัติหรือรายการอาร์เรย์สุดท้าย

จะตรวจว่าสตริงเป็น JSON ที่ถูกต้องได้อย่างไร

เรียก JSON.parse ใน try/catch หรือวางข้อความลง จัดรูปแบบและเปรียบเทียบ JSON ถ้าการแยกวิเคราะห์โยน SyntaxError สตริงนั้นไม่ใช่ JSON ที่ถูกต้อง