Przejdź do treści

Formatowanie JSON: Upiększanie i Walidacja JSON Online Bezpłatnie

Natychmiastowe formatowanie zminifikowanego JSONa z prawidłowym wcięciem. Darmowy internetowy formatter JSON sprawdza składnię, upiększa kod i przyspiesza debugowanie. Działa w przeglądarce z formatowaniem w czasie rzeczywistym.

Formatowacz JSON

Formatuj i upiększaj swój JSON za pomocą tego prostego narzędzia - formatowanie odbywa się automatycznie podczas wpisywania!

Sformatowany JSON pojawi się tutaj automatycznie...

Kalkulator załadunku...
📚

Dokumentacja

Czym jest narzędzie do formatowania JSON?

Formater JSON to narzędzie, które pobiera tekst JSON (JavaScript Object Notation) i przepisuje go z wcięciami oraz podziałami wierszy, nie zmieniając samych danych. JSON to format tekstowy służący do przechowywania i przesyłania danych strukturalnych, zbudowany z par nazw i wartości oraz list. Programy zwykle oszczędzają miejsce, usuwając wszystkie zbędne białe znaki, co daje pojedynczy, gęsty wiersz trudny do odczytania dla człowieka. Formatter, nazywany także beautifierem lub pretty printerem, dodaje te białe znaki z powrotem w spójny sposób, dzięki czemu struktura staje się widoczna. To narzędzie formatuje JSON automatycznie podczas wpisywania lub wklejania tekstu. Nie ma przycisku formatowania; wynik aktualizuje się przy każdym naciśnięciu klawisza. Przycisk resetowania czyści dane wejściowe, a przycisk kopiowania kopiuje sformatowany wynik.

Reguły składni JSON

JSON jest zdefiniowany w specyfikacji oznaczonej jako RFC 8259. Ma dwa typy kontenerów:

Obiekty przechowują pary nazw i wartości w nawiasach klamrowych:

1{"name": "John", "age": 30, "city": "New York"}
2

Tablice przechowują uporządkowane listy w nawiasach kwadratowych:

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

Wartość w JSON musi należeć do jednego z sześciu typów: ciąg znaków, liczba, wartość logiczna (true lub false), null, obiekt albo tablica.

Kilka reguł powoduje większość błędów:

  • Nazwy właściwości muszą być ujęte w podwójne cudzysłowy. {name: "John"} jest nieprawidłowe; musi mieć postać {"name": "John"}.
  • Ciągi znaków muszą używać podwójnych, a nie pojedynczych cudzysłowów.
  • Po ostatnim elemencie obiektu lub tablicy nie może występować przecinek (brak końcowych przecinków).
  • JSON nie ma składni komentarzy, mimo że jego wygląd z nawiasami klamrowymi i kwadratowymi pochodzi z JavaScriptu.
  • JSON nie zawiera undefined. Dla brakującej wartości należy użyć null.

Częstym błędem jest wklejenie literału obiektu JavaScript zamiast JSON. {name: 'John', age: undefined} jest prawidłowym JavaScriptem, ale nieprawidłowym JSON-em. Wersja JSON ma postać {"name": "John", "age": null}.

Jak działa ten formater JSON

Wiele formaterów JSON przekazuje tekst do JSON.parse(), aby utworzyć obiekt JavaScript, a następnie wywołuje JSON.stringify(), by ponownie zamienić go na tekst z odstępami. Taka konwersja w obie strony ma skutek uboczny: liczby JavaScriptu są zmiennoprzecinkowymi liczbami podwójnej precyzji IEEE 754, które nie potrafią dokładnie reprezentować każdej liczby całkowitej po przekroczeniu 2^53 − 1 (9,007,199,254,740,991). Identyfikator taki jak 9007199254740993 może po tej konwersji stać się 9007199254740992.

To narzędzie pomija ten etap. Odczytuje dane wejściowe znak po znaku za pomocą niewielkiego parsera napisanego ręcznie i zamiast konwertować każdą liczbę lub ciąg znaków na wartość JavaScriptu kopiuje ten fragment tekstu dokładnie w zapisanej postaci, a następnie umieszcza go na właściwym poziomie wcięcia. Ponieważ liczby nigdy nie są konwertowane na wartości zmiennoprzecinkowe, liczby całkowite dowolnej wielkości zachowują dokładne cyfry. Jeśli w obiekcie ten sam klucz występuje dwa razy, obie kopie pozostają na swoich miejscach, zamiast zostać zastąpione ostatnią, jak stałoby się podczas tworzenia obiektu JavaScript.

