Trình Định Dạng JSON

Định Dạng JSON Là Gì?

Định dạng JSON là quá trình chuyển đổi dữ liệu JSON thành dạng nhất quán, dễ đọc bằng mắt người bằng cách thêm thụt lề, khoảng trắng và xuống dòng—mà không làm thay đổi cấu trúc hay nội dung. Định dạng đúng giúp JSON dễ kiểm tra, gỡ lỗi, chia sẻ và chỉnh sửa hơn, đồng thời vẫn đảm bảo tương thích với máy móc và công cụ phần mềm.

JSON theo định nghĩa bỏ qua khoảng trắng ngoài các giá trị chuỗi. Tuy nhiên, JSON định dạng kém (hoặc đã được giảm dung lượng)—thiếu thụt lề hoặc gộp thành một dòng—gần như không thể đọc hoặc sửa đổi chính xác bởi con người.

Định Dạng vs. Giảm Dung Lượng JSON

• Định dạng thêm khoảng trắng, thụt lề và xuống dòng để tăng tính rõ ràng và dễ đọc.
• Giảm dung lượng loại bỏ tất cả khoảng trắng không cần thiết để tối đa hóa độ gọn gàng và hiệu quả lưu trữ hoặc truyền tải.
• Trình định dạng JSON mạnh mẽ cho phép bạn chuyển đổi qua lại giữa các chế độ, giúp dễ dàng lựa chọn giữa phiên bản thân thiện người dùng và phiên bản tối ưu cho máy móc khi cần.

Ví dụ: JSON Giảm Dung Lượng vs. Định Dạng

{"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
}

Tại Sao Cần Định Dạng JSON?

• Dễ đọc: Thụt lề và xuống dòng đúng cách giúp dễ dàng kiểm tra các đối tượng lồng nhau, phát hiện lỗi và hiểu cấu trúc dữ liệu phức tạp chỉ trong chớp mắt.
• Gỡ lỗi: Khắc phục dữ liệu không hợp lệ hoặc bất ngờ dễ dàng hơn nhiều khi bạn có thể quét và truy vết các khóa, giá trị và cấp độ lồng nhau bằng mắt.
• Cộng tác: JSON được định dạng tốt dễ xem xét, thảo luận và chỉnh sửa trong quá trình duyệt mã, viết tài liệu hoặc chia sẻ tệp.
• Quản lý Phiên bản: Git và các công cụ VCS khác tạo ra khác biệt có ý nghĩa hơn với JSON định dạng, giúp dễ theo dõi thay đổi theo thời gian.
• Tuân thủ: Nhiều hướng dẫn phong cách và trình kiểm tra tự động (như Prettier, ESLint, hoặc jq) yêu cầu định dạng nhất quán nhằm rõ ràng và tiêu chuẩn hóa.
• Tương thích Công Cụ: Một số API, dòng lệnh và trình chỉnh sửa mong đợi đầu vào có định dạng để tương tác hoặc ghi nhận dễ dàng hơn.

Trình Định Dạng JSON Hoạt Động Như Thế Nào?

1. Phân tích cú pháp: Trình định dạng cố gắng phân tích văn bản nhập vào bằng trình phân tích cú pháp JSON nghiêm ngặt. Bước này kiểm tra tính hợp lệ của cú pháp—phát hiện các vấn đề như thiếu dấu ngoặc kép, dấu phẩy thừa hay ký tự chưa thoát.
2. In đẹp: Sau khi hợp lệ, dữ liệu phân tích được chuyển đổi lại thành chuỗi với thụt lề (thường là 2 hoặc 4 khoảng trắng) và xuống dòng theo định dạng do người dùng chọn, tạo ra phiên bản "được in đẹp".

Nếu đầu vào không phải JSON hợp lệ, trình định dạng sẽ báo lỗi hoặc cung cấp thông báo hữu ích chỉ ra vị trí và bản chất vấn đề.

Tùy Chọn Định Dạng

• Thụt lề: Đặt số khoảng trắng mỗi cấp (tối đa 8).
• Sắp xếp các khóa trong đối tượng theo thứ tự chữ cái
• Dùng tab để thụt lề thay vì khoảng trắng
• Mã hóa ký tự không thuộc ASCII dưới dạng Unicode
• Giảm dung lượng đầu ra (dòng đơn, không có khoảng trắng)

Vấn Đề Thường Gặp Được Giải Quyết Bằng Định Dạng

• JSON trên một dòng/Giảm dung lượng: Dữ liệu từ API hoặc file ghi nhật ký thường được giảm dung lượng để tiết kiệm băng thông, gây khó khăn cho việc chỉnh sửa thủ công. Định dạng lại giúp dễ đọc và chỉnh sửa.
• Thụt lề không nhất quán: JSON dán từ nhiều nguồn khác nhau có thể có tab, khoảng trắng hoặc mức thụt lề không đồng đều. Định dạng chuẩn hóa giúp tăng khả năng hiểu và đồng nhất.
• Cấu trúc lớn/Lồng nhau: Mảng hoặc đối tượng lồng nhau sâu (như file cấu hình hoặc phản hồi API phức tạp) trở nên dễ quản lý và điều hướng khi được định dạng, với khả năng thu gọn trong trình soạn thảo hỗ trợ.

Trường Hợp Thực Tế: Định Dạng Phản Hồi API

Khi tích hợp với API bên thứ ba (như AWS, Stripe hay Google Cloud), phản hồi thường được nén gọn để tăng tốc. Định dạng JSON giúp dễ kiểm tra thiếu trường, gỡ lỗi giá trị bất thường hoặc chia sẻ với đồng đội.

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

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

Cách Định Dạng JSON Với Công Cụ Này

1. Dán hoặc tải lên JSON thô, minify hoặc định dạng kém vào khu vực nhập liệu.
2. Chọn các tùy chọn định dạng (kích thước thụt lề, sắp xếp khóa, v.v).
3. Nhấn nút "Định dạng" để xử lý dữ liệu của bạn.
4. Xem hoặc sao chép đầu ra sạch, dễ đọc. Nếu phát hiện lỗi, thông báo chi tiết về cú pháp sẽ xuất hiện giúp bạn sửa JSON.

Mọi thao tác định dạng được thực hiện an toàn ngay trên trình duyệt của bạn—dữ liệu không bao giờ rời thiết bị.

Ví dụ mã cho Định dạng JSON

Xem cách định dạng JSON trong các ngôn ngữ lập trình khác nhau. Các ví dụ này minh họa các kỹ thuật định dạng cơ bản hiệu quả.

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)
}