แนวปฏิบัตจัดรูปแบบ JSON: อ่านง่าย ถูกต้องและมีประสิทธิภาพ
ตอบด่วน
ใช้ indent 2-space สำหรับ JSON ที่อ่านได้ ไม่มี trailing comma, double-quoted key, ลำดับ key สอดคล้อง minify สำหรับ production transport และ pretty-print สำหรับ development ใช้ JSON Formatter ฟรีของเราเพื่อสลับทันที
การแนะนำ
การเลือก format JSON มีผลต่อความอ่านง่าย ขนาดไฟล์ และความเร็ว debug แม้ JSON syntax กำหนดโดย RFC 8259 แต่ indent ลำดับ key และ whitespace เป็นเรื่อง convention คู่มือนี้อธิบาย best practice ทั่วไปเพื่อ JSON สอดคล้องทั้งทีม debug ง่าย และมีประสิทธิภาพ
ทีละขั้นตอน
-
เลือกความกว้างของการเยื้อง
ช่องว่าง 2 ช่องเป็นแบบแผนที่พบบ่อยที่สุด (Prettier, ESLint, Google JSON Style Guide) อนุญาตให้ใช้ช่องว่าง 4 ช่องสำหรับการกำหนดค่าที่ซ้อนกันแบบลึก ไม่แนะนำแท็บเนื่องจากการเรนเดอร์แตกต่างกันไปในแต่ละเอดิเตอร์ เลือกหนึ่งรายการและบังคับใช้ทั่วทั้งโครงการ
-
สั่งซื้อกุญแจอย่างต่อเนื่อง
เรียงลำดับคีย์ตามตัวอักษรสำหรับเอาต์พุตที่กำหนด (มีประโยชน์สำหรับการแคชและความแตกต่าง) หรือจัดกลุ่มตามความหมายของโดเมน (id ก่อน จากนั้นจึงระบุแอตทริบิวต์ จากนั้นจึงมีความสัมพันธ์) หลีกเลี่ยงการเรียงลำดับคีย์แบบสุ่ม—ทำให้ความแตกต่างมีเสียงดังและทำให้การทดสอบสแน็ปช็อตหยุดชะงัก
-
ลดขนาดสำหรับการขนส่งการผลิต
JSON แบบย่อขนาดจะลบช่องว่างที่ไม่จำเป็นออกทั้งหมด โดยลดขนาดเพย์โหลดลง 10—0% ให้บริการ JSON แบบย่อจาก APIs ในการใช้งานจริง และเก็บ JSON ที่พิมพ์ออกมาอย่างสวยงามเพื่อการพัฒนาและการแก้ไขข้อบกพร่องในเครื่องเท่านั้น
-
ตรวจสอบก่อนที่จะส่ง
เรียกใช้ JSON ผ่านเครื่องมือตรวจสอบก่อนที่จะส่งไปยัง API หรือเขียนลงในไฟล์กำหนดค่า เครื่องหมายจุลภาคต่อท้ายหรือคีย์ที่ไม่มีเครื่องหมายคำพูดจะทำให้ JSON.parse() โยนและทำลายคอนซูเมอร์
-
ใช้ฟอร์แมตเตอร์เพื่อสลับโหมด
วาง JSON ของคุณลงใน JSON ฟอร์แมตเตอร์เพื่อตกแต่งให้สวยงามสำหรับการอ่านหรือย่อขนาดเพื่อการขนส่ง เครื่องมือจะตรวจสอบความถูกต้องของไวยากรณ์และรายงานตำแหน่งที่แน่นอนของข้อผิดพลาด ซึ่งช่วยประหยัดเวลาในการแก้ไขจุดบกพร่อง
ตัวอย่าง
พิมพ์สวย (เยื้อง 2 ช่อง)
ป้อนข้อมูล: {"id":1,"name":"Alice","active":true}
เอาท์พุต: {
"id": 1,
"name": "Alice",
"active": true
}
ย่อขนาดสำหรับการผลิต
ป้อนข้อมูล: {
"id": 1,
"name": "Alice"
}
เอาท์พุต: {"id":1,"name":"Alice"}
ปุ่มเรียงตามตัวอักษร
ป้อนข้อมูล: {"zebra":1,"apple":2,"mango":3}
เอาท์พุต: {"apple":2,"mango":3,"zebra":1}
ปัญหาทั่วไป
- เครื่องหมายจุลภาคต่อท้าย: {"a":1,} ไม่ถูกต้อง JSON ตัวจัดรูปแบบส่วนใหญ่จะตัดออก แต่ตัวแยกวิเคราะห์ที่เข้มงวดเช่น JSON.parse() จะปฏิเสธอินพุต
- เครื่องหมายคำพูดเดี่ยวและคีย์ที่ไม่มีเครื่องหมายคำพูด: {'a':1} และ {a:1} เป็น JavaScript ที่ถูกต้อง แต่ JSON ไม่ถูกต้อง ใช้เครื่องหมายคำพูดคู่สำหรับคีย์และค่าสตริงเสมอ
- ความคิดเห็นใน JSON: มาตรฐาน JSON ไม่อนุญาตให้ // หรือ /* */ แสดงความคิดเห็น ใช้ JSONC, JSON5 หรือไฟล์สคีมาแยกต่างหาก หากคุณต้องการเอกสารประกอบแบบอินไลน์
- การเยื้องแบบผสม: แท็บและการเว้นวรรคที่ผสมกันจะทำให้เครื่องมือต่างเสียหาย และอาจทำให้เกิดข้อผิดพลาดของขุย "การเยื้องที่ไม่สอดคล้องกัน" ทำให้เป็นมาตรฐานด้วยฟอร์แมตเตอร์ก่อนที่จะกระทำ
เคล็ดลับ
- กำหนดค่าโปรแกรมแก้ไขของคุณให้จัดรูปแบบ JSON เมื่อบันทึกด้วยการเว้นวรรค 2 ช่อง ซึ่งจะช่วยป้องกันการถกเถียงเรื่องสไตล์ในการตรวจสอบโค้ด
- สำหรับการตอบกลับ API ให้ตั้งค่า Content-Type: application/json; charset=utf-8 และให้บริการ JSON แบบย่อด้วยการบีบอัด gzip/Brotli เพื่อประสิทธิภาพสูงสุด
- ใช้การเรียงลำดับคีย์ที่กำหนด (เช่น ตัวอักษร) เมื่อ JSON ถูกแฮชหรือเปรียบเทียบในการทดสอบสแน็ปช็อต ลำดับแบบสุ่มทำให้เกิดความล้มเหลวที่เป็นผลบวกลวง
- เมื่อทำการดีบั๊กเพย์โหลด JSON ขนาดใหญ่ ให้พิมพ์ออกมาก่อน จากนั้นใช้ regex หรือ jq เพื่อแยกทรีย่อยที่เกี่ยวข้องแทนการสแกนด้วยตา