ตัวจัดรูปแบบ JSON
วางข้อมูล JSON ไม่ว่าจะอยู่ในรูปแบบที่ถูกบีบอัด หรือมีการแทนค่าพิเศษ (escaped) หรือเป็นข้อมูลตรงจากบรรทัดบันทึก ก็จะแสดงผลในรูปแบบที่สวยงามพร้อมขนาดการแทรกช่องว่างตามที่คุณต้องการ ระบบจะตรวจสอบความถูกต้องขณะแปลงข้อมูล และแสดงตำแหน่งแถวและคอลัมน์ที่เกิดข้อผิดพลาดอย่างแม่นยำ นอกจากนี้ยังสามารถเรียงลำดับคีย์ของออบเจกต์ตามลำดับตัวอักษรได้ตามต้องการ ซึ่งช่วยให้การเปรียบเทียบข้อมูลระหว่างผลลัพธ์จาก API สองรายการอ่านได้ง่ายขึ้นมาก
วิธีการจัดรูปแบบ JSON
-
1
วางข้อมูลในรูปแบบ JSON
ไม่ว่าจะถูกลดขนาด หลบซ่อนอยู่ภายในสตริง หรือห่อหุ้มไว้ในฟังก์ชัน callback แบบ JSONP พาร์เซอร์ก็สามารถแยกส่วนประกอบทั้งหมดออกมาได้
-
2
เลือกตำแหน่งการตัด
2 ช่องว่าง, 4 ช่องว่าง, แท็บหนึ่งตัว หรือรูปแบบกระชับ (ใช้เพียงบรรทัดเดียวสำหรับข้อมูลขนาดเล็ก)
-
3
สลับลำดับการเรียงข้อมูล
เรียงคีย์ของออบเจกต์ตามลำดับตัวอักษร เพื่อให้การเปรียบเทียบผลลัพธ์สองชุดทำได้ง่ายขึ้น
-
4
คัดลอกหรือดาวน์โหลด
คัดลอกไปยังคลิปบอร์ดด้วยการคลิกเพียงครั้งเดียว หรือบันทึกเป็นไฟล์ `.json`
สิ่งที่โปรแกรมจัดรูปแบบทำหน้าที่
- ข้อมูลที่ถูกลดขนาด: ค่า
{"a":1,"b":[1,2,3]}จะมีการแทรกช่องว่างตามรูปแบบที่ถูกต้อง - JSON ที่ถูกแปลงเป็นสตริงแล้ว: สตริง JSON ที่มีข้อมูล
"{\"nested\":true}"สามารถถอดโครงสร้างและจัดรูปแบบได้ - ฟังก์ชันตอบกลับแบบ JSONP: รหัส
callback({...})ถูกลดลงเหลือเพียง{...}เท่านั้น - รายการส่วนประกอบ (BOM) และช่องว่างด้านหน้า: ถูกลบโดยอัตโนมัติ
- คำอธิบาย: รูปแบบ JSONC ของ
//และ/* */สามารถยอมรับได้ในโหมด “ผ่อนปรน” แต่จะถูกลบออกจากรายผลลัพธ์ (JSON แบบเข้มงวดไม่มีคำอธิบาย)
ทำไม JSON ถึงมีรูปแบบการแสดงผลที่สวยงาม
- Diffing: เอกสาร JSON แบบบรรทัดเดียวที่มีคีย์หลายพันรายการ ซึ่งไม่สามารถอ่านได้ใน
git diffโดยคีย์แต่ละรายการจะถูกแสดงเป็นบรรทัดแยกต่างหาก - การแก้ไขข้อผิดพลาด (Debugging): โครงสร้างแบบซ้อนกันสามารถนำทางได้ง่ายขึ้นด้วยการใช้การแทรกช่องว่าง (indentation)
- เอกสารประกอบ: ตัวอย่างของ API ควรจัดรูปแบบ มีการเรียงลำดับอย่างเป็นระบบ และมีความสม่ำเสมอในทุกเวอร์ชันที่อัปเดตใหม่
- _configs: ไฟล์กำหนดค่าในรูปแบบ JSON ควรแสดงผลเป็นข้อความอ่านง่ายในรีพอเพื่อความสะดวกในการอ่าน โดยระบบขณะรันสามารถประมวลผลได้ทั้งสองรูปแบบ
หลักการกำหนดรูปแบบการ indent
| บริบท | การย่อหน้าแบบทั่วไป |
|---|---|
npm package.json |
ช่องว่าง 2 ตำแหน่ง |
| AWS CloudFormation | 2 ช่องว่าง |
| Java/ .NET เวอร์ชันเก่า | ใช้ช่องว่าง 4 ช่อง |
| การตั้งค่าใน VCS | ใช้พื้นที่ 2 หน่วย (ความสอดคล้องกันทั่วทั้งโปรเจกต์เป็นสิ่งสำคัญที่สุด) |
การเรียงลำดับคีย์นั้นมีข้อถกเถียง เพราะแม้ว่าจะช่วยให้ไฟล์ Diff ดูเป็นระเบียบมากขึ้น แต่กลับเปลี่ยนลำดับของไฟล์ config ที่ถูกกำหนดไว้อย่างเป็นมาตรฐานบนดิสก์ ควรเลือกแนวทางการจัดระเบียบไฟล์สำหรับโปรเจกต์หนึ่งและปฏิบัติตามอย่างเคร่งครัด
ข้อผิดพลาดในการตรวจสอบที่คุณจะพบ
| ข้อผิดพลาด | แก้ไข |
|---|---|
Unexpected token ' at position X |
คุณใช้เครื่องหมายคำพูดแบบเดี่ยว; กรุณาเปลี่ยนเป็นเครื่องหมายคำพูดแบบคู่ |
Unexpected end of JSON input |
ไม่มีวงแหวนปิดหรือวงเล็บปิด |
Unexpected token , at position X |
จุดคู่ท้ายคำ; ลบออก |
Unexpected token a at position X |
คีย์ที่ไม่มีการระบุราคา หรือ NaN/undefined ในรูปแบบตัวอักษร |
Duplicate key "foo" (โหมดผ่อนปรน) |
ตามข้อกำหนด JSON อนุญาตไว้; พาร์เซอร์ส่วนใหญ่จะเก็บค่าจากตำแหน่งสุดท้าย |
ข้อผิดพลาดที่พบบ่อย
- การคัดลอกข้อมูล JSON ที่มีองค์ประกอบแบบ HTML: ไฟล์
"จะไม่สามารถถูกวิเคราะห์ได้ กรุณาทำการถอดรหัสก่อน - ผสมผสานระหว่างการวิเคราะห์แบบเข้มงวดกับแบบผ่อนปรน ให้ใช้การวิเคราะห์แบบผ่อนปรนเฉพาะในขั้นตอนการตรวจสอบเท่านั้น และห้ามบันทึก JSON ที่ผ่านการวิเคราะห์แบบผ่อนปรนไปยังไฟล์กำหนดค่าสำหรับระบบจริงเด็ดขาด
- การปรับรูปแบบไฟล์ที่ถูกปรับรูปแบบไว้แล้วให้มีลักษณะแตกต่างออกไป โปรแกรมจัดรูปแบบจะดำเนินการได้อย่างราบรื่น แต่คุณอาจพบว่าผลลัพธ์มีข้อมูลที่ไม่ตรงกัน (diff) ปรากฏอยู่
คำถามที่พบบ่อย
ไม่ ทั้งการวิเคราะห์ข้อมูลและการจัดรูปแบบจะดำเนินการภายในเบราว์เซอร์ของคุณโดยตรง เนื้อหาจะไม่ออกจากแท็บของคุณเลย จึงเหมาะอย่างยิ่งสำหรับการวางคัดลอกผลตอบกลับจาก API ที่มีโทเคน ข้อมูลกำหนดค่าภายในระบบ หรือข้อมูลทดสอบ (staging payloads)
ตัวจัดรูปแบบจะแสดงข้อมูล JSON ที่ถูกต้องในรูปแบบที่สวยงาม ส่วนตัวตรวจสอบจะเปรียบเทียบข้อมูลกับโครงสร้าง JSON Schema ทั้งสองกระบวนการล้วนทำการวิเคราะห์ข้อมูล แต่การตรวจสอบความถูกต้องเป็นขั้นตอนแยกต่างหาก ซึ่งจะถามว่า “ข้อมูลนี้สอดคล้องกับโครงสร้างของฉันหรือไม่” แทนที่จะเพียงแค่ตรวจสอบว่า “ข้อมูลนี้เป็น JSON ที่ถูกต้องหรือไม่”
ใช่ ตัวเลือก “sort keys” จะทำการเรียงลำดับคีย์ของออบเจกต์ทุกระดับการซ้อนกันอย่างเชิงเรียกซ้ำ โดยอาร์เรย์จะคงลำดับเดิมไว้ เนื่องจากลำดับของอาร์เรย์มีความหมายทางเซมานติกใน JSON
ขึ้นอยู่กับหน่วยความจำของเบราว์เซอร์ โดยบนฮาร์ดแวร์รุ่นใหม่สามารถใช้งานได้สูงสุดประมาณ 50 เมกะไบต์ หากต้องการประสิทธิภาพที่ดีกว่านี้ ควรพิจารณาใช้ jq จากบรรทัดคำสั่ง เนื่องจากโปรแกรมนี้จะสตรีมเอกสารแทนที่จะโหลดเอกสารทั้งฉบับ