Trình định dạng JSON: Làm đẹp & Xác thực JSON Trực tuyến Miễn phí
Định dạng JSON được thu gọn ngay lập tức với thụt lề phù hợp. Trình định dạng JSON trực tuyến miễn phí xác thực cú pháp, làm đẹp mã và tăng tốc độ gỡ lỗi. Hoạt động trên trình duyệt với định dạng thời gian thực.
Công cụ Định dạng JSON
Định dạng và làm đẹp JSON của bạn với công cụ đơn giản này - việc định dạng sẽ diễn ra tự động khi bạn nhập!
Đầu ra JSON đã định dạng sẽ xuất hiện ở đây tự động...
Tài liệu hướng dẫn
Trình định dạng JSON là gì?
Trình định dạng JSON là công cụ nhận văn bản JSON (JavaScript Object Notation) và viết lại văn bản đó với thụt lề và ngắt dòng mà không thay đổi dữ liệu. JSON là định dạng văn bản thuần túy dùng để lưu trữ và truyền dữ liệu có cấu trúc, được tạo từ các cặp tên/giá trị và danh sách. Các chương trình thường tiết kiệm dung lượng bằng cách loại bỏ mọi khoảng trắng thừa, tạo ra một dòng duy nhất dày đặc rất khó đọc đối với con người. Trình định dạng, còn gọi là trình làm đẹp hoặc trình in đẹp, thêm lại khoảng trắng theo cách nhất quán để cấu trúc trở nên rõ ràng. Công cụ này tự động định dạng JSON khi văn bản được nhập hoặc dán. Không có nút định dạng; kết quả được cập nhật sau mỗi lần gõ phím. Nút đặt lại xóa phần nhập, còn nút sao chép sao chép kết quả đã định dạng.
Quy tắc cú pháp JSON
JSON được định nghĩa trong một đặc tả có tên RFC 8259. JSON có hai loại cấu trúc chứa:
Đối tượng chứa các cặp tên/giá trị bên trong dấu ngoặc nhọn:
1{"name": "John", "age": 30, "city": "New York"}
2Mảng chứa các danh sách có thứ tự bên trong dấu ngoặc vuông:
1["apple", "banana", "cherry"]
2Một giá trị trong JSON phải thuộc một trong sáu kiểu: chuỗi, số, giá trị boolean (true hoặc false), null, đối tượng hoặc mảng.
Một số quy tắc là nguyên nhân của phần lớn lỗi:
- Tên thuộc tính phải được đặt trong dấu ngoặc kép.
{name: "John"}không hợp lệ; phải là{"name": "John"}. - Chuỗi phải dùng dấu ngoặc kép, không dùng dấu ngoặc đơn.
- Không được đặt dấu phẩy sau phần tử cuối cùng trong đối tượng hoặc mảng (không có dấu phẩy thừa ở cuối).
- JSON không có cú pháp chú thích, dù hình thức dùng dấu ngoặc nhọn và ngoặc vuông bắt nguồn từ JavaScript.
- JSON không có
undefined. Hãy dùngnullcho giá trị bị thiếu.
Một lỗi thường gặp là dán một biểu thức khởi tạo đối tượng JavaScript thay vì JSON. {name: 'John', age: undefined} hợp lệ trong JavaScript nhưng không hợp lệ trong JSON. Phiên bản JSON là {"name": "John", "age": null}.
Trình định dạng JSON này hoạt động như thế nào
Nhiều trình định dạng JSON đưa văn bản qua JSON.parse() để tạo một đối tượng JavaScript, sau đó dùng JSON.stringify() để chuyển nó trở lại thành văn bản có khoảng cách. Quá trình chuyển đổi hai chiều này có một tác động phụ: các số JavaScript là số thực độ chính xác kép IEEE 754, không thể biểu diễn chính xác mọi số nguyên khi vượt quá 2^53 − 1 (9,007,199,254,740,991). Một ID như 9007199254740993 có thể trở thành 9007199254740992 sau quá trình đó.
Công cụ này bỏ qua bước đó. Nó đọc dữ liệu nhập theo từng ký tự bằng một trình phân tích cú pháp nhỏ được viết thủ công. Thay vì chuyển từng số hoặc chuỗi thành một giá trị JavaScript, nó sao chép chính xác phần văn bản đó như đã được viết rồi đặt nó ở mức thụt lề thích hợp. Vì các số không bao giờ được chuyển thành số thực, các số nguyên với kích thước bất kỳ vẫn giữ nguyên từng chữ số. Nếu một đối tượng có cùng một khóa được viết hai lần, cả hai bản sao đều được giữ nguyên tại vị trí của chúng thay vì bị gộp thành bản cuối cùng, như khi xây dựng một đối tượng JavaScript.
Quy trình từng bước:
- Đọc mã thông báo tiếp theo (một đối tượng, mảng, chuỗi, số,
true,falsehoặcnull). - Kiểm tra mã thông báo đó theo ngữ pháp JSON. Từ chối nếu nó vi phạm một quy tắc, chẳng hạn như khóa không đặt trong dấu ngoặc kép hoặc dấu phẩy thừa ở cuối.
- Sao chép nguyên văn mã thông báo vào kết quả.
- Thêm một ngắt dòng và thụt lề 2 khoảng trắng cho mỗi cấp lồng nhau bên trong đối tượng hoặc mảng. Đối tượng hoặc mảng rỗng vẫn nằm trên một dòng, như
{}hoặc[]. - Lặp lại cho đến khi đọc hết toàn bộ dữ liệu nhập.
Mức thụt lề cố định là 2 khoảng trắng; không có tùy chọn thay đổi. Khi ô nhập trống, bảng kết quả hiển thị văn bản giữ chỗ "Formatted JSON will appear here automatically...". Nếu dữ liệu nhập vi phạm quy tắc JSON, công cụ hiển thị thông báo "Invalid JSON: Please check your input" thay vì thông báo kỹ thuật của trình phân tích cú pháp kèm vị trí chính xác của ký tự. Ngược lại, JSON.parse() tích hợp trong trình duyệt có báo vị trí ký tự trong nội dung lỗi.
Ví dụ minh họa
Dữ liệu nhập đã rút gọn này:
1{"name":"John Doe","age":30,"address":{"street":"123 Main St","city":"Anytown","state":"CA"},"hobbies":["reading","hiking","photography"]}
2trở thành:
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}
15Mỗi đối tượng hoặc mảng lồng nhau được thụt lề thêm một cấp so với phần tử cha, nhờ đó mối quan hệ giữa address và ba trường của nó có thể nhìn thấy ngay.
Ví dụ thứ hai cho thấy việc sao chép các giá trị nguyên văn là quan trọng. Dữ liệu nhập này:
1{"id":9007199254740993}
2được định dạng thành:
1{
2 "id": 9007199254740993
3}
4Các chữ số vẫn chính xác như đã nhập. Một trình định dạng xây dựng trên JSON.parse() rồi dùng JSON.stringify() sẽ âm thầm chuyển số đó thành 9007199254740992.
Các lỗi JSON thường gặp
- Tên thuộc tính không đặt trong dấu ngoặc kép:
{name: "John"}. Cách sửa:{"name": "John"}. - Dấu phẩy thừa ở cuối:
{"age": 30,}. Cách sửa: xóa dấu phẩy trước dấu ngoặc nhọn đóng. - Ngoặc không khớp:
{"data": [1, 2}. Cách sửa: đóng mảng bằng]trước khi đóng đối tượng. - Chuỗi chưa đóng:
{"name": "John}. Cách sửa: thêm dấu ngoặc kép đóng còn thiếu. - Dấu ngoặc đơn:
{'name': 'John'}. Cách sửa: dùng dấu ngoặc kép. undefined,NaNhoặcInfinity: không giá trị nào trong số này hợp lệ trong JSON. Hãy dùngnullhoặc một chuỗi.
Một nguồn thường gặp của các lỗi này là sao chép trực tiếp một đối tượng từ bảng điều khiển của trình duyệt hoặc nhật ký máy chủ, vốn thường chứa cú pháp chỉ có trong JavaScript và cần được làm sạch trước khi trở thành JSON hợp lệ.
Khi nào nên dùng trình định dạng JSON
Trình định dạng JSON thường được dùng nhất để kiểm tra các phản hồi API, vốn thường được gửi ở dạng rút gọn nhằm tiết kiệm băng thông. Chúng cũng được dùng để kiểm tra thủ công các tệp cấu hình như package.json hoặc composer.json, đọc dữ liệu sao chép từ bộ nhớ cục bộ hoặc bảng điều khiển của trình duyệt, và hiểu cấu trúc của tập dữ liệu nhận từ một hệ thống khác.
Các cách khác để định dạng JSON
- Công cụ dành cho nhà phát triển trong trình duyệt: Chrome, Edge và Firefox tự động định dạng các phản hồi JSON trong ngăn xem trước của thẻ Network.
- Trình soạn thảo mã: Visual Studio Code định dạng một tệp JSON đang mở bằng Alt+Shift+F (Shift+Option+F trên máy Mac). Hầu hết trình soạn thảo đều có phím tắt tương đương hoặc tiện ích mở rộng để định dạng.
- Dòng lệnh:
jq(jq . file.json) và công cụ tích hợp sẵn của Pythonpython -m json.tool file.jsonđều định dạng JSON từ thiết bị đầu cuối.
Tích hợp việc định dạng JSON vào mã
Hầu hết ngôn ngữ lập trình đều có thư viện JSON kèm tùy chọn thụt lề. Trong JavaScript:
1const formatted = JSON.stringify(JSON.parse(rawJson), null, 2);
2Trong Python:
1import json
2formatted = json.dumps(json.loads(raw_json), indent=2)
3Cả hai cách đều phân tích văn bản thành cấu trúc dữ liệu gốc rồi tuần tự hóa lại với khoảng cách. Cách này dễ viết nhưng có thể làm thay đổi các số. JavaScript lưu mọi số dưới dạng số thực độ chính xác kép, vì vậy 9007199254740993 trở lại thành 9007199254740992. Python giữ nguyên độ chính xác của các số nguyên vì số nguyên Python không có giới hạn kích thước, nhưng vẫn viết lại 1.0e2 thành 100.0 và biến 1e999 thành Infinity, vốn không phải là JSON hợp lệ. Các ứng dụng cần số nguyên lớn chính xác, chẳng hạn như ID cơ sở dữ liệu, thường lưu chúng dưới dạng chuỗi trong JSON thay vì dạng số.
Lịch sử ngắn gọn của JSON
Douglas Crockford đặc tả JSON vào đầu những năm 2000, lấy cú pháp từ các biểu thức khởi tạo đối tượng JavaScript nhưng khiến nó có thể được sử dụng từ mọi ngôn ngữ. RFC 4627 chính thức hóa JSON vào 2006. JSON nhanh chóng phổ biến vì ngắn gọn hơn XML và ánh xạ trực tiếp sang các đối tượng JavaScript, điều quan trọng khi các ứng dụng web bắt đầu lấy dữ liệu ở chế độ nền thay vì tải lại toàn bộ trang. Đến những năm 2010, JSON đã trở thành định dạng mặc định cho các API REST và các cơ sở dữ liệu như MongoDB.
Các câu hỏi thường gặp
Trình định dạng JSON là gì? Một công cụ thêm thụt lề, ngắt dòng và khoảng cách vào văn bản JSON để cấu trúc của nó dễ đọc mà không thay đổi dữ liệu.
Việc định dạng có làm thay đổi dữ liệu không? Không. Việc định dạng chỉ thay đổi khoảng trắng. Công cụ này sao chép mọi chuỗi và số chính xác như đã nhập, vì vậy các giá trị trong kết quả đã định dạng khớp chính xác với dữ liệu nhập, kể cả những số quá lớn để một số JavaScript có thể lưu trữ chính xác.
Tại sao tôi nhận được lỗi "Invalid JSON"? Dữ liệu nhập vi phạm một quy tắc JSON. Các nguyên nhân thường gặp là tên thuộc tính không đặt trong dấu ngoặc kép, dấu phẩy thừa ở cuối, dấu ngoặc đơn, chuỗi chưa đóng hoặc ngoặc không khớp. Công cụ này không hiển thị vị trí chính xác của ký tự gây lỗi; đối chiếu dữ liệu nhập với các quy tắc ở trên thường giúp tìm ra lỗi nhanh chóng.
JSON có thể có chú thích không? Không. Đặc tả không cho phép chú thích. Các định dạng như JSONC và JSON5 bổ sung khả năng hỗ trợ chú thích trên cú pháp JSON cho những trường hợp hữu ích, chẳng hạn như tệp cấu hình.
Mức thụt lề JSON tiêu chuẩn là bao nhiêu? Hai khoảng trắng là quy ước phổ biến nhất trong phát triển web và là mức mà công cụ này sử dụng. Một số hướng dẫn kiểu mã dùng bốn khoảng trắng hoặc tab; bản thân đặc tả JSON không yêu cầu mức thụt lề cụ thể nào.
JSON.parse() và JSON.stringify() khác nhau như thế nào?
JSON.parse() chuyển một chuỗi JSON thành một giá trị JavaScript. JSON.stringify() thực hiện thao tác ngược lại, chuyển một giá trị JavaScript thành chuỗi JSON và nhận tham số thụt lề để in đẹp. Công cụ này không sử dụng hàm nào trong hai hàm đó ở bên trong, nhờ vậy có thể bảo toàn chính xác các số nguyên lớn.