Softonic

ตัวจัดรูปแบบ JSON

ขั้นตอน 1 / 4 ตัวจัดรูปแบบ JSON
ถัดไป: ตัวเลือก

วาง JSON จากคำตอบของ API, ไฟล์กำหนดค่า, webhook หรือบันทึก log แล้วเลือกจัดรูปแบบ ย่อขนาด หรือตรวจสอบความถูกต้อง ตัวจัดรูปแบบจะขยาย object และ array ที่ซ้อนกันด้วยการเยื้อง 2 หรือ 4 ช่องว่าง ตัว Minify จะลบช่องว่างที่ไม่จำเป็น และตัวตรวจสอบจะยืนยันว่าข้อความเป็น JSON ที่ถูกต้องก่อนที่คุณจะคัดลอกผลลัพธ์

วิธีจัดรูปแบบ JSON

  1. 1

    วาง JSON ของคุณ

    เพิ่มค่า JSON ที่สมบูรณ์: object, array, string, number, boolean หรือ `null`

  2. 2

    เลือกการทำงาน

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

  3. 3

    เลือกการเยื้อง

    สำหรับผลลัพธ์ที่จัดรูปแบบแล้ว เลือก 2 ช่องว่างสำหรับโปรเจกต์เว็บ หรือ 4 ช่องว่างเมื่อเป็นมาตรฐานของ repository

  4. 4

    คัดลอกผลลัพธ์

    ตรวจข้อความจาก parser หรือผลลัพธ์ที่จัดรูปแบบแล้ว จากนั้นคัดลอกกลับไปยัง editor, API client หรือเอกสารของคุณ

ตัวจัดรูปแบบ JSON นี้ทำอะไรได้บ้าง

  • จัดรูปแบบ JSON: เปลี่ยนอินพุตแบบกะทัดรัด เช่น {"a":1,"b":[1,2,3]} ให้เป็น JSON ที่อ่านง่ายพร้อมการเยื้อง
  • ย่อขนาด JSON: ลบช่องว่างที่มีไว้เพื่อให้อ่านง่ายเท่านั้น เหมาะกับตัวอย่างสั้น ๆ การฝังข้อมูล และ payload สำหรับส่งผ่านระบบ
  • ตรวจสอบไวยากรณ์: ตรวจว่าข้อความที่วางสามารถ parse เป็น JSON ได้หรือไม่ นี่คือการตรวจไวยากรณ์ ไม่ใช่การตรวจด้วย JSON Schema
  • รองรับค่ารากของ JSON ทุกรูปแบบ: object และ array เป็นรูปแบบที่พบบ่อย แต่ข้อความ JSON อาจเป็น string, number, true, false หรือ null ก็ได้
  • ใช้งานเป็นลำดับง่าย ๆ: วางข้อมูล เลือกการทำงาน ตรวจผลลัพธ์ แล้วคัดลอกผลลัพธ์

สิ่งที่เครื่องมือนี้ตั้งใจไม่เปลี่ยน

  • ไม่ซ่อม JSON ที่ผิดรูปแบบให้อัตโนมัติ ข้อความจาก parser จะบอกว่าควรแก้ส่วนใด
  • ไม่รับ wrapper แบบ JSONP เช่น callback({...})
  • ไม่รับ comment หรือเครื่องหมาย comma ท้ายรายการจาก JSONC หากคุณยังไม่ได้ลบออกก่อน
  • ไม่เรียงลำดับคีย์ของ object ลำดับเดิมจะถูกเก็บไว้เท่าที่ parser และ serializer อนุญาต
  • ไม่ตรวจ business rule, field บังคับ หรือ schema ของ API ให้ใช้ตัวตรวจสอบ JSON Schema สำหรับขั้นตอนนั้น

การเลือกวิธีจัดรูปแบบ

