JSON Formatter & Validator

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

JSON formatter นี้ทำอะไรได้บ้าง

• จัดรูปแบบ JSON (beautify) ด้วยการเยื้อง 2 ช่องว่าง 4 ช่องว่าง หรือแท็บ ผลลัพธ์จะคงลำดับคีย์เดิมไว้ เว้นแต่คุณจะเลือก เรียงคีย์
• ย่อขนาด JSON (minify) โดยตัดช่องว่างและการขึ้นบรรทัดใหม่ทั้งหมดออก ตัวเลขขนาดใต้ผลลัพธ์จะบอกว่าคุณประหยัดไปได้กี่ไบต์
• ตรวจสอบ JSON แบบเรียลไทม์ตาม RFC 8259 ซึ่งเป็นมาตรฐาน JSON ฉบับปัจจุบัน บรรทัดสถานะจะเปลี่ยนเป็นสีเขียวทันทีที่เอกสารถูกต้อง
• แก้ข้อผิดพลาดที่พบบ่อย โดยอัตโนมัติ ได้แก่ จุลภาคต่อท้าย เครื่องหมายคำพูดเดี่ยว คีย์ที่ไม่มีเครื่องหมายคำพูด คอมเมนต์ ค่าแบบ Python อย่าง True, None และ NaN รวมถึงตัวเลขอย่าง .5 หรือ +1
• โหลดไฟล์ ด้วยปุ่ม เปิดไฟล์ หรือลากไฟล์ .json มาวางในช่องอินพุต จากนั้นดาวน์โหลดผลลัพธ์ หรือส่งกลับไปเป็นอินพุตเพื่อประมวลผลอีกรอบ

ทำไมข้อความแจ้งข้อผิดพลาดจึงสำคัญกว่าสีแดง

ตัวตรวจสอบ JSON ออนไลน์ส่วนใหญ่บอกแค่ว่ามีบางอย่างผิด เบราว์เซอร์เองก็ไม่ได้ดีกว่านัก JSON.parse ใน Chrome รายงานว่า Unexpected token } in JSON at position 148 ส่วน Firefox บอกว่า expected property name or '}' และไม่มีตัวไหนบอกว่าต้องไปดูที่บรรทัดใด เครื่องมือนี้มีตัวแยกวิเคราะห์ (parser) ของตัวเองที่จำตำแหน่งเริ่มต้นของทุกโทเค็นไว้ เมื่อการแยกวิเคราะห์หยุดลง คุณจะได้หมายเลขบรรทัดและคอลัมน์ ข้อความจากบรรทัดนั้นพร้อมเครื่องหมาย ^ ชี้ใต้อักขระที่ผิด และคำแนะนำที่อ่านเข้าใจง่าย เช่น อาจขาดเครื่องหมายจุลภาคระหว่างพร็อพเพอร์ตีสองตัว ปุ่ม ไปที่ข้อผิดพลาด จะย้ายเคอร์เซอร์ไปยังตำแหน่งนั้นในช่องอินพุตทันที

ข้อผิดพลาดที่เราพบบ่อยที่สุดในเอกสารที่ผู้ใช้วางเข้ามา:

อินพุต	ปัญหา	JSON ที่ถูกต้อง
{'name': 'Ada'}	เครื่องหมายคำพูดเดี่ยว	{"name": "Ada"}
{name: "Ada"}	คีย์ไม่มีเครื่องหมายคำพูด	{"name": "Ada"}
[1, 2, 3,]	จุลภาคต่อท้าย	[1, 2, 3]
{"a": 1 "b": 2}	ขาดจุลภาค	{"a": 1, "b": 2}
{"ok": True}	ค่า literal ของ Python	{"ok": true}
{"x": 007}	เลขศูนย์นำหน้า	{"x": 7} หรือ {"x": "007"}
// comment	คอมเมนต์	ใช้ใน JSON ไม่ได้

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

ตัวเลขขนาดใหญ่ ลำดับคีย์ และสิ่งอื่นที่มักเสียหาย

เครื่องมือจัดรูปแบบ JSON หลายตัวทำงานโดยเรียก JSON.parse แล้วตามด้วย JSON.stringify การแปลงไปกลับแบบนี้ทำให้ข้อมูลเสียหายโดยไม่มีใครสังเกต ID ของ Twitter หรือ Snowflake อย่าง 1234567890123456789 เกินขีดจำกัด 2^53 ของตัวเลขใน JavaScript และจะกลับมาเป็น 1234567890123456800 ค่า 1.0 กลายเป็น 1 และ 1e3 กลายเป็น 1000 เครื่องมือนี้ไม่แปลงตัวเลขเป็นเลขทศนิยมแบบ floating point เลย แต่คัดลอกค่า literal ทุกตัวตามที่เขียนไว้ทุกตัวอักษร ผลลัพธ์จึงเป็นการจัดรูปแบบใหม่ที่ตรงกับอินพุต ไม่ใช่การตีความข้อมูลใหม่ หลักการเดียวกันใช้กับลำดับ escape ภายในสตริงด้วย "\u00e9" จะยังคงเป็น "\u00e9" และไม่ถูกแปลงเป็น "é"

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

จัดรูปแบบ JSON กับย่อขนาด JSON ควรใช้แบบไหนเมื่อไร

