เครื่องมือจัดรูปแบบ JSON & ทำให้สวยงาม: พิมพ์ JSON ให้สวยงามด้วยการเยื้อง

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

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

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

ข้อมูล 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"}
2

อาเรย์: รายการที่มีลำดับของค่า ที่อยู่ในวงเล็บเหลี่ยม [] ค่าแต่ละค่าจะแยกด้วยเครื่องหมายจุลภาค ,

1   ["apple", "banana", "cherry"]
2

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

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

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

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

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

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

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

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

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

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

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

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

1{
2  "name": "John Doe",
3  "age": 30,
4  "address": {
5    "street": "123 Main St",
6    "city": "Anytown",
7    "state": "CA"
8  },
9  "hobbies": [
10    "reading",
11    "hiking",
12    "photography"
13  ]
14}
15

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

การตรวจสอบ JSON

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

ข้อผิดพลาดทางไวยากรณ์:
- ชื่อคุณสมบัติที่ไม่มีเครื่องหมายคำพูด
- ขาดหรือมีเครื่องหมายจุลภาคเกิน
- โครงสร้างที่ซ้อนกันไม่ถูกต้อง
- สตริง, วัตถุ หรืออาเรย์ที่ไม่มีการปิด
ข้อผิดพลาดเกี่ยวกับประเภทข้อมูล:
- ใช้ค่าที่เฉพาะเจาะจงใน 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 ภายในแอปพลิเคชัน:

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

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

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

1# Ruby
2require 'json'
3formatted = JSON.pretty_generate(json_object)
4

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

ประวัติ

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 ในภาษาโปรแกรมต่าง ๆ:

1// JavaScript JSON formatting
2function formatJSON(jsonString) {
3  try {
4    const parsedData = JSON.parse(jsonString);
5    return JSON.stringify(parsedData, null, 2);
6  } catch (error) {
7    return `Error: ${error.message}`;
8  }
9}
10
11// ตัวอย่างการใช้งาน
12const rawJSON = '{"name":"John","age":30,"city":"New York"}';
13console.log(formatJSON(rawJSON));
14

1# Python JSON formatting
2import json
3
4def format_json(json_string):
5    try:
6        parsed_data = json.loads(json_string)
7        return json.dumps(parsed_data, indent=2)
8    except json.JSONDecodeError as e:
9        return f"Error: {str(e)}"
10
11# ตัวอย่างการใช้งาน
12raw_json = '{"name":"John","age":30,"city":"New York"}'
13print(format_json(raw_json))
14

1// Java JSON formatting with Gson
2import com.google.gson.Gson;
3import com.google.gson.GsonBuilder;
4import com.google.gson.JsonSyntaxException;
5
6public class JSONFormatter {
7    public static String formatJSON(String jsonString) {
8        try {
9            Gson gson = new GsonBuilder().setPrettyPrinting().create();
10            Object parsedJson = gson.fromJson(jsonString, Object.class);
11            return gson.toJson(parsedJson);
12        } catch (JsonSyntaxException e) {
13            return "Error: " + e.getMessage();
14        }
15    }
16    
17    public static void main(String[] args) {
18        String rawJSON = "{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}";
19        System.out.println(formatJSON(rawJSON));
20    }
21}
22

1// PHP JSON formatting
2function formatJSON($jsonString) {
3    $result = json_decode($jsonString);
4    if (json_last_error() !== JSON_ERROR_NONE) {
5        return "Error: " . json_last_error_msg();
6    }
7    return json_encode($result, JSON_PRETTY_PRINT);
8}
9
10// ตัวอย่างการใช้งาน
11$rawJSON = '{"name":"John","age":30,"city":"New York"}';
12echo formatJSON($rawJSON);
13

1# Ruby JSON formatting
2require 'json'
3
4def format_json(json_string)
5  begin
6    parsed_data = JSON.parse(json_string)
7    return JSON.pretty_generate(parsed_data)
8  rescue JSON::ParserError => e
9    return "Error: #{e.message}"
10  end
11end
12
13# ตัวอย่างการใช้งาน
14raw_json = '{"name":"John","age":30,"city":"New York"}'
15puts format_json(raw_json)
16

1// C# JSON formatting with Newtonsoft.Json
2using Newtonsoft.Json;
3using System;
4
5class JSONFormatter
6{
7    public static string FormatJSON(string jsonString)
8    {
9        try
10        {
11            object parsedJson = JsonConvert.DeserializeObject(jsonString);
12            return JsonConvert.SerializeObject(parsedJson, Formatting.Indented);
13        }
14        catch (JsonException e)
15        {
16            return $"Error: {e.Message}";
17        }
18    }
19    
20    static void Main()
21    {
22        string rawJSON = "{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}";
23        Console.WriteLine(FormatJSON(rawJSON));
24    }
25}
26

1// Go JSON formatting
2package main
3
4import (
5    "encoding/json"
6    "fmt"
7)
8
9func formatJSON(jsonString string) string {
10    var parsedData interface{}
11    err := json.Unmarshal([]byte(jsonString), &parsedData)
12    if err != nil {
13        return fmt.Sprintf("Error: %s", err.Error())
14    }
15    
16    formattedBytes, err := json.MarshalIndent(parsedData, "", "  ")
17    if err != nil {
18        return fmt.Sprintf("Error: %s", err.Error())
19    }
20    
21    return string(formattedBytes)
22}
23
24func main() {
25    rawJSON := `{"name":"John","age":30,"city":"New York"}`
26    fmt.Println(formatJSON(rawJSON))
27}
28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

อ้างอิง

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

💬

ข้อเสนอแนะแสดงความคิดเห็น

💬

คลิกที่ข้อเสนอแนะแสดงความคิดเห็นเพื่อเริ่มให้ข้อเสนอแนะแก่เครื่องมือนี้

🔗

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

ค้นพบเครื่องมือเพิ่มเติมที่อาจมีประโยชน์สำหรับการทำงานของคุณ