Whiz Tools

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

จัดรูปแบบและทำให้ JSON ของคุณสวยงามด้วยเครื่องมือง่ายๆ นี้

JSON ที่จัดรูปแบบจะปรากฏที่นี่...

JSON Formatter

แนะนำ

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

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

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

ไวยากรณ์และโครงสร้าง JSON

JSON ถูกสร้างขึ้นจากโครงสร้างหลักสองประเภท:

  1. วัตถุ: คอลเลกชันของคู่ชื่อ/ค่า ที่อยู่ในวงเล็บปีกกา {} ชื่อแต่ละชื่อจะตามด้วยเครื่องหมายทวิภาค : และคู่จะถูกแยกด้วยเครื่องหมายจุลภาค ,
   {"name": "John", "age": 30, "city": "New York"}
  1. อาเรย์: รายการที่มีลำดับของค่า ที่อยู่ในวงเล็บเหลี่ยม [] ค่าแต่ละค่าจะแยกด้วยเครื่องหมายจุลภาค ,
   ["apple", "banana", "cherry"]

ค่าของ JSON สามารถเป็น:

  • สตริง (ในเครื่องหมายคำพูดคู่): "Hello World"
  • ตัวเลข: 42 หรือ 3.14159
  • บูลีน: true หรือ false
  • Null: null
  • วัตถุ: {"key": "value"}
  • อาเรย์: [1, 2, 3]

JSON ที่ถูกต้องต้องปฏิบัติตามกฎไวยากรณ์เหล่านี้:

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

ข้อผิดพลาดทางไวยากรณ์ทั่วไปประกอบด้วย:

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

วิธีการทำงานของการจัดรูปแบบ JSON

การจัดรูปแบบ JSON จะเปลี่ยน JSON ที่บีบอัดและไม่ถูกจัดรูปแบบให้เป็นรูปแบบที่อ่านได้มากขึ้นโดย:

  1. การวิเคราะห์: สตริง JSON จะถูกวิเคราะห์ก่อนเพื่อให้แน่ใจว่ามีความถูกต้องและเพื่อสร้างการแทนค่าข้อมูลในหน่วยความจำ

  2. การเยื้อง: แต่ละระดับที่ซ้อนกันของวัตถุและอาเรย์จะถูกเยื้อง (โดยทั่วไป 2 หรือ 4 ช่องว่าง) เพื่อแสดงลำดับชั้นให้เห็นได้ชัดเจน

  3. การขึ้นบรรทัดใหม่: บรรทัดใหม่จะถูกเพิ่มหลังจากแต่ละคุณสมบัติหรือองค์ประกอบของอาเรย์เพื่อปรับปรุงการอ่าน

  4. การเว้นวรรค: จะมีการเพิ่มการเว้นวรรคที่สม่ำเสมอรอบเครื่องหมายทวิภาคและเครื่องหมายจุลภาค

ตัวอย่างเช่น JSON ที่บีบอัดนี้:

{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}

จะกลายเป็น JSON ที่จัดรูปแบบแล้วนี้:

{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "state": "CA"
  },
  "hobbies": [
    "reading",
    "hiking",
    "photography"
  ]
}

เครื่องมือของเราใช้การเยื้องมาตรฐาน 2 ช่องว่างต่อระดับ ซึ่งเป็นแนวทางปฏิบัติทั่วไปในชุมชนการพัฒนาและให้ความสมดุลที่ดีระหว่างความกระชับและความอ่านได้

การตรวจสอบ JSON

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

  1. ข้อผิดพลาดทางไวยากรณ์:

    • ชื่อคุณสมบัติที่ไม่มีเครื่องหมายคำพูด
    • ขาดหรือมีเครื่องหมายจุลภาคเกิน
    • โครงสร้างที่ซ้อนกันไม่ถูกต้อง
    • สตริง, วัตถุ หรืออาเรย์ที่ไม่มีการปิด

  2. ข้อผิดพลาดเกี่ยวกับประเภทข้อมูล:

    • ใช้ค่าที่เฉพาะเจาะจงใน JavaScript เช่น undefined หรือ NaN
    • รวมฟังก์ชันหรือวิธีการ
    • ใช้เครื่องหมายคำพูดเดี่ยวสำหรับสตริง

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

กรณีการใช้งาน

การจัดรูปแบบ JSON มีค่ามากในหลายสถานการณ์:

การพัฒนาและการทดสอบ API

เมื่อทำงานกับ API แบบ RESTful การจัดรูปแบบ JSON ทำให้การ:

  • ตรวจสอบข้อมูลที่ตอบกลับ
  • แก้ไขปัญหาของเนื้อหาคำขอ
  • เอกสารตัวอย่าง API
  • ตรวจสอบโครงสร้างข้อมูลให้ตรงตามความคาดหวัง

การจัดการการกำหนดค่า

แอปพลิเคชันสมัยใหม่หลายตัวใช้ JSON สำหรับการกำหนดค่า:

  • ไฟล์การตั้งค่าแอปพลิเคชัน
  • การกำหนดค่าสภาพแวดล้อม
  • ข้อกำหนดการสร้างและการปรับใช้
  • เทมเพลต Infrastructure as Code (เช่น AWS CloudFormation, Terraform)

การวิเคราะห์ข้อมูลและการแสดงผล

การจัดรูปแบบ JSON ช่วยเมื่อ:

  • สำรวจชุดข้อมูล
  • เตรียมข้อมูลสำหรับการแสดงผล
  • ทำความเข้าใจโครงสร้างข้อมูล
  • ระบุรูปแบบในข้อมูลที่มีโครงสร้าง

การแก้ไขปัญหาและการตรวจสอบข้อผิดพลาด

การจัดรูปแบบ JSON อย่างถูกต้องมีความสำคัญเมื่อ:

  • แก้ไขปัญหาแอปพลิเคชันเว็บ
  • ตรวจสอบ localStorage หรือ sessionStorage
  • วิเคราะห์การตอบสนองของเครือข่าย
  • แก้ไขปัญหาการรวมข้อมูล

วัตถุประสงค์ทางการศึกษา

การจัดรูปแบบ JSON ที่ชัดเจนมีค่ามากสำหรับ:

  • การสอนโครงสร้างข้อมูล
  • การแสดงความสัมพันธ์ที่ซ้อนกัน
  • การอธิบายแนวคิด API
  • การแสดงหลักการการสร้างโมเดลข้อมูล

ทางเลือก

แม้ว่าเครื่องมือจัดรูปแบบ JSON แบบเว็บของเราจะสะดวกสำหรับงานการจัดรูปแบบอย่างรวดเร็ว แต่ก็มีทางเลือกอื่น ๆ สำหรับสถานการณ์ที่แตกต่างกัน:

เครื่องมือพัฒนาเบราว์เซอร์

เบราว์เซอร์สมัยใหม่รวมถึงความสามารถในการจัดรูปแบบ JSON:

  • Chrome และ Edge DevTools จะจัดรูปแบบการตอบสนอง JSON โดยอัตโนมัติในแท็บเครือข่าย
  • JSON viewer ของ Firefox ให้การแสดงผลในรูปแบบต้นไม้ที่โต้ตอบได้
  • ส่วนขยายเบราว์เซอร์เช่น JSONView สามารถจัดรูปแบบ JSON โดยตรงในเบราว์เซอร์

โปรแกรมแก้ไขโค้ดและ IDE

สภาพแวดล้อมการพัฒนาส่วนใหญ่มีการจัดรูปแบบ JSON:

  • Visual Studio Code มีการจัดรูปแบบ JSON ในตัว (Alt+Shift+F)
  • IDE ของ JetBrains (WebStorm, IntelliJ) รวมเครื่องมือ JSON ที่ทรงพลัง
  • Sublime Text และ Atom รองรับการจัดรูปแบบ JSON ผ่านปลั๊กอิน

เครื่องมือบรรทัดคำสั่ง

สำหรับผู้ใช้เทอร์มินัลหรือการทำงานอัตโนมัติ:

  • jq เป็นโปรเซสเซอร์ JSON ที่มีน้ำหนักเบาและยืดหยุ่น
  • json_pp มาพร้อมติดตั้งในหลายระบบ Unix
  • python -m json.tool ให้การจัดรูปแบบอย่างรวดเร็วโดยใช้ Python

วิธีการเชิงโปรแกรม

เมื่อจัดรูปแบบ JSON ภายในแอปพลิเคชัน:

// JavaScript
const formatted = JSON.stringify(jsonObject, null, 2);

# Python
import json
formatted = json.dumps(json_object, indent=2)