JSON ที่จัดรูปแบบแล้วมีไว้ให้คนอ่าน ใช้เมื่อคุณตรวจดูการตอบกลับจาก API เขียน package.json, tsconfig.json หรือเอกสาร OpenAPI หรือเมื่อเก็บ fixtures ไว้ใน repository ที่ต้องการให้ diff แสดงการเปลี่ยนแปลงทีละบรรทัด การเยื้อง 2 ช่องว่างเป็นธรรมเนียมในโลกของ JavaScript การเยื้อง 4 ช่องว่างพบบ่อยในโปรเจกต์ Python และ .NET ส่วนแท็บช่วยให้ผู้อ่านแต่ละคนเลือกความกว้างเองได้

JSON ที่ย่อขนาดแล้วมีไว้ให้เครื่องอ่าน ช่องว่างมักกินพื้นที่ 20 ถึง 40 เปอร์เซ็นต์ของเอกสารที่จัดรูปแบบแล้ว การตัดออกจึงลดขนาดข้อมูลที่ส่งไปยังเบราว์เซอร์ ค่าที่เก็บใน Redis หรือในคอลัมน์ของฐานข้อมูล และแอตทริบิวต์ data-* ที่ฝังอยู่ใน HTML ได้ gzip ช่วยลดส่วนต่างนี้ได้บางส่วน แต่เวอร์ชันที่ย่อขนาดแล้วก็ยังบีบอัดได้เล็กกว่า ตัวเลขขนาดใต้ผลลัพธ์จะแสดงส่วนต่างที่แท้จริงสำหรับเอกสารของคุณ

ทำงานกับ JSON ในเทอร์มินัลและในโปรแกรมแก้ไขโค้ด

สำหรับไฟล์ที่ต้องประมวลผลซ้ำๆ เครื่องมือบรรทัดคำสั่งจะเร็วกว่าเว็บไซต์ใดๆ jq . file.json ใช้จัดรูปแบบ jq -c . file.json ใช้ย่อขนาด และ python -m json.tool file.json ใช้ได้ทุกเครื่องที่ติดตั้ง Python ไว้ Visual Studio Code จัดรูปแบบ JSON ด้วย Shift+Alt+F และตรวจสอบกับ schema เมื่อคุณเพิ่มพร็อพเพอร์ตี $schema หน้านี้มีไว้สำหรับกรณีอื่นๆ เช่น การตอบกลับที่คัดลอกมาจากแท็บ Network บรรทัดหนึ่งใน log ส่วนหนึ่งของคอนฟิกจากวิกิ หรือการตรวจสอบอย่างรวดเร็วบนเครื่องที่คุณติดตั้งโปรแกรมใดๆ ไม่ได้

เครื่องมือที่เกี่ยวข้องบนเว็บไซต์นี้: ตัวเข้ารหัสและถอดรหัส Base64 ใช้ถอดรหัสส่วน payload ของ JWT ซึ่งเป็น JSON ที่เข้ารหัสแบบ Base64url เครื่องมือแปลง UNIX Timestamp แปลงตัวเลข createdAt ที่พบในการตอบกลับจาก API ส่วนใหญ่ให้เป็นวันที่ที่อ่านได้ และ ตัวถอดรหัส UUID บอกเวอร์ชันและเวลาของตัวระบุในข้อมูลของคุณ ดูเครื่องมืออื่นๆ ได้ในหมวด เครื่องมือสำหรับนักพัฒนา

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

JSON ของฉันถูกอัปโหลดไปยังเซิร์ฟเวอร์หรือไม่?

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

ทำไมตัวตรวจสอบจึงไม่ยอมรับคอมเมนต์ ทั้งที่โปรแกรมแก้ไขโค้ดของฉันยอมรับ?

Douglas Crockford ผู้สร้าง JSON ตั้งใจตัดคอมเมนต์ออกจากรูปแบบนี้ เพื่อป้องกันไม่ให้มันถูกนำไปใช้เป็นคำสั่งสำหรับตัวแยกวิเคราะห์ ไฟล์อย่าง tsconfig.json หรือ .vscode/settings.json ในทางเทคนิคแล้วเป็น JSONC ซึ่งเป็นรูปแบบขยายที่โปรแกรมแก้ไขโค้ดรองรับ ตัวแยกวิเคราะห์แบบเข้มงวดใน API ฐานข้อมูล และภาษาโปรแกรมส่วนใหญ่จะปฏิเสธคอมเมนต์ ปุ่มแก้ไขจะลบคอมเมนต์ออกเพื่อให้ผลลัพธ์ใช้ได้ทุกที่

จัดรูปแบบ JSON Lines หรือหลายออบเจกต์พร้อมกันได้ไหม?

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

ขนาดสูงสุดคือเท่าไร?

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

การเรียงคีย์ทำให้ข้อมูลเปลี่ยนไปหรือไม่?

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

จะ escape JSON เพื่อฝังลงในสตริงได้อย่างไร?

ย่อขนาดก่อน แล้ว escape แบ็กสแลชและเครื่องหมายคำพูดคู่ทุกตัว หลายภาษามีวิธีทำโดยตรง เช่น JSON.stringify(JSON.stringify(obj)) ใน JavaScript หรือ json.dumps(json.dumps(obj)) ใน Python จะได้สตริง JSON ที่มีข้อความ JSON อยู่ข้างใน