เครื่องมือจัดรูปแบบ JSON

การจัดรูปแบบ JSON คืออะไร?

การจัดรูปแบบ JSON คือการแปลงข้อมูล JSON ให้เป็นรูปแบบที่อ่านง่ายสำหรับมนุษย์ ด้วยการเพิ่มการเยื้อง ช่องว่าง และการขึ้นบรรทัด โดยไม่เปลี่ยนแปลงโครงสร้างหรือเนื้อหา การจัดรูปแบบที่ถูกต้องช่วยให้ตรวจสอบ แก้ไข แบ่งปัน และแก้ไข JSON ได้ง่ายขึ้น ในขณะเดียวกันก็ยังคงความเข้ากันได้กับเครื่องมือและซอฟต์แวร์

ตามคำจำกัดความ JSON ไม่สนใจช่องว่างนอกส่วนข้อความ แต่ JSON ที่จัดรูปแบบไม่ดี (หรือถูกย่อไว้) ที่ไม่มีการเยื้องหรืออยู่ในบรรทัดเดียวกันอาจทำให้มนุษย์อ่านหรือแก้ไขได้ยากมาก

การจัดรูปแบบกับการย่อ JSON

• การจัดรูปแบบเพิ่มช่องว่าง การเยื้อง และขึ้นบรรทัดเพื่อความชัดเจนและความอ่านง่าย
• การย่อข้อมูลลบช่องว่างที่ไม่จำเป็นทั้งหมดเพื่อความกะทัดรัดสูงสุดและประสิทธิภาพในการเก็บหรือส่งข้อมูล
• โปรแกรมจัดรูปแบบ JSON ที่มีประสิทธิภาพช่วยให้คุณสลับโหมดเหล่านี้ได้ง่าย เพื่อเลือกใช้เวอร์ชันที่เหมาะสมกับคนอ่านหรือเครื่องจักรตามความต้องการ

ตัวอย่าง: JSON แบบย่อกับแบบจัดรูปแบบ

{"id":"3f4b2c","user":{"name":"Dana","is_active":true},"roles":["admin","editor"],"count":7}

{
  "id": "3f4b2c",
  "user": {
    "name": "Dana",
    "is_active": true
  },
  "roles": [
    "admin",
    "editor"
  ],
  "count": 7
}

ทำไมต้องจัดรูปแบบ JSON?

• ความอ่านง่าย: การเยื้องและขึ้นบรรทัดที่เหมาะสมช่วยให้ง่ายต่อการตรวจสอบวัตถุซ้อน ตรวจพบข้อผิดพลาด และเข้าใจโครงสร้างข้อมูลที่ซับซ้อนได้ในทันที
• การแก้จุดบกพร่อง: การแก้ไขปัญหาข้อมูลที่ไม่ถูกต้องหรือไม่คาดคิดง่ายขึ้นมากเมื่อสามารถมองเห็นและติดตามคีย์ ค่า และระดับความลึกในการซ้อนได้
• การทำงานร่วมกัน: JSON ที่จัดรูปแบบดีช่วยให้ง่ายต่อการตรวจสอบ พูดคุย และแก้ไขในโค้ดรีวิว เอกสาร หรือไฟล์ที่แชร์กัน
• การควบคุมเวอร์ชัน: Git และเครื่องมือควบคุมเวอร์ชันอื่น ๆ สร้าง diff ที่มีความหมายมากขึ้นกับ JSON ที่จัดรูปแบบ ช่วยให้ตามการเปลี่ยนแปลงได้ง่ายขึ้น
• การปฏิบัติตามมาตรฐาน: คู่มือสไตล์และเครื่องมือตรวจสอบโค้ดอัตโนมัติหลายตัว (เช่น Prettier, ESLint หรือ jq) บังคับใช้การจัดรูปแบบที่สม่ำเสมอเพื่อความชัดเจนและมาตรฐาน
• ความเข้ากันได้กับเครื่องมือ: บาง API, CLI และตัวแก้ไขคาดหวังอินพุตที่จัดรูปแบบเพื่อการโต้ตอบหรือบันทึกที่ง่ายขึ้น

โปรแกรมจัดรูปแบบ JSON ทำงานอย่างไร?

