ข้อผิดพลาดทางไวยากรณ์ JSON ที่พบบ่อยและวิธีการแก้ไขโดยใช้ Validator

ข้อผิดพลาด JSON ทั่วไป

กฎไวยากรณ์ที่เข้มงวดของ JSON หมายความว่าแม้แต่อักขระที่วางผิดที่เพียงตัวเดียวก็สามารถทำลายเอกสารทั้งหมดได้ การเข้าใจข้อผิดพลาด JSON ที่พบบ่อยที่สุดจะช่วยให้คุณดีบักได้เร็วขึ้นและหลีกเลี่ยงการทำผิดซ้ำ ด้านล่างนี้คือปัญหาที่นักพัฒนาพบบ่อยที่สุด พร้อมคำอธิบายและวิธีการแก้ไขที่ชัดเจนสำหรับแต่ละข้อ

1. เครื่องหมายจุลภาคต่อท้าย (Trailing Commas)

ข้อผิดพลาด: Unexpected token ที่ส่วนท้ายของ object หรือ array

เครื่องหมายจุลภาคต่อท้ายอนุญาตใน JavaScript objects และ arrays แต่ ถูกห้ามอย่างเด็ดขาดใน JSON

JSON ที่ไม่ถูกต้อง:

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

วิธีแก้ไข: ลบเครื่องหมายจุลภาคหลังรายการสุดท้าย

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

Arrays ที่มีเครื่องหมายจุลภาคต่อท้าย:

// Invalid
[1, 2, 3,]

// Valid
[1, 2, 3]

2. เครื่องหมายอัญประกาศรอบคีย์ขาดหายไปหรือไม่ถูกต้อง

ข้อผิดพลาด: Unexpected identifier หรือ Expected double-quoted property name

JSON ต้องการให้คีย์ object ทั้งหมดอยู่ใน เครื่องหมายอัญประกาศคู่ เครื่องหมายอัญประกาศเดี่ยวและคีย์ที่ไม่มีเครื่องหมายอัญประกาศไม่ถูกต้อง แม้ว่าจะทำงานได้ใน JavaScript

JSON ที่ไม่ถูกต้อง:

{
  name: "Alice",
  'occupation': "Engineer"
}

วิธีแก้ไข: ใช้เครื่องหมายอัญประกาศคู่รอบคีย์เสมอ

{
  "name": "Alice",
  "occupation": "Engineer"
}

3. การใช้เครื่องหมายอัญประกาศเดี่ยวสำหรับค่าสตริง

ข้อผิดพลาด: Unexpected identifier หรือ Unterminated string

เช่นเดียวกับคีย์ ค่าสตริงต้องใช้เครื่องหมายอัญประกาศคู่ใน JSON เครื่องหมายอัญประกาศเดี่ยวไม่ถูกต้อง

JSON ที่ไม่ถูกต้อง:

{ "greeting": 'Hello, world!' }

วิธีแก้ไข: แทนที่เครื่องหมายอัญประกาศเดี่ยวด้วยเครื่องหมายอัญประกาศคู่

{ "greeting": "Hello, world!" }

เคล็ดลับ: หากสตริงของคุณมีเครื่องหมายอัญประกาศคู่ ให้ escape ด้วย backslash: "He said, \"Hello\""

4. อักขระพิเศษที่ไม่ได้ Escape

ข้อผิดพลาด: Unexpected token หรือ Invalid character

