ตัวจัดรูปแบบ JSON: ย่อและจัดรูปแบบ JSON ให้อ่านง่าย

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

JSON คืออะไร?

JSON ย่อมาจาก JavaScript Object Notation เป็นรูปแบบข้อความสำหรับจัดเก็บและส่งข้อมูล เซิร์ฟเวอร์เว็บใช้ JSON เพื่อส่งข้อมูลไปยังแอปและเบราว์เซอร์ โปรแกรมใช้ JSON สำหรับไฟล์การตั้งค่า JSON จัดเก็บข้อมูลเป็นออบเจ็กต์ ซึ่งเขียนด้วยวงเล็บปีกกา {} และอาร์เรย์ ซึ่งเขียนด้วยวงเล็บเหลี่ยม [] ภายในออบเจ็กต์ ข้อมูลแต่ละส่วนจะมีชื่อที่เรียกว่าคีย์และมีค่า ค่าอาจเป็นสตริง ตัวเลข true false null หรือออบเจ็กต์หรืออาร์เรย์อื่น

ออบเจ็กต์ JSON ขนาดเล็กมีลักษณะดังนี้:

1{
2  "name": "John Doe",
3  "age": 30,
4  "isEmployee": true
5}
6

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

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

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

หากข้อความไม่ใช่ JSON ที่ถูกต้อง เครื่องมือจะหยุดและแสดงข้อผิดพลาดแทนการคาดเดาว่าผู้ใช้ต้องการอะไร

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

วิธีการย่อ JSON

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

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

ก่อน:

1{
2  "name": "John Smith",
3  "age": 32,
4  "skills": [
5    "JavaScript",
6    "HTML",
7    "CSS"
8  ]
9}
10

หลัง:

1{"name":"John Smith","age":32,"skills":["JavaScript","HTML","CSS"]}
2

สูตรการย่อ JSON

พื้นที่ที่ประหยัดได้จากการย่อเขียนได้ดังนี้:

$\text{พื้นที่ที่ประหยัดได้} = \left(1 - \frac{\text{ขนาดหลังย่อ}}{\text{ขนาดเดิม}}\right) \times 100\%$

สำหรับตัวอย่างข้างต้น เวอร์ชันที่จัดรูปแบบแล้วมีขนาด 98 ไบต์ และเวอร์ชันที่ย่อแล้วมีขนาด 67 ไบต์:

$\left(1 - \frac{67}{98}\right) \times 100\% \approx 32\%$

ปริมาณที่ประหยัดได้จริงขึ้นอยู่กับจำนวนช่องว่างและการเยื้องในเอกสารเดิม เอกสารที่มีการซ้อนระดับลึกและการเยื้อง 4 ช่องว่างจะมีขนาดลดลงมากกว่าเอกสารที่มีรูปแบบกะทัดรัดอยู่แล้ว

วิธีจัดรูปแบบ JSON ให้อ่านง่าย

วาง JSON ลงในช่องป้อนข้อมูล โดยอาจเป็น JSON ที่ย่อแล้วหรือจัดรูปแบบไว้อย่างไม่เป็นระเบียบก็ได้
คลิก "จัดรูปแบบ"
เครื่องมือเพิ่มการเยื้อง 2 ช่องว่าง ขึ้นบรรทัดใหม่ต่อคีย์หรือรายการอาร์เรย์ และเว้นวรรคหลังโคลอนแต่ละตัว
คลิก "คัดลอก" เหนือผลลัพธ์เพื่อคัดลอก

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

ก่อน:

1{"name":"John Smith","age":32,"skills":["JavaScript","HTML","CSS"]}
2

หลัง:

1{
2  "name": "John Smith",
3  "age": 32,
4  "skills": [
5    "JavaScript",
6    "HTML",
7    "CSS"
8  ]
9}
10

ออบเจ็กต์หรืออาร์เรย์ว่างจะยังอยู่ในบรรทัดเดียว เช่น {} หรือ [] แทนที่จะแบ่งออกเป็นสามบรรทัด

ข้อผิดพลาด JSON ทั่วไปที่เครื่องมือนี้ตรวจจับได้

JSON มีไวยากรณ์ที่เคร่งครัด ซึ่งเคร่งครัดกว่าภาษาโปรแกรมทั่วไป เครื่องมือนี้จะปฏิเสธข้อความที่ละเมิดกฎข้อใดข้อหนึ่งต่อไปนี้ และแสดงข้อความ "Invalid JSON" แทนผลลัพธ์:

ไม่มีเครื่องหมายจุลภาคคั่นระหว่างค่าสองค่า
มีเครื่องหมายจุลภาคต่อท้ายหลังรายการสุดท้ายในออบเจ็กต์หรืออาร์เรย์ (JSON ไม่อนุญาต ต่างจาก JavaScript)
คีย์ไม่ได้อยู่ภายในเครื่องหมายอัญประกาศคู่
ใช้เครื่องหมายอัญประกาศเดี่ยวครอบสตริงแทนเครื่องหมายอัญประกาศคู่
วงเล็บเหลี่ยมหรือวงเล็บปีกกาไม่ตรงกันหรือขาดหายไป
ลำดับหลีกภายในสตริงไม่ถูกต้องหรือไม่สมบูรณ์ เช่น มีแบ็กสแลชเดี่ยว
มีอักขระควบคุม เช่น การขึ้นบรรทัดใหม่จริงหรือแท็บ พิมพ์อยู่ภายในสตริง แทนที่จะเขียนเป็น \n หรือ \t
ตัวเลขอยู่ในรูปแบบที่ JSON ไม่อนุญาต เช่น มีเลขศูนย์นำหน้า (01) มีจุดทศนิยมต่อท้าย (1.) หรือมีเครื่องหมายบวกนำหน้า (+1)

