เครื่องมือจัดรูปแบบ JSON
ทำให้ JSON สวยงาม ตรวจสอบ และบีบอัดในเบราว์เซอร์ของคุณ วางข้อมูลของคุณ เลือกรูปแบบการเยื้อง แล้วรับผลลัพธ์ที่สะอาดและอ่านง่ายได้ทันที โดยไม่มีการอัปโหลดสิ่งใด
0 บรรทัด · 0 อักขระ
เยื้อง
วิธีใช้ เครื่องมือจัดรูปแบบ JSON
- 1
วาง JSON ของคุณ
วาง JSON ที่ถูก minify รก หรือเยื้องอยู่แล้วลงในแผงป้อนข้อมูล
- 2
เลือกการเยื้อง
เลือก 2 ช่องว่าง 4 ช่องว่าง หรือแท็บ เพื่อควบคุมว่าผลลัพธ์ที่จัดสวยจะเยื้องอย่างไร
- 3
จัดรูปแบบหรือ minify
คลิก "Format" เพื่อพิมพ์ให้สวยและตรวจสอบความถูกต้องของ JSON หรือ "Minify" เพื่อบีบให้เป็นบรรทัดเดียว
- 4
คัดลอกผลลัพธ์
ใช้ปุ่ม "Copy" เพื่อนำผลลัพธ์ที่จัดรูปแบบหรือ minify แล้วไปใช้ในโปรเจกต์ของคุณ
การทำงานกับ JSON: การจัดรูปแบบ การตรวจสอบ และข้อผิดพลาดที่กัด
JSON คืออะไรกันแน่
JSON (JavaScript Object Notation) เป็นรูปแบบแลกเปลี่ยนข้อมูลแบบข้อความที่ได้กลายเป็นวิธีเริ่มต้นในการที่บริการต่าง ๆ สื่อสารกันผ่าน HTTP แม้จะมีชื่อเช่นนั้น แต่มันเป็นอิสระจากภาษา: ตัวแยกวิเคราะห์มีอยู่สำหรับทุกภาษากระแสหลัก และรูปแบบที่ส่งบนสายก็เป็นเพียงข้อความ UTF-8 เอกสารหนึ่งสร้างจากชนิดค่าหกชนิดพอดี ได้แก่ ออบเจ็กต์ (กลุ่มคีย์/ค่าที่ไม่มีลำดับ), อาเรย์ (รายการที่มีลำดับ), สตริง, ตัวเลข, ค่าบูลีน true และ false และ null ทุกสิ่งที่คุณทำให้เป็นอนุกรม ตั้งแต่การตอบกลับ API ไปจนถึงไฟล์การตั้งค่า ล้วนแตกย่อยลงเป็นหกชนิดนั้น
กฎสองข้อทำให้ผู้คนสะดุดอยู่เสมอ ข้อแรก คีย์ในออบเจ็กต์ต้องเป็นสตริงที่อยู่ในอัญประกาศคู่ ตัวระบุเปล่า ๆ ไม่ได้รับอนุญาต ต่างจากออบเจ็กต์ลิเทอรัลของ JavaScript ข้อสอง JSON ไม่มีการแยกแยะระหว่างจำนวนเต็มกับทศนิยมและไม่มีไวยากรณ์สำหรับคอมเมนต์ ตัวเลขก็เป็นเพียงตัวเลข และบันทึกใด ๆ ที่คุณอยากทิ้งไว้ต้องอยู่ภายในค่าสตริงหรือถูกตัดออกก่อนการแยกวิเคราะห์
การจัดรูปแบบเทียบกับการบีบอัด
ทั้งสองนี้คือมุมมองสองแบบของข้อมูลเดียวกัน การจัดรูปแบบ (หรือที่เรียกว่าการทำให้สวยงามหรือการพิมพ์อย่างเป็นระเบียบ) แทรกการขึ้นบรรทัดใหม่และการเยื้องเพื่อให้เห็นการซ้อนกันได้ในพริบตา นี่คือสิ่งที่คุณต้องการขณะอ่านข้อมูล เทียบความต่างของสองการตอบกลับในระบบควบคุมเวอร์ชัน หรือวางตัวอย่างลงในเอกสารประกอบ ส่วนการบีบอัดทำตรงกันข้าม: มันลบทุกไบต์ของช่องว่างที่ไม่สำคัญเพื่อให้ได้บรรทัดเดียวที่กระชับ ซึ่งเป็นสิ่งที่คุณส่งผ่านเครือข่ายที่ทุกกิโลไบต์มีต้นทุนเป็นความหน่วงและแบนด์วิดท์
ทั้งสองทิศทางไม่สูญเสียข้อมูลในตัวมันเอง ช่องว่างระหว่างโทเค็นไม่เคยมีความสำคัญใน JSON ดังนั้นการยุบออบเจ็กต์ 40 บรรทัดให้เป็นบรรทัดเดียวแล้วขยายกลับจึงให้ค่าที่แยกวิเคราะห์แล้วเหมือนกันทุกประการ สิ่งเดียวที่เปลี่ยนคือจำนวนไบต์และความอ่านง่าย ซึ่งนั่นคือเหตุผลที่เครื่องมือนี้มีปุ่มทั้งสองแบบแทนที่จะบังคับสไตล์เดียว
ข้อผิดพลาดทางไวยากรณ์ที่คุณจะเจอจริง
ข้อผิดพลาดที่พบบ่อยที่สุดเพียงหนึ่งเดียวคือเครื่องหมายจุลภาคท้าย นั่นคือจุลภาคหลังสมาชิกตัวสุดท้ายของอาเรย์หรือคู่สุดท้ายของออบเจ็กต์ JavaScript ทนรับมันได้ แต่ JSON ห้าม ดังนั้นรายการที่ลงท้ายด้วยจุลภาคก่อนวงเล็บปิดจะแยกวิเคราะห์ไม่ผ่าน ถัดมาติด ๆ คืออัญประกาศเดี่ยวแทนอัญประกาศคู่ (สตริงใน JSON ต้องใช้อัญประกาศคู่) และคีย์ที่ไม่มีอัญประกาศซึ่งคัดลอกมาตรง ๆ จากซอร์สโค้ด JavaScript
ตัวการที่พบบ่อยอื่น ๆ ได้แก่ คอมเมนต์ที่หลงมา (// หรือแบบบล็อก) ซึ่งใช้ได้ใน JSONC และ JSON5 แต่ไม่ใช่ใน JSON แบบเคร่งครัด ค่าอย่าง NaN, Infinity หรือ undefined ซึ่งไม่มีอยู่เลยในข้อกำหนด และอักขระควบคุมที่ไม่ได้หลีก เช่นแท็บหรือการขึ้นบรรทัดใหม่จริง ๆ ภายในสตริง เมื่อตัวตรวจสอบชี้ไปที่บรรทัดหนึ่ง ให้สแกนหนึ่งหรือสองอักขระก่อนตำแหน่งที่ถูกเน้น เพราะตัวแยกวิเคราะห์มักสังเกตเห็นปัญหาก็ต่อเมื่อถึงโทเค็นถัดไปหลังจากความผิดพลาดจริง
การเลือกสไตล์การเยื้อง
สองช่องว่างเป็นมาตรฐานโดยพฤตินัยสำหรับ JSON บนเว็บและเป็นค่าเริ่มต้นที่เครื่องมือส่วนใหญ่ปล่อยออกมา รวมถึงลินเตอร์และตัวจัดรูปแบบจำนวนมาก สี่ช่องว่างอ่านได้โปร่งกว่าสำหรับโครงสร้างที่ซ้อนกันลึก และแท็บให้นักพัฒนาแต่ละคนเลือกความกว้างบนหน้าจอของตัวเองได้ในขณะที่ไฟล์ยังคงเหมือนกันทุกไบต์ คำตอบที่ถูกต้องคือสิ่งที่ที่เก็บโค้ดของคุณใช้อยู่แล้ว การปนสไตล์ภายในโปรเจกต์เดียวสร้างความต่างที่รกและไร้ความหมาย
การเยื้องเป็นเพียงเรื่องของหน้าตาล้วน ๆ และถูกทิ้งไปทันทีที่เอกสารถูกแยกวิเคราะห์ ดังนั้นมันจึงไม่เคยส่งผลต่อความถูกต้อง เลือกความกว้างหนึ่ง ใช้มันอย่างสม่ำเสมอ แล้วปล่อยให้ตัวจัดรูปแบบทำให้สิ่งใดก็ตามที่วางมาจากแหล่งอื่นเป็นมาตรฐาน
ลำดับคีย์และความถูกต้องของข้อมูล
ตัวจัดรูปแบบนี้เยื้องและจัดระยะเอกสารของคุณใหม่ แต่ไม่จัดเรียงลำดับคีย์ใหม่หรือเปลี่ยนแปลงค่าใด ๆ สิ่งนั้นสำคัญเพราะถึงแม้ข้อกำหนด JSON จะนิยามว่าออบเจ็กต์ไม่มีลำดับ แต่ตัวแยกวิเคราะห์จริงแทบทุกตัวรักษาลำดับการแทรกไว้ และผู้บริโภคปลายทาง ทั้งการทดสอบสแนปช็อต ข้อมูลที่ลงนาม ผู้ตรวจทานที่อ่านความต่าง มักพึ่งพามัน เครื่องมือที่จัดเรียงคีย์อย่างเงียบ ๆ อาจทำให้การตรวจลายเซ็นพังหรือฝังการเปลี่ยนแปลงเพียงบรรทัดเดียวไว้ในการสับเปลี่ยนร้อยบรรทัด
หากคุณต้องการเอาต์พุตที่เป็นมาตรฐานและจัดเรียงแล้วสำหรับความต่างที่เสถียรหรือการแฮชเนื้อหา นั่นคือการดำเนินการแยกต่างหากที่จงใจ ซึ่งคุณควรเลือกใช้อย่างรู้ตัว ไม่ใช่ผลพลอยได้ของการพิมพ์อย่างเป็นระเบียบ การแยกการจัดรูปแบบและการจัดเรียงใหม่ให้ชัดเจนหมายความว่าคุณรู้เสมอว่าอะไรเปลี่ยนไปบ้างอย่างแน่ชัด
ตัวเลข ความแม่นยำ และ Unicode
ตัวเลข JSON เป็นเลขฐานสิบและไม่มีการประกาศขีดจำกัดขนาด แต่เอนจิน JavaScript ที่แยกวิเคราะห์มันในเบราว์เซอร์ของคุณเก็บมันเป็นทศนิยมแบบ 64 บิต นั่นหมายความว่าจำนวนเต็มที่ใหญ่กว่าราวเก้าพันล้านล้าน (เพดานจำนวนเต็มที่ปลอดภัย) อาจสูญเสียความแม่นยำในการเดินทางไปกลับ ซึ่งเป็นเหตุที่ ID ขนาดใหญ่ ค่า snowflake และจำนวนเงินมักถูกส่งเป็นสตริงแทนที่จะเป็นตัวเลขดิบ หากความแม่นยำสำคัญ ให้ใส่ค่านั้นในอัญประกาศ
สตริงเป็น Unicode เต็มรูปแบบ คุณสามารถเขียนอักขระโดยตรงเป็น UTF-8 หรือเป็นลำดับหลีกแบบ backslash-u และทั้งสองรูปแบบแยกวิเคราะห์ออกมาเป็นจุดโค้ดเดียวกัน เนื่องจากรูปแบบนี้เป็นข้อความ UTF-8 ตั้งแต่ต้นจนจบ ตัวอักษรที่มีเครื่องหมาย สคริปต์ที่ไม่ใช่ละติน และอีโมจิจึงรอดผ่านการจัดรูปแบบและการบีบอัดโดยไม่ถูกแตะต้อง
ทุกอย่างอยู่ในเบราว์เซอร์ของคุณ
การแยกวิเคราะห์ การตรวจสอบ และการทำให้เป็นอนุกรมใหม่ทั้งหมดทำงานในเครื่องด้วย JavaScript ไม่มีสิ่งใดที่คุณวางถูกอัปโหลด บันทึก หรือจัดเก็บบนเซิร์ฟเวอร์ ดังนั้นจึงปลอดภัยที่จะจัดรูปแบบการตอบกลับ API ที่มีโทเค็นการเข้าถึง ตัวระบุภายใน หรือข้อมูลลูกค้า เพดานในทางปฏิบัติคือหน่วยความจำของอุปกรณ์ของคุณมากกว่าขีดจำกัดการอัปโหลดใด ๆ ดังนั้นการส่งออกขนาดใหญ่จึงจัดรูปแบบได้ดีบนเครื่องที่มีสเปกพอสมควร
นิสัยที่เป็นประโยชน์: เมื่อการเชื่อมต่อทำงานผิดปกติ ให้วางการตอบกลับดิบที่นี่ก่อน การยืนยันว่าข้อมูลเป็น JSON ที่ถูกต้องตามรูปแบบก่อนที่จะโทษโค้ดของคุณ ช่วยแยกบั๊กการทำให้เป็นอนุกรมออกจากบั๊กการแยกวิเคราะห์ได้ในไม่กี่วินาที และทำได้โดยไม่รั่วไหลข้อมูลไปที่ใดเลย
คำถามที่พบบ่อย
Format กับ Minify ต่างกันอย่างไร
ตัวจัดรูปแบบตรวจสอบความถูกต้องของ JSON ไหม
มีตัวเลือกการเยื้องอะไรบ้าง
มันจัดเรียงคีย์ใหม่หรือเปลี่ยนข้อมูลของฉันไหม
JSON ของฉันถูกอัปโหลดไหม และมันรองรับไฟล์ขนาดใหญ่ได้ไหม
เครื่องมือที่เกี่ยวข้อง
ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้