JSON Pretty Print: วิธีการจัดรูปแบบ JSON ให้อ่านง่าย

JSON Pretty Printing คืออะไร?

JSON pretty printing เป็นกระบวนการนำข้อมูล JSON ดิบที่กะทัดรัด (ย่อขนาด/minified) และจัดรูปแบบใหม่ด้วยการย่อหน้า การขึ้นบรรทัดใหม่ และการเว้นวรรคที่เหมาะสมเพื่อให้มนุษย์อ่านได้ เอกสาร JSON ที่ผ่านการ pretty print ใช้การย่อหน้าที่สอดคล้องกันและการจัดรูปแบบโครงสร้างที่ชัดเจนซึ่งเผยให้เห็นลำดับชั้นของ object และ array ที่ซ้อนกัน

เปรียบเทียบการแสดงผลสองแบบของข้อมูลเดียวกัน:

แบบย่อขนาด (อ่านยาก):

{"users":[{"id":1,"name":"Alice","roles":["admin","editor"]},{"id":2,"name":"Bob","roles":["viewer"]}],"total":2}

แบบ Pretty Printed (อ่านง่าย):

{
  "users": [
    {
      "id": 1,
      "name": "Alice",
      "roles": ["admin", "editor"]
    },
    {
      "id": 2,
      "name": "Bob",
      "roles": ["viewer"]
    }
  ],
  "total": 2
}

Pretty Print เทียบกับ JSON แบบย่อขนาด

การเลือกระหว่าง JSON แบบ pretty-printed และแบบย่อขนาดขึ้นอยู่กับกรณีการใช้งาน:

| Aspect | Pretty Print | Minified | |--------|-------------|----------| | ความสามารถในการอ่าน | สูง -- โครงสร้างชัดเจน | ต่ำ -- ข้อมูลทั้งหมดในบรรทัดเดียว | | ขนาดไฟล์ | ใหญ่กว่า (มี whitespace มากกว่า) | เล็กกว่า (ไม่มีค่าใช้จ่าย whitespace) | | การถ่ายโอนผ่านเครือข่าย | ช้ากว่าสำหรับ payload ขนาดใหญ่ | เร็วขึ้น แบนด์วิดท์น้อยลง | | การดีบัก | เหมาะสำหรับการพัฒนา | ไม่เหมาะสำหรับการตรวจสอบ | | การใช้งานในการผลิต | ไม่ค่อยใช้ | มาตรฐานสำหรับการตอบกลับ API |

API ในการผลิตมักให้บริการ JSON แบบย่อขนาดเพื่อลดแบนด์วิดท์ ในขณะที่นักพัฒนาใช้ pretty-print JSON ระหว่างการพัฒนาและการดีบัก

รูปแบบการย่อหน้า

เครื่องมือจัดรูปแบบส่วนใหญ่รองรับรูปแบบการย่อหน้าสองแบบทั่วไป:

การย่อหน้า 2 ช่องว่าง (พบมากที่สุด)

{
  "name": "Alice",
  "age": 30,
  "address": {
    "city": "New York"
  }
}

แนะนำสำหรับ: โครงการ JavaScript/TypeScript, การพัฒนาเว็บสมัยใหม่ และการใช้งานทั่วไปส่วนใหญ่

การย่อหน้า 4 ช่องว่าง

{
    "name": "Alice",
    "age": 30,
    "address": {
        "city": "New York"
    }
}

แนะนำสำหรับ: โครงการ Python (สไตล์ PEP 8) และทีมที่ชอบการย่อหน้าที่กว้างขึ้นเพื่อความชัดเจน

การย่อหน้าด้วยแท็บ

นักพัฒนาบางคนชอบการย่อหน้าด้วยแท็บ โดยเฉพาะในเวิร์กโฟลว์ที่เน้นการเข้าถึงที่ผู้ใช้ปรับความกว้างของแท็บใน editor ของตน

การเลือกการย่อหน้าที่เหมาะสม

ทีมส่วนใหญ่ใช้มาตรฐาน 2 ช่องว่าง เพราะสร้างสมดุลระหว่างความสามารถในการอ่านและประสิทธิภาพด้านพื้นที่แนวนอน ระบบนิเวศ JavaScript (Node.js, React, Vue) ใช้การย่อหน้า 2 ช่องว่างอย่างท่วมท้น หากคุณทำงานในสภาพแวดล้อมที่มี Python มาก การย่อหน้า 4 ช่องว่างอาจรู้สึกเป็นธรรมชาติมากกว่า กุญแจสำคัญคือความสอดคล้อง -- เลือกหนึ่งสไตล์และบังคับใช้ทั่วทั้งโครงการของคุณด้วยเครื่องมือเช่น Prettier หรือ EditorConfig

JSON Pretty Print ในภาษาโปรแกรมมิ่งต่างๆ

JavaScript / Node.js

const formatted = JSON.stringify(data, null, 2);
console.log(formatted);

Python

import json
formatted = json.dumps(data, indent=2)
print(formatted)

Java

import com.fasterxml.jackson.databind.ObjectMapper;
ObjectMapper mapper = new ObjectMapper();
String formatted = mapper.writerWithDefaultPrettyPrinter()
    .writeValueAsString(data);