1. การแยกวิเคราะห์: เครื่องมือพยายามแยกวิเคราะห์ข้อความอินพุตของคุณด้วยตัวแยกวิเคราะห์ JSON ที่เข้มงวด เพื่อเช็คความถูกต้องของไวยากรณ์ เช่น การขาดเครื่องหมายคำพูด, คอมมาเกิน หรืออักขระที่ไม่ได้หลบสัญลักษณ์
2. การพิมพ์สวย: เมื่อถูกต้อง ข้อมูลที่แยกวิเคราะห์จะถูกแปลงกลับเป็นสตริงพร้อมการเยื้องและขึ้นบรรทัดตามที่ผู้ใช้กำหนด (โดยทั่วไป 2 หรือ 4 ช่องว่าง) เพื่อสร้างเวอร์ชันที่สวยงาม

ถ้าอินพุตไม่ใช่ JSON ที่ถูกต้อง โปรแกรมจะแสดงข้อผิดพลาดหรือให้ข้อความช่วยเหลือระบุตำแหน่งและลักษณะของปัญหา

ตัวเลือกการจัดรูปแบบ

• การเยื้อง: กำหนดจำนวนช่องว่างต่อระดับ (สูงสุด 8)
• เรียงคีย์ของอ็อบเจ็กต์ตามลำดับตัวอักษร
• ใช้แท็บแทนช่องว่างสำหรับการเยื้อง
• แปลงตัวอักษรที่ไม่ใช่ ASCII เป็น Unicode
• ย่อผลลัพธ์ (อยู่ในบรรทัดเดียว ไม่มีช่องว่าง)

ปัญหาที่พบบ่อยและแก้ได้ด้วยการจัดรูปแบบ

• JSON แบบบรรทัดเดียว/ย่อ: ข้อมูลที่มาจาก API หรือไฟล์ล็อกมักถูกย่อเพื่อประหยัดแบนด์วิดท์ ทำให้แก้ไขด้วยมือยาก การจัดรูปแบบคืนค่าความอ่านง่ายสำหรับการตรวจสอบและแก้ไข
• การเยื้องไม่สม่ำเสมอ: JSON ที่วางมาจากหลายแหล่งอาจมีแท็บ ช่องว่าง หรือระดับการเยื้องไม่สม่ำเสมอ การจัดรูปแบบช่วยให้ข้อมูลมีความชัดเจนและสอดคล้องกัน
• โครงสร้างซับซ้อน/ซ้อนลึก: อาร์เรย์หรืออ็อบเจ็กต์ที่ซับซ้อนลึก (เช่น ไฟล์ตั้งค่าหรือการตอบ API ที่ซับซ้อน) จะเรียบง่ายและนำทางง่ายเมื่อจัดรูปแบบ พร้อมรองรับการยุบ/ขยายในตัวแก้ไขที่รองรับ

กรณีใช้งานจริง: จัดรูปแบบผลลัพธ์ API

เมื่อรวมกับ API ของบุคคลที่สาม (เช่น AWS, Stripe หรือ Google Cloud) การตอบกลับมักถูกย่อเพื่อลดความล่าช้า การจัดรูปแบบ JSON ทำให้ง่ายต่อการตรวจสอบฟิลด์ที่ขาด หาข้อผิดพลาด หรือแชร์กับทีม

{"amount":2500,"currency":"usd","status":"succeeded","charges":[{"id":"ch_1Gq","amount":2500}]}

{
  "amount": 2500,
  "currency": "usd",
  "status": "succeeded",
  "charges": [
    {
      "id": "ch_1Gq",
      "amount": 2500
    }
  ]
}

วิธีใช้เครื่องมือนี้จัดรูปแบบ JSON

1. วางหรืออัปโหลด JSON ดิบ ย่อ หรือที่จัดรูปแบบไม่ดีลงในพื้นที่อินพุต
2. เลือกตัวเลือกการจัดรูปแบบ (ขนาดการเยื้อง, เรียงคีย์ ฯลฯ)
3. คลิก "จัดรูปแบบ" เพื่อประมวลผลข้อมูลของคุณ
4. ดูหรือคัดลอกผลลัพธ์ที่สะอาดและอ่านง่าย หากพบข้อผิดพลาด จะมีข้อความแจ้งรายละเอียดเพื่อช่วยคุณแก้ไขได้