// Java with Gson
Gson gson = new GsonBuilder().setPrettyPrinting().create();
String formatted = gson.toJson(jsonObject);

# Ruby
require 'json'
formatted = JSON.pretty_generate(json_object)

// PHP
$formatted = json_encode($jsonObject, JSON_PRETTY_PRINT);

ประวัติ

JSON ถูกสร้างขึ้นโดย Douglas Crockford ในช่วงต้นปี 2000 เป็นทางเลือกที่มีน้ำหนักเบากว่า XML รูปแบบนี้ได้ถูกสร้างขึ้นจากไวยากรณ์วัตถุของ JavaScript แต่มีการออกแบบให้เป็นอิสระจากภาษา ในปี 2006 JSON ได้ถูกกำหนดอย่างเป็นทางการใน RFC 4627 และได้รับความนิยมอย่างรวดเร็วเนื่องจากความเรียบง่ายและความเข้ากันได้กับ JavaScript

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

การนำ JSON ไปใช้เพิ่มขึ้นอย่างรวดเร็วพร้อมกับการเพิ่มขึ้นของ AJAX และ API แบบ RESTful ในช่วงกลางปี 2000 ในปี 2010 JSON ได้กลายเป็นมาตรฐานที่ใช้กันทั่วไปสำหรับ API ของเว็บ, ไฟล์การกำหนดค่า, และการจัดเก็บข้อมูลในฐานข้อมูล NoSQL เช่น MongoDB และ CouchDB

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

ตัวอย่างโค้ด

นี่คือตัวอย่างวิธีการจัดรูปแบบ JSON ในภาษาโปรแกรมต่าง ๆ:

// JavaScript JSON formatting
function formatJSON(jsonString) {
  try {
    const parsedData = JSON.parse(jsonString);
    return JSON.stringify(parsedData, null, 2);
  } catch (error) {
    return `Error: ${error.message}`;
  }
}

// ตัวอย่างการใช้งาน
const rawJSON = '{"name":"John","age":30,"city":"New York"}';
console.log(formatJSON(rawJSON));

# Python JSON formatting
import json

def format_json(json_string):
    try:
        parsed_data = json.loads(json_string)
        return json.dumps(parsed_data, indent=2)
    except json.JSONDecodeError as e:
        return f"Error: {str(e)}"

# ตัวอย่างการใช้งาน
raw_json = '{"name":"John","age":30,"city":"New York"}'
print(format_json(raw_json))

// Java JSON formatting with Gson
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.JsonSyntaxException;

public class JSONFormatter {
    public static String formatJSON(String jsonString) {
        try {
            Gson gson = new GsonBuilder().setPrettyPrinting().create();
            Object parsedJson = gson.fromJson(jsonString, Object.class);
            return gson.toJson(parsedJson);
        } catch (JsonSyntaxException e) {
            return "Error: " + e.getMessage();
        }
    }
    
    public static void main(String[] args) {
        String rawJSON = "{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}";
        System.out.println(formatJSON(rawJSON));
    }
}

// PHP JSON formatting
function formatJSON($jsonString) {
    $result = json_decode($jsonString);
    if (json_last_error() !== JSON_ERROR_NONE) {
        return "Error: " . json_last_error_msg();
    }
    return json_encode($result, JSON_PRETTY_PRINT);
}

// ตัวอย่างการใช้งาน
$rawJSON = '{"name":"John","age":30,"city":"New York"}';
echo formatJSON($rawJSON);

# Ruby JSON formatting
require 'json'

def format_json(json_string)
  begin
    parsed_data = JSON.parse(json_string)
    return JSON.pretty_generate(parsed_data)
  rescue JSON::ParserError => e
    return "Error: #{e.message}"
  end
end

# ตัวอย่างการใช้งาน
raw_json = '{"name":"John","age":30,"city":"New York"}'
puts format_json(raw_json)

// C# JSON formatting with Newtonsoft.Json
using Newtonsoft.Json;
using System;

class JSONFormatter
{
    public static string FormatJSON(string jsonString)
    {
        try
        {
            object parsedJson = JsonConvert.DeserializeObject(jsonString);
            return JsonConvert.SerializeObject(parsedJson, Formatting.Indented);
        }
        catch (JsonException e)
        {
            return $"Error: {e.Message}";
        }
    }
    
