เครื่องมือจัดรูปแบบ JSON คืออะไร?

เครื่องมือจัดรูปแบบ JSON เป็นเครื่องมือที่รับข้อความ JSON (JavaScript Object Notation) แล้วเขียนใหม่โดยเพิ่มการเยื้องและการขึ้นบรรทัดใหม่ โดยไม่เปลี่ยนแปลงข้อมูลเดิม JSON เป็นรูปแบบข้อความธรรมดาสำหรับจัดเก็บและส่งข้อมูลที่มีโครงสร้าง ซึ่งสร้างจากคู่ชื่อ/ค่าและรายการต่าง ๆ โดยปกติโปรแกรมจะประหยัดพื้นที่ด้วยการลบช่องว่างส่วนเกินทั้งหมด ทำให้เหลือเป็นบรรทัดเดียวที่แน่นและอ่านยากสำหรับคน เครื่องมือจัดรูปแบบซึ่งเรียกอีกอย่างว่า beautifier หรือ pretty printer จะเติมช่องว่างเหล่านั้นกลับเข้าไปอย่างสม่ำเสมอ เพื่อให้เห็นโครงสร้างได้ชัดเจน เครื่องมือนี้จัดรูปแบบ JSON โดยอัตโนมัติขณะที่พิมพ์หรือวางข้อความ ไม่มีปุ่มจัดรูปแบบ ผลลัพธ์จะอัปเดตทุกครั้งที่กดแป้นพิมพ์ ปุ่มรีเซ็ตจะล้างข้อมูลนำเข้า และปุ่มคัดลอกจะคัดลอกผลลัพธ์ที่จัดรูปแบบแล้ว

กฎไวยากรณ์ของ JSON

JSON กำหนดไว้ในข้อกำหนดที่เรียกว่า RFC 8259 โดยมีชนิดคอนเทนเนอร์สองชนิด ได้แก่

ออบเจ็กต์ เก็บคู่ชื่อ/ค่าไว้ภายในวงเล็บปีกกา:

1{"name": "John", "age": 30, "city": "New York"}
2

อาร์เรย์ เก็บรายการที่เรียงลำดับไว้ภายในวงเล็บเหลี่ยม:

1["apple", "banana", "cherry"]
2

ค่าใน JSON ต้องเป็นหนึ่งในหกชนิด ได้แก่ สตริง ตัวเลข บูลีน (true หรือ false) null ออบเจ็กต์ หรืออาร์เรย์

มีกฎบางข้อที่เป็นสาเหตุของข้อผิดพลาดส่วนใหญ่:

ชื่อพร็อพเพอร์ตีต้องอยู่ในเครื่องหมายอัญประกาศคู่ {name: "John"} ไม่ถูกต้อง ต้องใช้ {"name": "John"}
สตริงต้องใช้อัญประกาศคู่ ไม่ใช่อัญประกาศเดี่ยว
ห้ามมีเครื่องหมายจุลภาคต่อท้ายรายการสุดท้ายในออบเจ็กต์หรืออาร์เรย์ (ห้ามมีจุลภาคต่อท้าย)
JSON ไม่มีไวยากรณ์สำหรับความคิดเห็น แม้ว่ารูปแบบวงเล็บปีกกาและวงเล็บเหลี่ยมจะมาจาก JavaScript
JSON ไม่มี undefined ให้ใช้ null แทนค่าที่ขาดหาย

ข้อผิดพลาดที่พบบ่อยคือการวางลิเทอรัลออบเจ็กต์ของ JavaScript แทน JSON {name: 'John', age: undefined} เป็น JavaScript ที่ถูกต้อง แต่ไม่ใช่ JSON ที่ถูกต้อง รูปแบบ JSON คือ {"name": "John", "age": null}

เครื่องมือจัดรูปแบบ JSON นี้ทำงานอย่างไร

เครื่องมือจัดรูปแบบ JSON จำนวนมากส่งข้อความผ่าน JSON.parse() เพื่อสร้างออบเจ็กต์ JavaScript จากนั้นใช้ JSON.stringify() เพื่อแปลงกลับเป็นข้อความพร้อมการเว้นระยะ กระบวนการไปกลับนี้มีผลข้างเคียงคือ ตัวเลข JavaScript เป็นเลขทศนิยมแบบความละเอียดสองเท่าตามมาตรฐาน IEEE 754 ซึ่งไม่สามารถแทนจำนวนเต็มทุกจำนวนได้อย่างแม่นยำเมื่อเกิน 2^53 − 1 (9,007,199,254,740,991) ตัวระบุอย่าง 9007199254740993 อาจกลายเป็น 9007199254740992 หลังการแปลงไปกลับ