การจัดรูปแบบทั้งหมดทำอย่างปลอดภัยในเบราว์เซอร์ของคุณ ข้อมูลของคุณไม่เคยออกนอกเครื่อง

ตัวอย่างโค้ดสำหรับการจัดรูปแบบ JSON

ดูวิธีการจัดรูปแบบ JSON ในหลากหลายภาษาโปรแกรม ตัวอย่างเหล่านี้แสดงเทคนิคการจัดรูปแบบพื้นฐานที่ใช้งานได้จริง เพื่อเพิ่มประสิทธิภาพการเขียนโค้ดและเข้าใจง่าย

const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
const pretty = JSON.stringify(JSON.parse(ugly), null, 2);
console.log(pretty);

import json
ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
pretty = json.dumps(json.loads(ugly), indent=2)
print(pretty)

package main
import (
  "encoding/json"
  "fmt"
)
func main() {
  ugly := []byte(`{"name":"Alice","age":30,"roles":["admin","user"]}`)
  var obj interface{}
  json.Unmarshal(ugly, &obj)
  pretty, _ := json.MarshalIndent(obj, "", "  ")
  fmt.Println(string(pretty))
}

import com.fasterxml.jackson.databind.ObjectMapper;
public class Main {
  public static void main(String[] args) throws Exception {
    String ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}";
    ObjectMapper mapper = new ObjectMapper();
    Object obj = mapper.readValue(ugly, Object.class);
    String pretty = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(obj);
    System.out.println(pretty);
  }
}

using System;
using Newtonsoft.Json;
class Program {
  static void Main() {
    var ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}";
    var parsed = JsonConvert.DeserializeObject(ugly);
    var pretty = JsonConvert.SerializeObject(parsed, Formatting.Indented);
    Console.WriteLine(pretty);
  }
}

<?php
$ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
$obj = json_decode($ugly);
echo json_encode($obj, JSON_PRETTY_PRINT);

require 'json'
ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
pretty = JSON.pretty_generate(JSON.parse(ugly))
puts pretty

echo '{"name":"Alice","age":30,"roles":["admin","user"]}' | jq .

fn main() {
  let ugly = r#"{"name":"Alice","age":30,"roles":["admin","user"]}"#;
  let value: serde_json::Value = serde_json::from_str(ugly).unwrap();
  let pretty = serde_json::to_string_pretty(&value).unwrap();
  println!("{}", pretty);
}

import com.fasterxml.jackson.databind.ObjectMapper
fun main() {
  val ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}"
  val mapper = ObjectMapper()
  val obj = mapper.readValue(ugly, Any::class.java)
  val pretty = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(obj)
  println(pretty)
}

import Foundation
let ugly = "{\"name\":\"Alice\",\"age\":30,\"roles\":[\"admin\",\"user\"]}"
if let data = ugly.data(using: .utf8),
   let obj = try? JSONSerialization.jsonObject(with: data),
   let pretty = try? JSONSerialization.data(withJSONObject: obj, options: .prettyPrinted),
   let prettyString = String(data: pretty, encoding: .utf8) {
    print(prettyString)
}

const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
const pretty = JSON.stringify(JSON.parse(ugly), null, 2);
console.log(pretty);

SELECT jsonb_pretty('{"name":"Alice","age":30,"roles":["admin","user"]}'::jsonb);

SELECT JSON_PRETTY('{"name":"Alice","age":30,"roles":["admin","user"]}');

$ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
$obj = $ugly | ConvertFrom-Json
$pretty = $obj | ConvertTo-Json -Depth 10
Write-Output $pretty

use JSON;
my $ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
my $obj = decode_json($ugly);
print to_json($obj, { pretty => 1 });

import 'dart:convert';
void main() {
  const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
  final obj = jsonDecode(ugly);
  final pretty = JsonEncoder.withIndent('  ').convert(obj);
  print(pretty);
}

ugly = ~s({"name":"Alice","age":30,"roles":["admin","user"]})
{:ok, obj} = Jason.decode(ugly)
pretty = Jason.encode!(obj, pretty: true)
IO.puts(pretty)

import play.api.libs.json._
object Main extends App {
  val ugly = """{"name":"Alice","age":30,"roles":["admin","user"]}"""
  val jsValue = Json.parse(ugly)
  val pretty = Json.prettyPrint(jsValue)
  println(pretty)
}