Trình Định Dạng JSON

Định dạng và xác thực dữ liệu JSON để dễ đọc và debug hơn. Hỗ trợ nén, làm đẹp và tô màu cú pháp.

Escape Output

Chế độ tối

Nhập JSON

Kết quả định dạng

Cách sử dụng Trình Định Dạng JSON

Các bước sử dụng

Dán dữ liệu JSON của bạn vào ô nhập bên trái.
Nhấn nút "Định dạng" để định dạng dữ liệu JSON thành dạng dễ đọc.
Nhấn nút "Nén" để nén dữ liệu JSON thành một dòng duy nhất.
Nhấn nút "Tự động sửa" để tự động sửa các lỗi cú pháp JSON phổ biến.
Nhấn nút "Sao chép" để sao chép kết quả vào clipboard.
Nhấn nút "Xóa" để xóa cả vùng nhập và output.
Sử dụng nút "Escape Output" để escape output nhằm nhúng vào code chương trình.
Sử dụng nút "Chế độ tối" để chuyển đổi giao diện hiển thị.

Ví dụ Escape Output

Khi bật escape output, chuỗi JSON sẽ được escape để nhúng trực tiếp vào code chương trình. Ví dụ:

Output thường::

{
  "message": "Hello \"World\"",
  "newline": "Line 1\nLine 2"
}

Output đã escape::

{\n \"message\": \"Hello \\\"World\\\"\",\n \"newline\": \"Line 1\\nLine 2\"\n}

Tính năng

Tự động định dạng: Làm đẹp dữ liệu JSON với thụt lề và ngắt dòng phù hợp.
Xác thực cú pháp: Kiểm tra lỗi cú pháp trong dữ liệu JSON và cung cấp thông báo lỗi.
Tô màu cú pháp: Đánh dấu các cặp key-value và kiểu dữ liệu JSON bằng màu khác nhau.
Chức năng nén: Chuyển đổi JSON đã định dạng thành dạng nén một dòng để giảm kích thước dữ liệu.
Tự động sửa: Tự động sửa các lỗi cú pháp JSON phổ biến như key không có ngoặc kép và dấu phẩy thừa.
Escape Output: Escape chuỗi JSON để nhúng trực tiếp vào code chương trình.
Xử lý cục bộ: Mọi xử lý dữ liệu đều thực hiện trong trình duyệt của bạn, không upload lên server.
Xử lý thời gian thực: Thay đổi input được tự động xử lý và kết quả được cập nhật.

JSON là gì?

JSON (JavaScript Object Notation) là định dạng trao đổi dữ liệu nhẹ, dễ đọc và viết đối với con người, dễ phân tích và tạo ra đối với máy tính. JSON dựa trên tập con của ngôn ngữ JavaScript, nhưng là định dạng văn bản hoàn toàn độc lập ngôn ngữ, được hầu hết các ngôn ngữ lập trình hỗ trợ phân tích và tạo ra. JSON được đề xuất bởi Douglas Crockford vào đầu những năm 2000 và được chuẩn hóa trong ECMA-404 và RFC 8259.

Quy tắc cú pháp JSON

Dữ liệu được biểu diễn dưới dạng cặp key/value
Dữ liệu được phân tách bằng dấu phẩy
Dấu ngoặc nhọn {} chứa object
Dấu ngoặc vuông [] chứa array
Key phải là chuỗi được bao bởi dấu ngoặc kép
Value có thể là chuỗi, số, object, array, boolean hoặc null

Các kiểu dữ liệu JSON

Kiểu	Mô tả	Ví dụ
Chuỗi	Chuỗi ký tự Unicode được bao bởi dấu ngoặc kép	`"Hello World"`
Số	Số nguyên hoặc số thực, không hỗ trợ giá trị không phải số	`42`, `3.14`
Object	Tập hợp các cặp key/value không có thứ tự	`{"name": "John"}`
Array	Tập hợp các giá trị có thứ tự	`[1, 2, 3]`
Boolean	true hoặc false	`true`
null	Giá trị rỗng	`null`

Thuật toán định dạng JSON

Quá trình định dạng JSON chủ yếu bao gồm hai bước: phân tích và tạo lại. Đầu tiên, parser đọc chuỗi JSON và xây dựng biểu diễn trong bộ nhớ, sau đó formatter tạo lại chuỗi với thụt lề và ngắt dòng cụ thể. Đây là quy trình định dạng đơn giản hóa:

// Simplified JSON formatting implementation
function formatJSON(jsonStr, indentSize = 2) {
  try {
    // Step 1: Parse JSON string to JavaScript object
    const obj = JSON.parse(jsonStr);
    
    // Step 2: Convert object back to string with indentation
    return JSON.stringify(obj, null, indentSize);
  } catch (e) {
    // Handle invalid JSON
    throw new Error("Invalid JSON: " + e.message);
  }
}

// Usage example
const uglyJson = '{"name":"John","age":30,"city":"New York"}';
const prettyJson = formatJSON(uglyJson);
console.log(prettyJson);
/*
Output:
{
  "name": "John",
  "age": 30,
  "city": "New York"
}
*/

So sánh JSON và XML

Tính năng	JSON	XML
Cú pháp	Gọn gàng, sử dụng dấu ngoặc nhọn và ngoặc vuông	Phức tạp hơn, sử dụng thẻ và thuộc tính
Kích thước file	Thường nhỏ hơn XML	Thường lớn hơn JSON
Tốc độ phân tích	Nhanh hơn	Chậm hơn
Kiểu dữ liệu	Hỗ trợ các kiểu dữ liệu cơ bản	Tất cả dữ liệu đều là văn bản
Namespace	Không hỗ trợ	Có hỗ trợ
Bình luận	Không hỗ trợ	Có hỗ trợ
Khả năng sử dụng	Thân thiện hơn với lập trình viên	Có cấu trúc và chặt chẽ hơn

Các vấn đề phổ biến và giải pháp

Vấn đề: Lỗi phân tích JSON - thiếu dấu phẩy hoặc dấu ngoặc

Giải pháp: Kiểm tra tất cả dấu ngoặc đóng của object và array, đảm bảo mỗi cặp key/value được theo sau bởi dấu phẩy (trừ cặp cuối cùng).

Vấn đề: Lỗi phân tích JSON - giá trị key không hợp lệ

Giải pháp: Đảm bảo tất cả key được bao bởi dấu ngoặc kép, không hỗ trợ dấu ngoặc đơn hoặc tên key không có ngoặc kép.

Vấn đề: Vấn đề kích thước dữ liệu JSON

Giải pháp: Đối với dữ liệu JSON lớn, hãy xem xét sử dụng phiên bản nén để truyền tải, sau đó định dạng để hiển thị trên client.

Để biết thêm thông tin chính thức về JSON, vui lòng tham khảo các nguồn sau: JSON.org | RFC 8259 | Wikipedia: JSON

Công Cụ Liên Quan

Chuyển Đổi JSON YAML

Chuyển đổi giữa định dạng JSON và YAML với thụt lề tùy chỉnh và hỗ trợ kiểu flow/block

Chuyển Đổi JSON CSV

Chuyển đổi giữa định dạng JSON và CSV với làm phẳng đối tượng lồng nhau và hỗ trợ dấu phân cách tùy chỉnh

Trình Định Dạng XML

Định dạng và xác thực dữ liệu XML với làm nổi bật cú pháp