เครื่องมือนี้หลีกเลี่ยงขั้นตอนดังกล่าว โดยอ่านข้อมูลนำเข้าทีละอักขระด้วยตัวแยกวิเคราะห์ขนาดเล็กที่เขียนขึ้นเฉพาะ และแทนที่จะแปลงตัวเลขหรือสตริงแต่ละรายการเป็นค่า JavaScript ก็จะคัดลอกข้อความส่วนนั้นตรงตามที่เขียน แล้ววางไว้ในระดับการเยื้องที่ถูกต้อง เนื่องจากไม่มีการแปลงตัวเลขเป็นเลขทศนิยม จำนวนเต็มทุกขนาดจึงยังคงมีตัวเลขเดิมอย่างแม่นยำ หากออบเจ็กต์มีคีย์เดียวกันเขียนซ้ำสองครั้ง ระบบจะเก็บไว้ทั้งสองรายการในตำแหน่งเดิม แทนที่จะยุบเหลือรายการสุดท้ายเหมือนการสร้างออบเจ็กต์ JavaScript

กระบวนการทีละขั้นตอน:

อ่านโทเค็นถัดไป (ออบเจ็กต์ อาร์เรย์ สตริง ตัวเลข true false หรือ null)
ตรวจสอบโทเค็นนั้นกับไวยากรณ์ JSON หากฝ่าฝืนกฎ เช่น มีคีย์ที่ไม่อยู่ในเครื่องหมายอัญประกาศหรือมีจุลภาคต่อท้าย ให้ปฏิเสธ
คัดลอกข้อความของโทเค็นไปยังผลลัพธ์โดยไม่เปลี่ยนแปลง
เพิ่มการขึ้นบรรทัดใหม่และเยื้องด้วย 2 ช่องว่างสำหรับแต่ละระดับของการซ้อนภายในออบเจ็กต์หรืออาร์เรย์ ออบเจ็กต์หรืออาร์เรย์ที่ไม่มีข้อมูลอยู่ภายในจะคงอยู่ในบรรทัดเดียว เช่น {} หรือ []
ทำซ้ำจนกว่าจะอ่านข้อมูลนำเข้าทั้งหมด

การเยื้องกำหนดตายตัวที่ 2 ช่องว่าง และไม่มีการตั้งค่าให้เปลี่ยนแปลงได้ ขณะที่ช่องข้อมูลนำเข้าว่าง แผงผลลัพธ์จะแสดงข้อความตัวแทน "JSON ที่จัดรูปแบบแล้วจะแสดงที่นี่โดยอัตโนมัติ..." หากข้อมูลนำเข้าฝ่าฝืนกฎ JSON เครื่องมือจะแสดงข้อความ "JSON ไม่ถูกต้อง: โปรดตรวจสอบข้อมูลที่ป้อน" แทนข้อความจากตัวแยกวิเคราะห์ทางเทคนิคที่ระบุตำแหน่งอักขระอย่างละเอียด ในทางตรงกันข้าม JSON.parse() ที่มีอยู่ในเบราว์เซอร์จะแจ้งตำแหน่งอักขระในข้อความข้อผิดพลาด

ตัวอย่างพร้อมวิธีทำ

ข้อมูลนำเข้าที่ถูกทำให้ย่อ:

1{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}
2

กลายเป็น:

1{
2  "name": "John Doe",
3  "age": 30,
4  "address": {
5    "street": "123 Main St",
6    "city": "Anytown",
7    "state": "CA"
8  },
9  "hobbies": [
10    "reading",
11    "hiking",
12    "photography"
13  ]
14}
15

ออบเจ็กต์หรืออาร์เรย์ที่ซ้อนอยู่แต่ละรายการจะถูกเยื้องมากกว่าระดับของรายการแม่อีกหนึ่งระดับ ทำให้เห็นความสัมพันธ์ระหว่าง address กับฟิลด์ทั้งสามได้ทันที