สถานการณ์ การทำงานที่เหมาะที่สุด ช่วยอย่างไร
อ่านคำตอบจาก API จัดรูปแบบด้วย 2 ช่องว่าง object และ array ที่ซ้อนกันอ่านไล่ได้ง่ายขึ้น
ทำให้ตรงกับสไตล์ของ repository จัดรูปแบบด้วย 2 หรือ 4 ช่องว่าง การเยื้องที่สม่ำเสมอทำให้ code review อ่านง่าย
ฝัง payload ใน request ย่อขนาด ลบช่องว่างโดยไม่เปลี่ยนค่าของ JSON
ตรวจข้อมูลที่คัดลอกจาก log ตรวจสอบ ยืนยันว่าข้อความที่วางเป็น JSON ที่สมบูรณ์ก่อนนำไปใช้ต่อ
เตรียมเอกสาร API จัดรูปแบบ ตัวอย่างตรวจดูและคัดลอกได้ง่ายขึ้น

ปัญหาไวยากรณ์ JSON ที่ตรวจพบได้

ข้อความจาก parser สาเหตุที่พบบ่อย วิธีแก้
Unexpected token ' at position X ใช้เครื่องหมายคำพูดเดี่ยวกับคีย์หรือ string ใช้เครื่องหมายคำพูดคู่สำหรับ string ใน JSON
Unexpected end of JSON input ขาดวงเล็บปีกกา วงเล็บเหลี่ยม หรือเครื่องหมายคำพูดปิด ตรวจส่วนท้ายของข้อความที่วาง
Unexpected token , at position X มี comma หลังรายการสุดท้าย ลบ comma ท้ายรายการ
Unexpected token a at position X คีย์ไม่มีเครื่องหมายคำพูด, NaN หรือ undefined ใส่เครื่องหมายคำพูดให้คีย์และใช้เฉพาะค่าที่ JSON รองรับ
Unexpected token / at position X คัดลอก comment มาจาก JSONC หรือ JavaScript ลบ comment แบบ // และ /* */ ก่อนตรวจสอบ

เคล็ดลับใช้งานจริง

  • เมื่อรีวิวคำตอบ ให้จัดรูปแบบก่อน และย่อขนาดเฉพาะเมื่อจำเป็นต้องใช้ payload แบบกะทัดรัดจริง ๆ
  • ตรวจสอบก่อนวาง JSON ลงในเอกสาร ticket หรือ API client โดยเฉพาะเมื่อคัดลอกมาจาก log เพียงบางส่วน
  • รักษามาตรฐานการเยื้องของโปรเจกต์ไว้ การเปลี่ยนไฟล์เดิมจาก 2 ช่องว่างเป็น 4 ช่องว่างอาจทำให้ diff อ่านยาก
  • หลีกเลี่ยงการวาง secret, credential สำหรับ production หรือข้อมูลลูกค้าลงในเครื่องมือเว็บทั่วไป สำหรับ payload ที่อ่อนไหว ให้ใช้เครื่องมือภายในหรือเครื่องมือ offline ที่องค์กรอนุมัติ

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

ไม่ใช่ เครื่องมือนี้ตรวจเฉพาะไวยากรณ์ของ JSON เท่านั้น หากต้องยืนยัน field บังคับ ค่าที่อนุญาต หรือโครงสร้าง object ให้ส่งผลลัพธ์ไปตรวจด้วย JSON Schema validator หลังจาก parse ได้ถูกต้องแล้ว

JSON แบบเข้มงวดไม่อนุญาต comment หรือ comma ท้ายรายการ ให้ลบ comment สไตล์ JSONC และ comma ตัวสุดท้ายก่อนตรวจสอบหรือจัดรูปแบบ

ใช้สไตล์ที่โปรเจกต์ของคุณใช้อยู่แล้ว 2 ช่องว่างพบบ่อยใน JavaScript และไฟล์กำหนดค่าบนเว็บ ส่วน 4 ช่องว่างอาจอ่านง่ายกว่าใน repository ฝั่ง backend บางแบบ

ควรหลีกเลี่ยงการวาง secret, access token, credential หรือข้อมูลลูกค้าลงในตัวจัดรูปแบบเว็บทั่วไป สำหรับ payload ที่อ่อนไหว ให้ใช้เครื่องมือภายในหรือ offline ที่ได้รับอนุมัติ

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

เครื่องมือนี้มีให้บริการในภาษาอื่น