25 ข้อผิดพลาดเกี่ยวกับ JSON ที่นักพัฒนาทุกคนมักพลาด

JSON คือกระดูกสันหลังของการสื่อสารบนเว็บ มีน้ำหนักเบาและอ่านง่าย อย่างไรก็ตาม กฎของมันนั้นเข้มงวดมาก ข้อผิดพลาดเพียงเล็กน้อยก็สามารถทำให้โค้ดของคุณพังได้

หลีกเลี่ยงข้อผิดพลาดทั่วไปเหล่านี้เพื่อเขียนโครงสร้างข้อมูลให้ดียิ่งขึ้น

Syntax Errors

  • ใช้ double quotes เท่านั้น เครื่องหมาย single quotes อาจใช้ได้ใน JavaScript แต่จะใช้ไม่ได้ใน JSON
  • ลบ trailing commas ออก การมี comma หลังรายการสุดท้ายจะทำให้โปรแกรมพังได้
  • อย่าลืมใส่ comma ทุกคู่ของ key-value จำเป็นต้องมี comma คั่นระหว่างกัน
  • ใส่เครื่องหมายอัญประกาศที่ key ทุกตัว ทุก key ต้องถูกล้อมรอบด้วย double quotes
  • ตรวจสอบวงเล็บให้ถูกต้อง อย่าใช้ curly braces ในจุดที่ควรใช้ square brackets

Data Type Mistakes

  • จัดการกับค่า undefined เนื่องจาก JSON ไม่รองรับ undefined ให้ใช้ null แทน
  • หลีกเลี่ยง NaN และ Infinity ค่าเหล่านี้จะกลายเป็น null ในระหว่างการทำ serialization
  • จำรูปแบบ Date ไว้ JSON มองว่าวันที่คือ string คุณต้อง parse กลับให้เป็น Date object
  • ใช้ตัวเลขฐานสิบ อย่าใช้รูปแบบ hex หรือ octal
  • อย่าเก็บ function ไว้ใน JSON เพราะ JSON มีไว้สำหรับข้อมูลแบบ static เท่านั้น
  • หลีกเลี่ยงการใส่ comment JSON ไม่อนุญาตให้ใช้ comment แบบ // หรือ /* */
  • Escape double quotes โดยใช้ backslash เพื่อใส่เครื่องหมายอัญประกาศไว้ภายใน string
  • ใช้ \n สำหรับการขึ้นบรรทัดใหม่ คุณไม่สามารถกด Enter ภายในค่าที่เป็น string ได้
  • Escape backslashes โดยใช้ \ สำหรับ path หรือ regex patterns

Environment and Logic Errors

  • ตรวจสอบ input ของคุณ อย่าส่ง object เข้าไปใน JSON.parse()
  • ระวังเรื่อง casing "userId" และ "userid" คือ key ที่ต่างกัน
  • อย่าพึ่งพาเรื่องลำดับ JSON ไม่รับประกันลำดับของ key
  • อย่าใช้ eval() ให้ใช้ JSON.parse() เพื่อป้องกันความเสี่ยงด้านความปลอดภัย
  • ป้องกันปัญหาตัวเลขขนาดใหญ่ ให้ส่ง 64-bit IDs เป็น string เพื่อหลีกเลี่ยงการสูญเสียความแม่นยำ (precision loss)
  • ใช้บล็อก try...catch หาก JSON ไม่ถูกต้อง แอปของคุณจะพังหากคุณไม่ดักจับ error
  • แก้ไข circular references คุณไม่สามารถ stringify object ที่มีการอ้างอิงกลับมาหาตัวเองได้
  • เข้าใจความแตกต่าง JSON มีข้อจำกัดมากกว่า standard JavaScript object
  • หลีกเลี่ยง empty strings ให้ใช้ {} หรือ [] แทน ""

วิธีการใช้งานอย่างปลอดภัย:

  • ใช้ validator เพื่อตรวจสอบ syntax ของคุณ
  • ใช้ Prettier ใน editor ของคุณเพื่อจัดรูปแบบไฟล์อัตโนมัติ
  • ครอบตรรกะการ parsing ด้วยบล็อก try...catch เสมอ

Source: https://dev.to/jsdevspace/25-json-mistakes-every-developer-makes-36e6