ตัวอย่างที่สองแสดงให้เห็นว่าเหตุใดการคัดลอกลิเทอรัลจึงมีความสำคัญ ข้อมูลนำเข้านี้:

1{"id":9007199254740993}
2

จัดรูปแบบเป็น:

1{
2  "id": 9007199254740993
3}
4

ตัวเลขยังคงตรงตามที่พิมพ์ทุกประการ เครื่องมือจัดรูปแบบที่สร้างบน JSON.parse() แล้วตามด้วย JSON.stringify() จะเปลี่ยนตัวเลขนั้นเป็น 9007199254740992 โดยไม่แจ้งให้ทราบแทน

ข้อผิดพลาด JSON ที่พบบ่อย

ชื่อพร็อพเพอร์ตีไม่มีเครื่องหมายอัญประกาศ: {name: "John"} วิธีแก้: {"name": "John"}
จุลภาคต่อท้าย: {"age": 30,} วิธีแก้: ลบจุลภาคก่อนวงเล็บปีกกาปิด
วงเล็บไม่ตรงกัน: {"data": [1, 2} วิธีแก้: ปิดอาร์เรย์ด้วย ] ก่อนปิดออบเจ็กต์
สตริงไม่ปิด: {"name": "John} วิธีแก้: เพิ่มเครื่องหมายอัญประกาศปิดที่ขาดหาย
เครื่องหมายอัญประกาศเดี่ยว: {'name': 'John'} วิธีแก้: ใช้เครื่องหมายอัญประกาศคู่
undefined, NaN หรือ Infinity: ไม่มีรายการใดเป็นค่า JSON ที่ถูกต้อง ให้ใช้ null หรือสตริง

สาเหตุที่พบบ่อยของข้อผิดพลาดเหล่านี้คือการคัดลอกออบเจ็กต์โดยตรงจากคอนโซลของเบราว์เซอร์หรือบันทึกเซิร์ฟเวอร์ ซึ่งมักมีไวยากรณ์เฉพาะของ JavaScript ที่ต้องแก้ไขก่อนจึงจะเป็น JSON ที่ถูกต้อง

ควรใช้เครื่องมือจัดรูปแบบ JSON เมื่อใด

เครื่องมือจัดรูปแบบ JSON มักใช้ตรวจสอบการตอบกลับจาก API ซึ่งโดยปกติส่งแบบย่อเพื่อประหยัดแบนด์วิดท์ นอกจากนี้ยังใช้ตรวจสอบไฟล์การกำหนดค่า เช่น package.json หรือ composer.json ด้วยตนเอง อ่านข้อมูลที่คัดลอกจากพื้นที่จัดเก็บภายในเครื่องหรือคอนโซลของเบราว์เซอร์ และทำความเข้าใจโครงสร้างของชุดข้อมูลที่ได้รับจากระบบอื่น

วิธีอื่นในการจัดรูปแบบ JSON

เครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์: Chrome, Edge และ Firefox จะจัดรูปแบบการตอบกลับ JSON โดยอัตโนมัติในแผงแสดงตัวอย่างของแท็บ Network
โปรแกรมแก้ไขโค้ด: Visual Studio Code จัดรูปแบบไฟล์ JSON ที่เปิดอยู่ด้วย Alt+Shift+F (Shift+Option+F บน Mac) โปรแกรมแก้ไขส่วนใหญ่มีปุ่มลัดที่เทียบเท่ากันหรือส่วนขยายสำหรับจัดรูปแบบ
บรรทัดคำสั่ง: jq (jq . file.json) และ python -m json.tool file.json ซึ่งเป็นคำสั่งในตัวของ Python ต่างก็จัดรูปแบบ JSON จากเทอร์มินัลได้

การเพิ่มการจัดรูปแบบ JSON ลงในโค้ด

ภาษาโปรแกรมส่วนใหญ่มีไลบรารี JSON พร้อมตัวเลือกการเยื้อง ใน JavaScript:

1const formatted = JSON.stringify(JSON.parse(rawJson), null, 2);
2

ใน Python:

1import json
2formatted = json.dumps(json.loads(raw_json), indent=2)
3

ทั้งสองวิธีแปลงข้อความเป็นโครงสร้างข้อมูลแบบเนทีฟ แล้วแปลงกลับเป็นข้อความพร้อมการเว้นระยะ วิธีนี้เขียนได้ง่าย แต่สามารถเปลี่ยนตัวเลขได้ JavaScript จัดเก็บตัวเลขทุกตัวเป็นเลขทศนิยมแบบ double ดังนั้น 9007199254740993 จึงถูกแปลงกลับเป็น 9007199254740992 ส่วน Python รักษาจำนวนเต็มให้แม่นยำ เพราะจำนวนเต็มของ Python ไม่มีข้อจำกัดด้านขนาด แต่ก็ยังเขียน 1.0e2 ใหม่เป็น 100.0 และเปลี่ยน 1e999 เป็น Infinity ซึ่งไม่ใช่ JSON ที่ถูกต้อง แอปพลิเคชันที่ต้องการจำนวนเต็มขนาดใหญ่แบบแม่นยำ เช่น รหัสของฐานข้อมูล มักจัดเก็บเป็นสตริงใน JSON แทนการจัดเก็บเป็นตัวเลข

ประวัติโดยย่อของ JSON

Douglas Crockford เป็นผู้กำหนด JSON ในช่วงต้นทศวรรษ 2000 โดยนำไวยากรณ์มาจากลิเทอรัลออบเจ็กต์ของ JavaScript แต่ทำให้ใช้งานได้กับทุกภาษา RFC 4627 ทำให้ JSON เป็นมาตรฐานอย่างเป็นทางการในปี 2006 JSON แพร่หลายอย่างรวดเร็วเพราะเขียนสั้นกว่า XML และแมปเข้ากับออบเจ็กต์ JavaScript ได้โดยตรง ซึ่งมีความสำคัญเมื่อเว็บแอปพลิเคชันเริ่มดึงข้อมูลเบื้องหลังแทนการโหลดทั้งหน้าใหม่ ภายในช่วงทศวรรษ 2010 JSON ได้กลายเป็นรูปแบบเริ่มต้นสำหรับ REST API และฐานข้อมูลอย่าง MongoDB

คำถามที่พบบ่อย

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

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

เหตุใดจึงได้รับข้อผิดพลาด "Invalid JSON" ข้อมูลนำเข้าฝ่าฝืนกฎของ JSON สาเหตุทั่วไป ได้แก่ ชื่อพร็อพเพอร์ตีที่ไม่มีเครื่องหมายอัญประกาศ จุลภาคต่อท้าย เครื่องหมายอัญประกาศเดี่ยว สตริงที่ไม่ปิด หรือวงเล็บที่ไม่ตรงกัน เครื่องมือนี้ไม่แสดงตำแหน่งอักขระที่เกิดปัญหาอย่างละเอียด การตรวจสอบข้อมูลนำเข้ากับกฎที่แสดงไว้ข้างต้นมักช่วยค้นหาปัญหาได้อย่างรวดเร็ว

JSON มีความคิดเห็นได้หรือไม่ ไม่ได้ ข้อกำหนดไม่อนุญาตให้มีความคิดเห็น รูปแบบอย่าง JSONC และ JSON5 เพิ่มการรองรับความคิดเห็นบนไวยากรณ์ JSON สำหรับกรณีที่มีประโยชน์ เช่น ไฟล์การกำหนดค่า

การเยื้องมาตรฐานของ JSON คืออะไร การใช้สองช่องว่างเป็นรูปแบบที่พบมากที่สุดในการพัฒนาเว็บ และเป็นรูปแบบที่เครื่องมือนี้ใช้ คู่มือรูปแบบบางแห่งใช้สี่ช่องว่างหรือแท็บแทน ขณะที่ข้อกำหนด JSON เองไม่ได้กำหนดการเยื้องแบบใดแบบหนึ่งโดยเฉพาะ

JSON.parse() กับ JSON.stringify() แตกต่างกันอย่างไร JSON.parse() แปลงสตริง JSON เป็นค่า JavaScript ส่วน JSON.stringify() ทำย้อนกลับ โดยแปลงค่า JavaScript เป็นสตริง JSON และรับอาร์กิวเมนต์การเยื้องสำหรับการพิมพ์แบบสวยงาม เครื่องมือนี้ไม่ได้ใช้ฟังก์ชันใดภายใน ซึ่งทำให้สามารถรักษาจำนวนเต็มขนาดใหญ่ได้อย่างแม่นยำ

เครื่องมือจัดรูปแบบ JSON: ทำให้ JSON สวยงามและตรวจสอบออนไลน์ฟรี