Proces przebiega następująco:

  1. Odczytaj następny token (obiekt, tablicę, ciąg znaków, liczbę, true, false lub null).
  2. Sprawdź go względem gramatyki JSON. Odrzuć go, jeśli narusza regułę, na przykład zawiera nieujęty w cudzysłowy klucz lub końcowy przecinek.
  3. Skopiuj tekst tokenu bez zmian do danych wyjściowych.
  4. Dodaj podział wiersza i wcięcie o 2 spacje dla każdego poziomu zagnieżdżenia wewnątrz obiektu lub tablicy. Pusty obiekt lub tablica pozostaje w jednym wierszu, jako {} lub [].
  5. Powtarzaj te czynności do odczytania całych danych wejściowych.

Wcięcie jest stałe i wynosi 2 spacje; nie ma ustawienia, które pozwala je zmienić. Gdy pole danych wejściowych jest puste, panel wyników wyświetla tekst zastępczy „Sformatowany JSON pojawi się tutaj automatycznie...”. Jeśli dane wejściowe naruszają regułę JSON, narzędzie wyświetla komunikat „Nieprawidłowy JSON: sprawdź dane wejściowe”, a nie techniczny komunikat parsera z dokładną pozycją znaku. Wbudowana w przeglądarki funkcja JSON.parse() podaje natomiast pozycję znaku w treści błędu.

Przykład obliczeniowy

Te zminimalizowane dane wejściowe:

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

stają się:

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

Każdy zagnieżdżony obiekt lub tablica otrzymuje wcięcie o jeden poziom większe niż element nadrzędny, dzięki czemu zależność między address a jego trzema polami jest od razu widoczna.

Drugi przykład pokazuje, dlaczego ważne jest kopiowanie literałów. Te dane wejściowe:

1{"id":9007199254740993}
2

są formatowane do postaci:

1{
2  "id": 9007199254740993
3}
4

Cyfry pozostają dokładnie takie, jak wpisano. Formater oparty na JSON.parse(), po którym następuje JSON.stringify(), po cichu zamieniłby tę liczbę na 9007199254740992.