    static void Main()
    {
        string rawJSON = "{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}";
        Console.WriteLine(FormatJSON(rawJSON));
    }
}

// Go JSON formatting
package main

import (
    "encoding/json"
    "fmt"
)

func formatJSON(jsonString string) string {
    var parsedData interface{}
    err := json.Unmarshal([]byte(jsonString), &parsedData)
    if err != nil {
        return fmt.Sprintf("Error: %s", err.Error())
    }
    
    formattedBytes, err := json.MarshalIndent(parsedData, "", "  ")
    if err != nil {
        return fmt.Sprintf("Error: %s", err.Error())
    }
    
    return string(formattedBytes)
}

func main() {
    rawJSON := `{"name":"John","age":30,"city":"New York"}`
    fmt.Println(formatJSON(rawJSON))
}

กรณีขอบเขตและข้อพิจารณา

เมื่อทำงานกับการจัดรูปแบบ JSON โปรดระวังความท้าทายเหล่านี้:

ไฟล์ JSON ขนาดใหญ่

ไฟล์ JSON ที่มีขนาดใหญ่ (หลายเมกะไบต์หรือมากกว่า) อาจทำให้เกิดปัญหาด้านประสิทธิภาพในเครื่องมือจัดรูปแบบที่ใช้เบราว์เซอร์ สำหรับกรณีเช่นนี้:

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

โครงสร้างที่ซ้อนกันลึก

JSON ที่ซ้อนกันมากเกินไป (มากกว่า 10-20 ระดับ) อาจยากที่จะนำทางแม้จะมีการจัดรูปแบบ ในกรณีเช่นนี้:

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

ตัวอักษรพิเศษและยูนิโค้ด

JSON รองรับยูนิโค้ด แต่เครื่องมือบางตัวอาจมีปัญหากับตัวอักษรบางตัว:

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

ความแม่นยำของตัวเลข

JSON ไม่ได้กำหนดความแม่นยำสำหรับตัวเลข ซึ่งอาจทำให้เกิดปัญหากับจำนวนเต็มที่มีขนาดใหญ่หรือค่าทศนิยม:

  • โปรดทราบว่าการใช้งาน JavaScript บางตัวอาจสูญเสียความแม่นยำสำหรับจำนวนเต็มที่เกิน 53 บิต
  • พิจารณาใช้การแทนค่าที่เป็นสตริงสำหรับค่าตัวเลขที่แม่นยำ
  • ทดสอบด้วยค่าที่สุดขีดหากแอปพลิเคชันของคุณต้องการความแม่นยำสูง

วัตถุและอาเรย์ว่าง

JSON ที่ถูกต้องรวมถึงวัตถุว่าง {} และอาเรย์ [] ซึ่งควรได้รับการจัดรูปแบบอย่างเหมาะสม:

  • วัตถุว่างควรปรากฏเป็น {}
  • อาเรย์ว่างควรปรากฏเป็น []
  • โครงสร้างที่ว่างซ้อนกันควรรักษาการเยื้องที่เหมาะสม

อ้างอิง

  1. JSON.org - เว็บไซต์กำหนด JSON อย่างเป็นทางการ
  2. RFC 8259 - รูปแบบข้อมูล JSON
  3. MDN Web Docs: JSON - เอกสารที่ครอบคลุมเกี่ยวกับ JSON ใน JavaScript
  4. JSON Lint - เครื่องมือออนไลน์ที่ได้รับความนิยมสำหรับการตรวจสอบ JSON
  5. jq - โปรเซสเซอร์ JSON ที่มีน้ำหนักเบาและยืดหยุ่น

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

เครื่องแปลงหน่วยเวลา: ปี, วัน, ชั่วโมง, นาที, วินาที
ตัวเข้ารหัสและถอดรหัส Base64: แปลงข้อความเป็น Base64 และกลับกัน
เครื่องมือกลับข้อความ: กลับลำดับตัวอักษรในข้อความใด ๆ
ตัวแปลง Unix Timestamp เป็นวันที่: รองรับรูปแบบ 12/24 ชั่วโมง
เครื่องมือแก้สมการกำลังสอง: ค้นหารากของ ax² + bx + c = 0
เครื่องสร้างคีย์ API แบบสุ่ม: สร้างสตริงที่ปลอดภัยยาว 32 ตัวอักษร
Feedback