JSON ยังไม่มีไวยากรณ์สำหรับความคิดเห็น ข้อความที่ขึ้นต้นด้วย // หรือ /* ไม่ถือเป็นส่วนหนึ่งของไวยากรณ์ JSON ดังนั้นการวาง JSON ที่มีความคิดเห็นจะทำให้เกิดข้อผิดพลาด "Invalid JSON" แทนที่จะได้ JSON ที่ลบความคิดเห็นออกอย่างเงียบ ๆ หากต้องการจัดรูปแบบไฟล์ดังกล่าว ให้ลบความคิดเห็นออกก่อน

กรณีการใช้งานตัวจัดรูปแบบ JSON

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

ทางเลือกอื่น

โปรแกรมแก้ไขโค้ด เช่น Visual Studio Code สามารถจัดรูปแบบไฟล์ JSON ได้โดยไม่ต้องออกจากโปรแกรม เครื่องมือบรรทัดคำสั่ง เช่น jq สามารถจัดรูปแบบและกรอง JSON เป็นส่วนหนึ่งของสคริปต์ได้ ภาษาโปรแกรมต่าง ๆ ยังมีไลบรารี JSON ให้ใช้งาน เช่น โมดูล json ของ Python หรือออบเจ็กต์ JSON ในตัวของ JavaScript ซึ่งโปรแกรมส่วนใหญ่ใช้แยกวิเคราะห์ JSON เป็นโครงสร้างข้อมูลของตนเอง ตัวจัดรูปแบบออนไลน์เช่นนี้มีประโยชน์เมื่อต้องการตรวจสอบอย่างรวดเร็วเพียงครั้งเดียวโดยไม่ต้องติดตั้งอะไร

ประวัติของ JSON

Douglas Crockford กำหนด JSON ขึ้นในช่วงต้นทศวรรษ 2000 โดยอิงจากวิธีที่ JavaScript เขียนลิเทอรัลของออบเจ็กต์ แต่ได้รับการออกแบบให้ภาษาโปรแกรมใด ๆ ก็สามารถอ่านและเขียนได้ รูปแบบนี้ได้รับการบันทึกเผยแพร่ต่อสาธารณะครั้งแรกประมาณปี 2001 และต่อมาได้รับการทำให้เป็นมาตรฐานในรูป RFC 4627 เมื่อปี (11,800 ซม.) 2006 ในรูป ECMA-404 เมื่อปี (1,030 ซม.) 2013 และในรูป RFC 8259 เมื่อปี (21,000 ซม.) 2017 เมื่อ API ของเว็บเติบโตขึ้นตลอดช่วงทศวรรษ 2000 JSON ก็เข้ามาแทนที่ XML ในฐานะรูปแบบที่ใช้กันมากที่สุดสำหรับส่งข้อมูลระหว่างเซิร์ฟเวอร์กับเบราว์เซอร์ โดยหลักเพราะมีขนาดสั้นกว่าและสอดคล้องโดยตรงกับโครงสร้างข้อมูลที่มีอยู่ใน JavaScript อยู่แล้ว เครื่องมือจัดรูปแบบและตรวจสอบความถูกต้องจึงเกิดขึ้นตามมา เมื่อเอกสาร JSON มีขนาดใหญ่ขึ้นและมีการซ้อนโครงสร้างมากขึ้น

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

การย่อจะลบความคิดเห็นออกจาก JSON หรือไม่ ไม่ JSON ไม่มีไวยากรณ์สำหรับความคิดเห็น และเครื่องมือนี้ก็ไม่ได้เพิ่มไวยากรณ์ดังกล่าว หากข้อมูลนำเข้ามีความคิดเห็นรูปแบบ // หรือ /* เครื่องมือจะแจ้งข้อผิดพลาด "Invalid JSON" แทนการจัดรูปแบบ ให้ลบความคิดเห็นออกก่อนวางข้อความ

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

เครื่องมือจัดรูปแบบให้อ่านง่ายใช้การเยื้องแบบใด ใช้การเยื้องระดับละสองช่องว่าง และมีช่องว่างหลังเครื่องหมายโคลอนแต่ละตัว

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

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

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

เอกสารอ้างอิง

"Introducing JSON." JSON.org, https://www.json.org/json-en.html.
Bray, T., บรรณาธิการ "The JavaScript Object Notation (JSON) Data Interchange Format." RFC 8259, IETF, ธันวาคม 2017, https://www.rfc-editor.org/rfc/rfc8259.
"ECMA-404: The JSON Data Interchange Syntax." Ecma International, https://www.ecma-international.org/publications-and-standards/standards/ecma-404/.
"JSON." MDN Web Docs, Mozilla, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON.

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