Typowe błędy JSON

  • Nazwa właściwości bez cudzysłowu: {name: "John"}. Poprawka: {"name": "John"}.
  • Końcowy przecinek: {"age": 30,}. Poprawka: usuń przecinek przed zamykającym nawiasem klamrowym.
  • Niedopasowane nawiasy: {"data": [1, 2}. Poprawka: zamknij tablicę za pomocą ] przed zamknięciem obiektu.
  • Niezamknięty ciąg znaków: {"name": "John}. Poprawka: dodaj brakujący cudzysłów zamykający.
  • Pojedyncze cudzysłowy: {'name': 'John'}. Poprawka: użyj podwójnych cudzysłowów.
  • undefined, NaN lub Infinity: żadna z tych wartości nie jest prawidłową wartością JSON. Użyj null albo ciągu znaków.

Częstym źródłem tych błędów jest kopiowanie obiektu bezpośrednio z konsoli przeglądarki lub dziennika serwera, które często zawierają składnię charakterystyczną wyłącznie dla JavaScriptu i wymagającą uporządkowania, zanim dane staną się prawidłowym JSON-em.

Kiedy używać formatera JSON

Formaterów JSON używa się najczęściej do sprawdzania odpowiedzi API, które zwykle są wysyłane w postaci zminimalizowanej, aby oszczędzać przepustowość. Służą także do ręcznego sprawdzania plików konfiguracyjnych, takich jak package.json lub composer.json, odczytywania danych skopiowanych z pamięci lokalnej lub konsoli przeglądarki oraz rozumienia struktury zbioru danych otrzymanego z innego systemu.

Inne sposoby formatowania JSON

  • Narzędzia deweloperskie przeglądarki: Chrome, Edge i Firefox automatycznie formatują odpowiedzi JSON w panelu podglądu karty Network.
  • Edytory kodu: Visual Studio Code formatuje otwarty plik JSON za pomocą Alt+Shift+F (na komputerze Mac: Shift+Option+F). Większość edytorów ma równoważny skrót klawiaturowy lub rozszerzenie do formatowania.
  • Wiersz poleceń: jq (jq . file.json) oraz wbudowane narzędzie Pythona python -m json.tool file.json formatują JSON w terminalu.

Wbudowywanie formatowania JSON w kod

Większość języków programowania zawiera bibliotekę JSON z opcją wcięć. W JavaScripcie:

1const formatted = JSON.stringify(JSON.parse(rawJson), null, 2);
2

W Pythonie:

1import json
2formatted = json.dumps(json.loads(raw_json), indent=2)
3

Oba podejścia analizują tekst i przekształcają go w rodzimą strukturę danych, a następnie ponownie zapisują ją z odstępami. Jest to proste do napisania, ale może zmieniać liczby. JavaScript przechowuje każdą liczbę jako liczbę podwójnej precyzji, więc 9007199254740993 wraca jako 9007199254740992. Python zachowuje liczby całkowite dokładnie, ponieważ liczby całkowite w Pythonie nie mają ograniczenia rozmiaru, ale nadal przepisuje 1.0e2 jako 100.0 i zamienia 1e999 na Infinity, co nie jest prawidłowym JSON-em. Aplikacje wymagające dokładnego przechowywania dużych liczb całkowitych, takich jak identyfikatory baz danych, często przechowują je w JSON-ie jako ciągi znaków, a nie liczby.

Krótka historia JSON

Douglas Crockford opisał JSON na początku lat 2000, czerpiąc składnię z literałów obiektów JavaScriptu, ale czyniąc ją użyteczną w każdym języku. RFC 4627 sformalizowało ten format w 2006. Szybko się rozpowszechnił, ponieważ był krótszy w zapisie niż XML i bezpośrednio odwzorowywał obiekty JavaScriptu, co miało znaczenie, gdy aplikacje internetowe zaczęły pobierać dane w tle zamiast przeładowywać całe strony. W latach 2010 stał się domyślnym formatem interfejsów REST API i baz danych, takich jak MongoDB.

Często zadawane pytania

Czym jest formater JSON? Narzędzie, które dodaje do tekstu JSON wcięcia, podziały wierszy i odstępy, aby jego struktura była łatwa do odczytania, nie zmieniając danych.

Czy formatowanie zmienia dane? Nie. Formatowanie zmienia tylko białe znaki. To narzędzie kopiuje każdy ciąg znaków i każdą liczbę dokładnie tak, jak zostały wpisane, więc wartości w sformatowanym wyniku dokładnie odpowiadają danym wejściowym, także w przypadku liczb zbyt dużych, aby można je było dokładnie przechować jako liczby JavaScriptu.

Dlaczego pojawia się błąd „Nieprawidłowy JSON”? Dane wejściowe naruszają regułę JSON. Typowe przyczyny to nazwy właściwości bez cudzysłowów, końcowy przecinek, pojedyncze cudzysłowy, niezamknięty ciąg znaków lub niedopasowany nawias. To narzędzie nie pokazuje dokładnej pozycji znaku, w której wystąpił problem; sprawdzenie danych wejściowych względem wymienionych wyżej reguł zwykle pozwala szybko go znaleźć.

Czy JSON może zawierać komentarze? Nie. Specyfikacja na to nie pozwala. Formaty takie jak JSONC i JSON5 dodają obsługę komentarzy do składni JSON w przypadkach, w których jest to przydatne, na przykład w plikach konfiguracyjnych.

Jakie jest standardowe wcięcie JSON? Najczęściej stosuje się dwie spacje, zwłaszcza w programowaniu internetowym, i takie wcięcie wykorzystuje to narzędzie. Niektóre przewodniki stylu używają zamiast tego czterech spacji lub tabulatorów; sama specyfikacja JSON nie wymaga żadnego konkretnego wcięcia.

Jaka jest różnica między JSON.parse() a JSON.stringify()? JSON.parse() zamienia ciąg JSON na wartość JavaScriptu. JSON.stringify() wykonuje operację odwrotną, zamieniając wartość JavaScriptu na ciąg JSON, i przyjmuje argument określający wcięcie na potrzeby czytelnego formatowania. To narzędzie nie używa wewnętrznie żadnej z tych funkcji, dzięki czemu zachowuje duże liczby całkowite dokładnie.

Piśmiennictwo

  1. RFC 8259 — Format wymiany danych JavaScript Object Notation (JSON)
  2. MDN Web Docs: JSON
  3. json.org