Go

import "encoding/json"
formatted, _ := json.MarshalIndent(data, "", "  ")
fmt.Println(string(formatted))

Ruby

require 'json'
puts JSON.pretty_generate(data)

วิธีการ Pretty Print JSON

ใช้เครื่องมือ JSON Formatter ออนไลน์

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

ใช้เครื่องมือ Command Line

ด้วย jq (เป็นที่นิยมที่สุด):

cat file.json | jq .

ด้วย Python:

python -m json.tool file.json

ด้วย Node.js:

node -e "const d = require('./file.json'); console.log(JSON.stringify(d, null, 2));"

Browser Developer Tools

เบราว์เซอร์หลักทั้งหมดจัดรูปแบบการตอบกลับ JSON โดยอัตโนมัติในแท็บ Network:

• Chrome DevTools: แท็บ Network pretty-prints การตอบกลับ JSON โดยอัตโนมัติ
• Firefox Developer Tools: การตอบกลับ JSON แสดงด้วย tree views ที่ยุบได้
• Safari Web Inspector: การแสดงตัวอย่าง JSON รวมการจัดรูปแบบอัตโนมัติ

ปลั๊กอิน IDE สำหรับการจัดรูปแบบ JSON

VS Code

VS Code มีการรองรับ JSON ในตัวที่ยอดเยี่ยม ใช้ Shift+Alt+F (Windows/Linux) หรือ Shift+Option+F (macOS) เพื่อจัดรูปแบบไฟล์ JSON ใดๆ ส่วนขยายเพิ่มเติมช่วยเพิ่มประสบการณ์:

• Prettier -- จัดรูปแบบ JSON, JSONC และภาษาอื่นๆ อีกมากมายอย่างสอดคล้องกัน
• JSON Tools -- เรียงลำดับ ย่อขนาด และจัดรูปแบบ JSON ด้วยปุ่มลัด
• JavaScript Booster -- คุณสมบัติการจัดการ JSON ขั้นสูง

JetBrains IDEs (IntelliJ, WebStorm, PyCharm)

• ตัวจัดรูปแบบในตัว: Ctrl+Alt+L (Windows/Linux) หรือ Cmd+Option+L (macOS)
• การตรวจสอบและจัดรูปแบบ JSON อัตโนมัติเมื่อวาง

Vim / Neovim

" Format JSON in place
:%!jq .

ตัวเลือกการจัดรูปแบบ JSON ขั้นสูง

เครื่องมือ JSON formatter สมัยใหม่มีมากกว่าการย่อหน้าพื้นฐาน:

• การเรียงลำดับคีย์ -- เรียงลำดับคีย์ object ตามตัวอักษรเพื่อผลลัพธ์ที่สอดคล้องกัน
• การเน้นไวยากรณ์ -- คีย์ สตริง ตัวเลข และ boolean ที่มีรหัสสี
• tree views ที่ยุบได้ -- ขยายและยุบโครงสร้างที่ซ้อนกันเพื่อการนำทางที่ง่ายขึ้น
• หมายเลขบรรทัด -- อ้างอิงตำแหน่งเฉพาะระหว่างการดีบัก
• การเน้นข้อผิดพลาด -- ทำเครื่องหมายข้อผิดพลาดทางไวยากรณ์ด้วยสายตาพร้อมข้อความโดยละเอียด

แนวทางปฏิบัติที่ดีที่สุดสำหรับความสามารถในการอ่าน JSON

1. ตรวจสอบก่อนจัดรูปแบบเสมอ -- ตัวจัดรูปแบบไม่สามารถแก้ไข JSON ที่ไม่ถูกต้องได้ ใช้ JSON validator ก่อนเพื่อตรวจจับข้อผิดพลาดทางไวยากรณ์
2. กำหนดมาตรฐานของทีม -- ตกลงเรื่องการย่อหน้า (2 ช่องว่างเป็นมาตรฐานอุตสาหกรรม) และบังคับใช้ด้วย Prettier หรือ linter
3. รักษาการซ้อนให้ตื้น -- JSON ที่ซ้อนลึก (4+ ระดับ) อ่านยากไม่ว่าจะจัดรูปแบบอย่างไร พิจารณาปรับโครงสร้างเมื่อเป็นไปได้
4. ใช้คีย์ที่มีความหมาย -- ชื่อคีย์ที่อธิบายและกระชับปรับปรุงความสามารถในการอ่านมากกว่าตัวจัดรูปแบบใดๆ
5. เพิ่มการขึ้นบรรทัดใหม่ต่อท้าย -- จบไฟล์ JSON ด้วยอักขระขึ้นบรรทัดใหม่เพื่อปฏิบัติตามมาตรฐาน POSIX และหลีกเลี่ยง diff noise

ลองใช้ เครื่องมือ JSON pretty print ออนไลน์ฟรี เพื่อจัดรูปแบบและ beautify ข้อมูล JSON ของคุณทันทีด้วยการย่อหน้าและการเน้นไวยากรณ์ที่ปรับแต่งได้