JSON Formatter & Validator ออนไลน์ฟรี — จัดรูปแบบและแก้ไข JSON ทันที
จัดรูปแบบ ตรวจสอบ และบีบอัด JSON ได้ทันทีในเบราว์เซอร์ของคุณ JSON formatter ฟรี พร้อม syntax highlighting, การตรวจจับข้อผิดพลาด และไม่ต้องสมัครสมาชิก
JSON ที่ไม่ได้จัดรูปแบบอ่านแทบไม่ออก แค่ลืมจุลภาคเดียวหรือวงเล็บไม่ครบก็พังทั้งหมด JSON formatter ที่ดีแก้ปัญหาทั้งสองอย่างได้ — ช่วยจัดระเบียบ JSON ที่รกรุงรังและตรวจจับข้อผิดพลาดได้ทันที
JSON คืออะไร?
JSON (JavaScript Object Notation) คือรูปแบบข้อมูลที่ใช้กันแพร่หลายที่สุดสำหรับ APIs, ไฟล์ config และการแลกเปลี่ยนข้อมูลระหว่างระบบต่าง ๆ มีหน้าตาแบบนี้:
{
"name": "John Doe",
"age": 30,
"email": "john@example.com",
"skills": ["JavaScript", "Python", "SQL"]
}
เมื่อ JSON มาจาก API หรือ log file มักจะมีหน้าตาแบบนี้แทน:
{"name":"John Doe","age":30,"email":"john@example.com","skills":["JavaScript","Python","SQL"]}
ทั้งสองมีข้อมูลเหมือนกันทุกประการ แบบแรกอ่านได้ง่าย แบบที่สองต้องใช้ formatter ช่วย
วิธีจัดรูปแบบ JSON ออนไลน์
ใช้งาน JSON Formatter ของเรา:
- วาง JSON ลงในช่องข้อความ
- formatter จะตรวจจับและแสดงข้อผิดพลาดโดยอัตโนมัติ
- คลิก Format เพื่อจัดรูปแบบพร้อมการย่อหน้าที่เหมาะสม
- คัดลอกผลลัพธ์หรือดาวน์โหลดเป็นไฟล์
.json
การจัดรูปแบบเกิดขึ้นทันทีและทำงานแบบออฟไลน์ได้หลังจากโหลดหน้าครั้งแรก
การตรวจสอบ JSON — ตรวจจับข้อผิดพลาดอะไรได้บ้าง?
JSON ที่ถูกต้องต้องปฏิบัติตามกฎที่เข้มงวด ข้อผิดพลาดทั่วไปที่ validator ตรวจจับได้:
| ข้อผิดพลาด | ตัวอย่าง |
|---|---|
| Trailing comma | {"key": "value",} |
| Single quotes | {'key': 'value'} |
| Unquoted keys | {key: "value"} |
| ขาด comma | {"a": 1 "b": 2} |
| วงเล็บไม่ปิด | {"key": [1, 2, 3} |
| Comments | {"key": "value" // comment} |
JSON ไม่อนุญาตให้มี trailing commas, single quotes, unquoted keys หรือ comments — นิสัยที่ติดมาจาก JavaScript ซึ่งทำให้การ parse JSON แบบเข้มงวดล้มเหลว
Beautify vs. Minify
Beautify (pretty-print) เพิ่มการย่อหน้าและการขึ้นบรรทัดใหม่เพื่อให้มนุษย์อ่านได้ง่าย ใช้เมื่อต้องการอ่านหรือดีบัก JSON
Minify ลบช่องว่างทั้งหมดเพื่อให้ได้ไฟล์ขนาดเล็กที่สุด ใช้เมื่อส่ง JSON ใน API requests หรือจัดเก็บในที่ที่ขนาดไฟล์มีความสำคัญ
ตัวอย่าง API response ที่ beautify แล้ว:
{
"status": "success",
"data": {
"id": 123,
"name": "Product Name"
}
}
Response เดียวกันเมื่อ minify แล้ว:
{"status":"success","data":{"id":123,"name":"Product Name"}}
เวอร์ชัน minify มีขนาดเล็กกว่า 30–50% ขึ้นอยู่กับโครงสร้างข้อมูล
การย่อหน้า JSON: 2 spaces vs. 4 spaces vs. tabs
เป็นเรื่องของสไตล์ส่วนตัว แนวทางที่นิยมใช้กัน:
- 2 spaces — ค่าเริ่มต้นใน JavaScript, Node.js และโปรเจกต์เว็บส่วนใหญ่
- 4 spaces — นิยมในโปรเจกต์ Python และ Java
- Tabs — ใช้ในบางโปรเจกต์เก่าและ Go
formatter ของเราตั้งค่าเริ่มต้นที่ 2 spaces แต่คุณสามารถเลือกได้
การทำงานกับไฟล์ JSON ขนาดใหญ่
ไฟล์ JSON ขนาดใหญ่ (API responses, database exports, log files) อาจมีขนาดหลายร้อยเมกะไบต์ เนื่องจาก formatter ของเรารันทั้งหมดในเบราว์เซอร์ของคุณโดยใช้ JavaScript จึงสามารถจัดการไฟล์ขนาดใหญ่ได้โดยไม่ต้องส่งข้อมูลไปยัง server — สำคัญมากเมื่อข้อมูลมีข้อมูลที่ละเอียดอ่อน
สำหรับไฟล์ขนาดใหญ่มาก (100MB+) ประสิทธิภาพของเบราว์เซอร์ขึ้นอยู่กับหน่วยความจำที่มีในอุปกรณ์
กรณีการใช้งาน JSON ที่พบบ่อย
ดีบัก API responses วางข้อมูล response ดิบจาก Postman, curl หรือแท็บ network ของเบราว์เซอร์ formatter จะแสดงโครงสร้างได้อย่างชัดเจนและไฮไลต์ข้อผิดพลาดในการ parse
อ่านไฟล์ config
package.json, tsconfig.json, .eslintrc.json — ไฟล์ config มักถูก minify หรือจัดรูปแบบไม่ดี วางเข้ามาเพื่ออ่านได้ง่ายขึ้น
แก้ไข JSON ที่เสียหาย หากคุณได้รับ JSON ที่มี syntax errors validator จะระบุบรรทัดและตัวอักษรที่ผิดพลาดได้อย่างแม่นยำ เพื่อให้คุณแก้ไขได้รวดเร็ว
แปลงสำหรับเครื่องมืออื่น หลังจากจัดรูปแบบแล้ว คุณสามารถแปลง JSON เป็นรูปแบบอื่นได้โดยใช้ตัวแปลง JSON to CSV หรือ YAML to JSON ของเรา
JSON vs. YAML vs. XML
| รูปแบบ | ความสะดวกในการอ่าน | ความยาวโค้ด | กรณีใช้งาน |
|---|---|---|---|
| JSON | ดี | น้อย | APIs, เว็บ, ไฟล์ config |
| YAML | ดีเยี่ยม | น้อยมาก | ไฟล์ config, DevOps (Docker, Kubernetes) |
| XML | ไม่ดี | มาก | ระบบเก่า, SOAP APIs, เอกสาร |
JSON ได้กลายเป็นค่าเริ่มต้นสำหรับ APIs และไฟล์ config สมัยใหม่ YAML เป็นที่นิยมสำหรับ config ที่มนุษย์แก้ไขเอง ส่วน XML ส่วนใหญ่เป็นระบบเก่าแล้ว
Keyboard shortcuts
ใน JSON Formatter ของเรา:
Ctrl + Shift + F— format / beautifyCtrl + Shift + M— minifyCtrl + A— เลือกทั้งหมดCtrl + C— คัดลอกผลลัพธ์
สรุป
JSON formatter คือหนึ่งในเครื่องมือที่นักพัฒนาใช้บ่อยที่สุดในการทำงาน JSON Formatter ของเรารันในเบราว์เซอร์ของคุณ ทำงานแบบออฟไลน์ได้ รองรับไฟล์ขนาดใหญ่ และตรวจจับ syntax errors ได้ทันที — ไม่ต้องสมัครบัญชี ไม่ต้องอัปโหลด ไม่มีข้อจำกัด