การจัดรูปแบบ JSON คืออะไร?
JSON (JavaScript Object Notation) คือรูปแบบการแลกเปลี่ยนข้อมูลแบบข้อความที่มีน้ำหนักเบา กำหนดโดย RFC 8259 และ ECMA-404 เอกสาร JSON เป็นต้นไม้ที่มีหกประเภทค่า — object, array, string, number, boolean และ null การจัดรูปแบบเพิ่มช่องว่างเพื่อให้มนุษย์สามารถอ่านต้นไม้นั้นได้ ส่วนการย่อจะเอาช่องว่างออกเพื่อให้เครื่องส่งผ่านเครือข่ายได้เร็วขึ้น
การจัดรูปแบบ JSON ทำงานอย่างไร?
ข้อมูลของคุณถูกประมวลผลทั้งหมดในเบราว์เซอร์โดยใช้ฟังก์ชันในตัว JSON.parse และ JSON.stringify ขั้นตอนหลักคือ:
- อ่านข้อมูลจาก textarea และตัดช่องว่างหน้าและหลังออก
- เบราว์เซอร์แยกวิเคราะห์ด้วย
JSON.parseหากข้อมูลไม่ใช่ JSON ที่ถูกต้อง ตัวแยกวิเคราะห์จะโยนSyntaxErrorที่ถูกจับและแสดงพร้อมบรรทัดและคอลัมน์ที่หยุด - เมื่อข้อมูลถูกต้อง ค่าที่แยกวิเคราะห์แล้วจะถูกปล่อยใหม่ด้วย
JSON.stringify(value, null, indent)โดยที่indentคือการเยื้องที่คุณเลือก (2 ช่องว่าง, 4 ช่องว่าง หรืออักขระแท็บ) - สำหรับการย่อ
JSON.stringify(value)จะถูกเรียกโดยไม่ใส่อาร์กิวเมนต์การเยื้อง ทำให้ได้รูปแบบที่ถูกต้องที่สั้นที่สุดของค่าเดียวกันโดยไม่มีช่องว่างที่ไม่จำเป็น - ผลลัพธ์จะถูกเขียนลงใน textarea แบบอ่านอย่างเดียว และแผงสถานะจะรายงาน JSON ถูกต้อง หรือข้อผิดพลาดในการแยกวิเคราะห์ที่แน่นอน เพื่อให้คุณสามารถแก้ไขต้นทางได้ทันที
ทำไมจึงใช้เครื่องมือนี้จัดรูปแบบ JSON?
- ความเป็นส่วนตัว: ทุกครั้งที่แยกวิเคราะห์ จัดรูปแบบ และย่อจะเกิดขึ้นในเบราว์เซอร์ของคุณ JSON ไม่เคยถึงเซิร์ฟเวอร์ของเรา
- การตรวจสอบทันที: คอมมาที่วางผิดที่ คีย์ที่ไม่ใส่เครื่องหมายคำพูด อัญประกาศเดี่ยว และคอมมาท้ายบรรทัด จะถูกรายงานพร้อมคำใบ้บรรทัดและคอลัมน์ที่แม่นยำ เพื่อให้คุณกระโดดไปยังจุดบั๊กได้ทันที
- ผลลัพธ์พร้อมรีวิว: JSON ที่พิมพ์สวยด้วยการเยื้องที่สม่ำเสมอจะให้ diff ที่สะอาดในการทบทวนโค้ดและไฟล์การตั้งค่าที่อ่านง่าย
- การย่อพร้อมสำหรับโปรดักชัน: การตัดช่องว่างที่ไม่จำเป็นช่วยลดขนาด API payload ไฟล์ manifest และ fixture แบบฝังตัวก่อนเผยแพร่
การใช้งานทั่วไปของการจัดรูปแบบ JSON มีอะไรบ้าง?
การอ่านและเขียน JSON ปรากฏทั่วไปในการพัฒนาเว็บและเครื่องมือ:
- การดีบัก API: วางการตอบสนองดิบจาก
curlหรือ Network Panel เพื่อยืนยันรูปร่าง ค้นหาตัวสะกดผิดในคีย์ หรือพบวงเล็บปีกกาปิดที่หายไป - การจัดระเบียบ config: จัดเยื้องใหม่ของ
package.json,tsconfig.jsonหรือ manifest CI ที่แก้ด้วยมือ เพื่อให้ผ่านรีวิวและ linter - การอ่านล็อก: จัดรูปแบบใหม่ของบรรทัดล็อก
application/jsonที่กระชับเพื่อให้แต่ละฟิลด์เรียงตรงกัน แล้วย่ออีกครั้งก่อนวางใน ticket
ตัวอย่างการจัดรูปแบบ JSON มีลักษณะอย่างไร?
การวาง {"id":42,"name":"Ada Lovelace","email":"ada@example.com","roles":["admin","engineer"]} และกดจัดรูปแบบด้วยการเยื้อง 2 ช่องว่างจะกระจายมันเป็นเก้าบรรทัด โดยทุกฟิลด์ของอ็อบเจ็กต์และทุกสมาชิกของอาร์เรย์อยู่ในบรรทัดของตัวเอง การกดย่อบนข้อความที่จัดรูปแบบแล้วจะยุบมันกลับมาเป็นสตริงกระชับเดียวกันแบบไบต์ต่อไบต์
ตัวจัดรูปแบบ JSON นี้แยกวิเคราะห์ด้วยเอนจินเดียวกับที่ runtime ของ Node.js, Deno หรือเบราว์เซอร์ของคุณใช้ และให้ผลลัพธ์ที่คุณสามารถวางตรงเข้าไปในโค้ด การตั้งค่า หรือล็อกได้