อักขระบางตัวต้องถูก escape ในสตริง JSON: เครื่องหมายอัญประกาศคู่ ("), backslash (\) และ control characters

JSON ที่ไม่ถูกต้อง:

{
  "path": "C:\Users\Documents\file.json",
  "quote": "He said "hello""
}

วิธีแก้ไข: Escape backslash และเครื่องหมายอัญประกาศคู่อย่างถูกต้อง

{
  "path": "C:\\Users\\Documents\\file.json",
  "quote": "He said \"hello\""
}

รายการ JSON Escape Sequences ทั้งหมด

| Sequence | Represents | |----------|-----------| | \" | Double quote | | \\ | Backslash | | \/ | Forward slash | | \b | Backspace | | \f | Form feed | | \n | Newline | | \r | Carriage return | | \t | Tab | | \uXXXX | Unicode character (e.g., é for e) |

5. รูปแบบตัวเลขที่ไม่ถูกต้อง

ข้อผิดพลาด: Unexpected number หรือ Invalid number

JSON มีกฎเฉพาะสำหรับวิธีการจัดรูปแบบตัวเลข:

• ไม่อนุญาตเลขศูนย์นำหน้า (01 ไม่ถูกต้อง)
• อนุญาตเลขศูนย์นำหน้าเพียงตัวเดียวสำหรับเลข 0 เท่านั้น
• ตัวเลขไม่สามารถมีจุดต่อท้ายได้ (10. ไม่ถูกต้อง)
• ไม่รองรับรูปแบบ hexadecimal, octal และ binary

JSON ที่ไม่ถูกต้อง:

{
  "invalid1": 01,
  "invalid2": 10.,
  "invalid3": 0xFF,
  "invalid4": 1,000
}

วิธีแก้ไข:

{
  "valid1": 1,
  "valid2": 10.0,
  "valid3": 255,
  "valid4": 1000
}

6. ค่าที่ไม่ถูกต้อง: undefined, NaN, Infinity

ข้อผิดพลาด: Unexpected token สำหรับ undefined, NaN, Infinity

JavaScript มีค่าที่ ไม่มีในข้อกำหนด JSON ค่าเหล่านี้จะทำให้เกิดข้อผิดพลาดในการ parse:

JSON ที่ไม่ถูกต้อง:

{
  "undefinedVal": undefined,
  "notANumber": NaN,
  "infinity": Infinity
}

วิธีแก้ไข: แทนที่ด้วยค่า JSON ที่ถูกต้องหรือใช้แบบแผน

{
  "undefinedVal": null,
  "notANumber": null,
  "infinity": 1.7976931348623157e+308
}

7. เครื่องหมายจุลภาคเกินหรือขาด

ข้อผิดพลาด: Expected comma หรือ Unexpected token

เครื่องหมายจุลภาคใน JSON ต้องคั่นทุกคู่ key/value และองค์ประกอบ array แต่ ต้องไม่ ปรากฏหลังรายการสุดท้าย

เครื่องหมายจุลภาคขาด (ไม่ถูกต้อง):

{
  "name": "Alice"
  "age": 30
}

วิธีแก้ไข: เพิ่มเครื่องหมายจุลภาคที่ขาด

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

8. ปัญหาโครงสร้างที่ซ้อนลึกเกินไป

ข้อผิดพลาด: Maximum call stack size exceeded หรือ parser timeout

แม้ไม่ใช่ข้อผิดพลาดทางไวยากรณ์ แต่ JSON ที่ซ้อนลึก (10+ ระดับ) อาจทำให้เกิดปัญหาด้านประสิทธิภาพและทำให้การดีบักยากมาก

โครงสร้างที่มีปัญหา:

{
  "level1": {
    "level2": {
      "level3": {
        "level4": {
          "level5": {
            "level6": {
              "value": "too deep"
            }
          }
        }
      }
    }
  }
}

แนวทางที่ดีกว่า: ทำให้โครงสร้างแบนลงหรือใช้การอ้างอิง

{
  "users": {
    "alice": { "role": "admin" }
  },
  "permissions": {
    "admin": ["read", "write", "delete"]
  }
}

9. วงเล็บปีกกาหรือวงเล็บเหลี่ยมเปิดหรือปิดขาดหายไป

ข้อผิดพลาด: Expected ',' or '}' หรือ Unexpected end of JSON input

วงเล็บที่ไม่ตรงกันเป็นสาเหตุทั่วไปของข้อผิดพลาด JSON โดยเฉพาะในไฟล์ JSON ขนาดใหญ่หรือที่เขียนด้วยมือ

JSON ที่ไม่ถูกต้อง:

{
  "name": "Alice",
  "items": [1, 2, 3
}

วิธีแก้ไข: ตรวจสอบให้แน่ใจว่าทุก { มี } ที่ตรงกัน และทุก [ มี ] ที่ตรงกัน

{
  "name": "Alice",
  "items": [1, 2, 3]
}

เคล็ดลับมือโปร: ย่อหน้า JSON ของคุณอย่างเหมาะสมเพื่อจับคู่วงเล็บเปิดและปิดด้วยสายตา JSON formatter สามารถทำสิ่งนี้โดยอัตโนมัติ

วิธีการดีบักข้อผิดพลาด JSON อย่างมีประสิทธิภาพ

1. ใช้ JSON validator -- วาง JSON ของคุณลงใน เครื่องมือตรวจสอบ JSON ฟรี เพื่อรับบรรทัดและคอลัมน์ที่แน่นอนของข้อผิดพลาดแรก
2. ตรวจสอบทีละส่วน -- สำหรับไฟล์ขนาดใหญ่ ตรวจสอบทีละส่วนเพื่อแยกข้อผิดพลาด
3. ระวังสิ่งแปลกปลอมจากการคัดลอก-วาง -- อักขระที่มองไม่เห็น smart quotes และ non-breaking spaces มักเล็ดลอดเข้ามาจากโปรแกรมประมวลผลคำหรือหน้าเว็บ
4. ตรวจสอบ character encoding -- ตรวจสอบให้แน่ใจว่าไฟล์ของคุณถูกบันทึกเป็น UTF-8 encoding อื่นอาจสร้างข้อผิดพลาดที่มองไม่เห็น
5. ใช้ linter -- เครื่องมือเช่น ESLint พร้อมปลั๊กอิน json จับข้อผิดพลาด JSON ระหว่างการพัฒนา

จำไว้: JSON parser มักรายงานเฉพาะข้อผิดพลาดทางไวยากรณ์ แรก เท่านั้น แก้ไขอันนั้น ตรวจสอบใหม่ และทำซ้ำจนกว่าเอกสารจะผ่าน เครื่องมือ JSON Formatter & Validator ของเราให้ข้อความแสดงข้อผิดพลาดทันทีและละเอียดเพื่อเร่งกระบวนการนี้