วิธีใช้งาน JSON Formatter
- วางข้อมูล: ก๊อป JSON จาก API, ไฟล์ config หรือ log แล้ววางลงในช่องซ้าย ระบบตรวจและจัดรูปแบบให้ทันทีโดยไม่ต้องกดปุ่ม
- อ่านผลตรวจ: ถ้ามีจุดผิด แถบด้านล่างจะบอกบรรทัดและคอลัมน์ พร้อมอธิบายเป็นภาษาไทยว่าผิดเพราะอะไรและควรแก้อย่างไร
- ซ่อมอัตโนมัติ: ถ้าเป็น JSON ที่ก๊อปมาจากโค้ด กดปุ่ม 🔧 ซ่อมอัตโนมัติ ระบบจะแก้ให้แล้วบอกว่าแก้อะไรไปบ้าง
- เอาไปใช้ต่อ: คัดลอก บันทึกเป็นไฟล์ หรือแปลงเป็น CSV เพื่อเปิดใน Excel ได้ทันที
- เปิดจากไฟล์ก็ได้: กด 📂 เปิดไฟล์ .json หรือลากไฟล์มาวางในช่องซ้ายตรง ๆ — ไฟล์ถูกอ่านด้วยเบราว์เซอร์ของคุณเอง ไม่ถูกอัปโหลดไปไหน
- ไล่หาจุดผิดในไฟล์ยาว ๆ: เลขบรรทัดขึ้นให้ทั้งสองช่อง บรรทัดที่ผิดติดแดงในแถบเลข และกดปุ่ม ⤵ พาไปที่บรรทัดที่ผิด เพื่อกระโดดไปถึงจุดนั้นได้เลย ไม่ต้องไล่เลื่อนหาเอง
- ดูโครงสร้างเป็นต้นไม้: กด 🌳 มุมมองต้นไม้ เพื่อพับ–กางดูทีละชั้น เหมาะกับ JSON ที่ซ้อนกันลึกจนอ่านจากตัวหนังสือไม่ไหว
- ดูเป็นตาราง: กด 📊 มุมมองตาราง เพื่ออ่านอาร์เรย์ของอ็อบเจ็กต์เป็นแถวเป็นคอลัมน์ — เลือกได้ว่าจะดูอาร์เรย์ชุดไหนในไฟล์ กดหัวคอลัมน์เพื่อเรียงลำดับ แล้วคัดลอกไปวางใน Excel หรือบันทึกเป็น CSV ได้จากในมุมมองนั้นเลย
- ปรับขนาดช่องได้ตามใจ — ลากเส้นคั่นกลางเพื่อให้ฝั่งที่กำลังดูอยู่กว้างขึ้น ลากแถบใต้ช่องเพื่อปรับความสูง ดับเบิลคลิกที่ตัวลากเพื่อกลับค่าเริ่มต้น (ใช้ปุ่มลูกศรแทนก็ได้เมื่อเลือกตัวลากอยู่) ค่าที่ปรับถูกจำไว้ในเบราว์เซอร์ให้ครั้งต่อไป
- กดปุ่ม ⛶ ที่มุมขวาบนของช่องไหนก็ได้เพื่อขยายช่องนั้นเต็มจอ — อยากจ้องแต่ JSON ดิบหรืออยากอ่านแต่ผลลัพธ์ก็ได้ทั้งคู่ กดปุ่มเดิมหรือ Esc เพื่อย่อกลับ
- คีย์ลัด: Ctrl+Enter จัดรูปแบบ · Ctrl+S บันทึกเป็นไฟล์ · ไฟล์ที่ export มาเป็นบรรทัดเดียวยาว ๆ กด ↩️ ตัดบรรทัดยาว เพื่อให้ขึ้นบรรทัดใหม่แทนการเลื่อนไปทางขวา
ทำไม JSON ถึงพัง — 5 สาเหตุที่เจอบ่อยที่สุด
JSON มีกฎที่เข้มกว่าที่หลายคนคิด เพราะมันไม่ใช่โค้ด JavaScript แม้หน้าตาจะคล้ายกันมาก ห้าข้อนี้คือสาเหตุที่เจอซ้ำ ๆ
| เขียนแบบนี้ ❌ | ต้องเป็นแบบนี้ ✅ | เหตุผล |
|---|---|---|
{name: "ก"} |
{"name": "ก"} |
ชื่อคีย์ต้องอยู่ในคำพูดคู่เสมอ ต่างจาก JavaScript ที่ละได้ |
{'name': 'ก'} |
{"name": "ก"} |
JSON รู้จักเฉพาะคำพูดคู่ " คำพูดเดี่ยวใช้ไม่ได้เลย |
[1, 2, 3,] |
[1, 2, 3] |
จุลภาคท้ายรายการ (trailing comma) ผิดกฎ แม้ JavaScript จะยอม |
{"a": 1} // ค่าแรก |
{"a": 1} |
JSON ไม่มีคอมเมนต์ ถ้าอยากใส่หมายเหตุต้องทำเป็นคีย์ปกติ |
{"n": .5} |
{"n": 0.5} |
ตัวเลขต้องมีเลขหน้าจุดทศนิยม และห้ามมีศูนย์นำหน้าอย่าง 007 |
เกร็ด: ถ้าต้องเก็บคอมเมนต์จริง ๆ ให้ใช้รูปแบบอย่าง JSON5 หรือ JSONC (แบบที่ VS Code ใช้ใน settings.json) แต่ต้องมั่นใจว่าปลายทางอ่านรูปแบบนั้นได้ ไม่งั้นให้ใช้ JSON มาตรฐานจะปลอดภัยกว่า
ภาษาไทยใน JSON ต้องระวังอะไรบ้าง
JSON เก็บภาษาไทยได้ตรง ๆ อยู่แล้วเมื่อไฟล์เป็น UTF-8 แต่มีสองเรื่องที่ทำให้คนสับสนบ่อย
- ภาษาไทยกลายเป็น
ไทย: บางภาษาโปรแกรม (เช่น PHP รุ่นเก่าหรือ Python ที่ไม่ได้ตั้งensure_ascii=False) จะแปลงอักขระที่ไม่ใช่ ASCII เป็นรหัส escape ซึ่งถูกต้องตามมาตรฐาน และอ่านกลับได้ค่าเดิมทุกประการ เครื่องมือนี้แสดงผลเป็นภาษาไทยที่อ่านออกให้เสมอ - ขนาดไฟล์: ภาษาไทย 1 ตัวอักษรกิน 3 ไบต์ใน UTF-8 ไม่ใช่ 1 ไบต์ ตัวเลขขนาดที่แสดงในหน้านี้จึงนับเป็นไบต์จริง ไม่ใช่จำนวนตัวอักษร
ความเป็นส่วนตัว
ข้อมูลที่วางลงไปไม่ถูกส่งออกจากเบราว์เซอร์ของคุณเลย ทุกอย่างประมวลผลด้วย JavaScript ในเครื่อง จึงใช้กับ token, ข้อมูลลูกค้า หรือ config ภายในองค์กรได้โดยไม่ต้องกังวล — ต่างจากเว็บจัดรูปแบบ JSON หลายเจ้าที่ส่งข้อมูลไปประมวลผลที่เซิร์ฟเวอร์ (อ่านนโยบายความเป็นส่วนตัว)
คำถามที่พบบ่อย (FAQ)
JSON ที่ก๊อปมาจากโค้ด JavaScript ใช้ไม่ได้ ทำอย่างไร
กดปุ่ม 🔧 ซ่อมอัตโนมัติ ระบบจะแปลงคำพูดเดี่ยวเป็นคำพูดคู่ ใส่คำพูดให้คีย์ที่ไม่ได้ครอบ ลบจุลภาคเกิน ตัดคอมเมนต์ออก และแปลงค่าอย่าง True/None ของ Python เป็นแบบ JSON พร้อมแจ้งว่าแก้อะไรไปบ้าง
ข้อมูลที่วางลงไปถูกส่งขึ้นเซิร์ฟเวอร์หรือไม่
ไม่ ทุกอย่างประมวลผลในเบราว์เซอร์ของคุณเอง ไม่มีการส่งข้อมูลออกไปที่ไหนทั้งสิ้น
ทำไมภาษาไทยกลายเป็น ไทย
เป็นการเขียนอักขระแบบ escape ซึ่งถูกต้องตามมาตรฐานและอ่านกลับได้ค่าเดิม เครื่องมือนี้แสดงผลเป็นภาษาไทยที่อ่านออกให้เสมอ
ต่างจากการกด Format ใน VS Code อย่างไร
นอกจากจัดรูปแบบแล้ว หน้านี้ยังบอกจุดผิดเป็นภาษาไทยพร้อมเลขบรรทัด ซ่อมไวยากรณ์ที่ผิด เรียงคีย์ ค้นค่าตามเส้นทาง และแปลงเป็น CSV ได้ในหน้าเดียวโดยไม่ต้องเปิดโปรแกรมอะไรเลย
ไฟล์ใหญ่แค่ไหนถึงจะไหว
ทดสอบแล้วไฟล์ระดับไม่กี่เมกะไบต์ยังลื่นบนเครื่องทั่วไป แต่เพราะทำงานในเบราว์เซอร์ ไฟล์ที่ใหญ่มาก ๆ (หลายสิบเมกะไบต์) อาจทำให้หน้าค้างชั่วครู่ — กรณีนั้นแนะนำให้ใช้เครื่องมือบนเครื่องอย่าง jq แทน
เครื่องมืออื่นที่อาจได้ใช้
- XML Formatter — จัดรูปแบบและตรวจสอบ XML พร้อมเปิดไฟล์ใบกำกับภาษี RSS และ sitemap
- Base64 Encode / Decode — เข้ารหัสถอดรหัสข้อความ ไฟล์ และถอดดู JWT
- เลือกสี & แปลงค่าสี — HEX, RGB, HSL, CMYK พร้อมตรวจค่าความต่างสีตาม WCAG
- สุ่มรหัสผ่าน — สร้างรหัสผ่านที่เดายากพร้อมบอกระดับความปลอดภัย
- นับคำ / ตัวอักษร — นับคำภาษาไทยได้ถูกต้องด้วย Intl.Segmenter
- ดูเครื่องมือทั้งหมดของ Thai Toolbox