Ugrás a tartalomra
🛠️
Whiz Tools

JSON Formázó: Szépítse és Ellenőrizze a JSON-t Online Ingyenesen

Formázza át a minifikált JSON-t azonnal megfelelő behúzással. Ingyenes online JSON formázó ellenőrzi a szintaxist, szépíti a kódot, és gyorsabbá teszi a hibakeresést. Böngészőben működik valós idejű formázással.

JSON Formázó

Formázza és szépítse meg JSON-ját ezzel az egyszerű eszközzel - a formázás automatikusan történik, ahogy gépel!

A formázott JSON automatikusan megjelenik itt...

Betöltési kalkulátor...
📚

Dokumentáció

Mi az a JSON-formázó?

A JSON-formázó olyan eszköz, amely a JSON (JavaScript Object Notation) szövegét behúzásokkal és sortörésekkel írja át anélkül, hogy magukat az adatokat megváltoztatná. A JSON strukturált adatok tárolására és továbbítására szolgáló egyszerű szöveges formátum, amely név/érték párokból és listákból épül fel. A programok általában helyet takarítanak meg az összes felesleges szóköz eltávolításával, így egyetlen, tömör sor jön létre, amelyet az emberek nehezen tudnak elolvasni. A formázó, amelyet szépítőnek vagy pretty printernek is neveznek, következetes módon visszaadja ezeket a szóközöket, így láthatóvá válik a struktúra. Ez az eszköz gépelés vagy beillesztés közben automatikusan formázza a JSON-t. Nincs formázógomb; a kimenet minden billentyűleütéskor frissül. A visszaállítás gomb törli a bemenetet, a másolás gomb pedig a formázott eredményt másolja.

A JSON szintaktikai szabályai

A JSON-t az RFC 8259 nevű specifikáció határozza meg. Két tárolótípusa van:

Az objektumok kapcsos zárójelek között tartalmazzák a név/érték párokat:

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

A tömbök szögletes zárójelek között tartalmaznak rendezett listákat:

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

A JSON-ban egy értéknek a hat típus egyikébe kell tartoznia: karakterlánc, szám, logikai érték (true vagy false), null, objektum vagy tömb.

Néhány szabály okozza a legtöbb hibát:

  • A tulajdonságneveket dupla idézőjelek közé kell tenni. A {name: "John"} érvénytelen; helyette {"name": "John"} szükséges.
  • A karakterláncokhoz dupla idézőjelet kell használni, nem szimpla idézőjelet.
  • Objektumban vagy tömbben az utolsó elem után nem állhat vessző (nem lehet záró vessző).
  • A JSON-ban nincs megjegyzésszintaxis, annak ellenére, hogy a kapcsos és szögletes zárójelek használata a JavaScriptből származik.
  • A JSON-ban nincs undefined. Hiányzó értékhez használja a null értéket.

Gyakori hiba, hogy valaki JSON helyett JavaScript-objektumliterált illeszt be. A {name: 'John', age: undefined} érvényes JavaScript, de nem érvényes JSON. A JSON-változat: {"name": "John", "age": null}.

Így működik ez a JSON-formázó

Sok JSON-formázó a szöveget a JSON.parse() függvényen futtatja át, hogy JavaScript-objektumot hozzon létre, majd a JSON.stringify() függvénnyel alakítja vissza szöveggé, térközökkel. Ennek a körfolyamatnak van egy mellékhatása: a JavaScript számai IEEE 754 kettős pontosságú lebegőpontos számok, amelyek nem tudnak minden egész számot pontosan ábrázolni, miután azok meghaladják a 2^53 − 1 értéket (9,007,199,254,740,991). Egy olyan azonosító, mint a 9007199254740993, a körfolyamat után 9007199254740992 értékként jelenhet meg.

Ez az eszköz elkerüli ezt a lépést. A bemenetet karakterenként olvassa egy kis, kézzel írt elemzővel, és ahelyett, hogy minden számot vagy karakterláncot JavaScript-értékké alakítana, pontosan az eredeti formájában másolja át az adott szövegrészt, majd a megfelelő behúzási szintre helyezi. Mivel a számokat soha nem alakítja lebegőpontos számmá, bármilyen méretű egész szám megőrzi pontos számjegyeit. Ha egy objektumban ugyanaz a kulcs kétszer szerepel, mindkét példány a helyén marad, nem pedig csak az utolsó, ahogyan egy JavaScript-objektum létrehozásakor történne.

A folyamat lépésről lépésre:

  1. Olvassa be a következő tokent (objektumot, tömböt, karakterláncot, számot, true, false vagy null).
  2. Ellenőrizze a JSON nyelvtana alapján. Utasítsa el, ha szabályt sért, például idézőjel nélküli kulcsot vagy záró vesszőt tartalmaz.
  3. Másolja a token szövegét változatlanul a kimenetbe.
  4. Szúrjon be sortörést, és a beágyazás minden szintjén 2 szóközzel növelje a behúzást az objektumon vagy tömbön belül. Az üres objektum vagy tömb egy sorban marad, például {} vagy [] alakban.
  5. Ismételje, amíg a teljes bemenetet be nem olvasta.

A behúzás rögzített értéke 2 szóköz; nincs lehetőség a módosítására. Amíg a beviteli mező üres, a kimeneti panelen a „Formatted JSON will appear here automatically...” helyőrző szöveg látható. Ha a bemenet megsérti valamelyik JSON-szabályt, az eszköz a pontos karakterpozíciót megadó technikai elemzői hibaüzenet helyett ezt jeleníti meg: „Invalid JSON: Please check your input”. Ezzel szemben a böngészők beépített JSON.parse() függvénye a hibaüzenetben megadja a karakterpozíciót.

Kidolgozott példa

Ez a tömörített bemenet:

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

eredménye:

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

Minden beágyazott objektum vagy tömb a szülőjénél egy szinttel beljebb van, így az address és a három mezője közötti kapcsolat azonnal látható.

Egy második példa mutatja meg, miért fontos a literálok másolása. Ez a bemenet:

1{"id":9007199254740993}
2

így lesz formázva:

1{
2  "id": 9007199254740993
3}
4

A számjegyek pontosan úgy maradnak, ahogyan be lettek írva. Egy JSON.parse(), majd JSON.stringify() használatára épülő formázó ehelyett észrevétlenül 9007199254740992 értékre alakítaná ezt a számot.

Gyakori JSON-hibák

  • Idézőjel nélküli tulajdonságnév: {name: "John"}. Javítás: {"name": "John"}.
  • Záró vessző: {"age": 30,}. Javítás: távolítsa el a záró kapcsos zárójel előtti vesszőt.
  • Nem egyező zárójelek: {"data": [1, 2}. Javítás: az objektum lezárása előtt zárja le a tömböt a ] jellel.
  • Le nem zárt karakterlánc: {"name": "John}. Javítás: adja hozzá a hiányzó záró idézőjelet.
  • Szimpla idézőjelek: {'name': 'John'}. Javítás: használjon dupla idézőjeleket.
  • undefined, NaN vagy Infinity: ezek egyike sem érvényes JSON-érték. Használjon null értéket vagy karakterláncot.

E hibák gyakori forrása, hogy valaki közvetlenül a böngésző konzoljából vagy egy szervernaplóból másol ki egy objektumot, amely gyakran csak JavaScriptben érvényes szintaxist tartalmaz, ezért a JSON érvényességéhez előbb meg kell tisztítani.

Mikor érdemes JSON-formázót használni?

A JSON-formázókat leggyakrabban API-válaszok vizsgálatára használják, amelyeket a sávszélesség megtakarítása érdekében általában tömörítve küldenek. Használhatók konfigurációs fájlok, például a package.json vagy composer.json kézi ellenőrzésére, a böngésző helyi tárhelyéről vagy konzoljából másolt adatok olvasására, valamint egy másik rendszerből kapott adathalmaz szerkezetének megértésére is.

A JSON formázásának egyéb módjai

  • Böngésző fejlesztői eszközei: a Chrome, az Edge és a Firefox automatikusan formázza a JSON-válaszokat a Hálózat lap előnézeti paneljén.
  • Kódszerkesztők: a Visual Studio Code az Alt+Shift+F billentyűkombinációval formázza a megnyitott JSON-fájlt (Macen a Shift+Option+F kombinációval). A legtöbb szerkesztőben van ennek megfelelő billentyűparancs vagy formázási bővítmény.
  • Parancssor: a jq (jq . file.json) és a Python beépített python -m json.tool file.json modulja is JSON-t formáz terminálból.

JSON-formázás beépítése a kódba

A legtöbb programozási nyelv tartalmaz behúzási lehetőséggel rendelkező JSON-könyvtárat. JavaScriptben:

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

Pythonban:

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

Mindkét megközelítés a szöveget natív adatstruktúrába elemzi, majd térközökkel újra sorosítja. Ezt egyszerű megírni, de megváltoztathatja a számokat. A JavaScript minden számot kettős pontosságú számként tárol, ezért a 9007199254740993 értéke 9007199254740992 formában tér vissza. A Python pontosan őrzi meg az egész számokat, mert a Python-egészeknek nincs méretkorlátjuk, de a 1.0e2 értéket így is 100.0 formában írja át, a 1e999 értéket pedig Infinity értékre alakítja, ami nem érvényes JSON. A pontos nagy egész számokat, például adatbázis-azonosítókat igénylő alkalmazások gyakran karakterláncként, nem számként tárolják ezeket a JSON-ban.

A JSON rövid története

Douglas Crockford a 2000-es évek elején határozta meg a JSON-t, a szintaxisát a JavaScript-objektumliterálokból merítve, de úgy alakítva ki, hogy bármely nyelvből használható legyen. Az RFC 4627 2006-ban szabványosította. Gyorsan elterjedt, mert rövidebb volt XML-nél, és közvetlenül JavaScript-objektumokra képezhető le; ez fontos volt, amikor a webalkalmazások teljes oldalak újratöltése helyett a háttérben kezdték lekérni az adatokat. A 2010-es évekre a REST API-k és az olyan adatbázisok, mint a MongoDB, alapértelmezett formátumává vált.

Gyakran ismételt kérdések

Mi az a JSON-formázó? Olyan eszköz, amely behúzással, sortörésekkel és térközökkel egészíti ki a JSON-szöveget, hogy annak szerkezete könnyen olvasható legyen, az adatok megváltoztatása nélkül.

Megváltoztatja a formázás az adatokat? Nem. A formázás csak a szóközöket változtatja meg. Ez az eszköz minden karakterláncot és számot pontosan úgy másol, ahogyan be lett írva, ezért a formázott kimenet értékei pontosan megegyeznek a bemenet értékeivel, beleértve azokat a számokat is, amelyek túl nagyok ahhoz, hogy JavaScript-számként pontosan tárolhatók legyenek.

Miért kapok „Invalid JSON” hibát? A bemenet nem felel meg a JSON egyik szabályának. Gyakori ok az idézőjelbe nem tett kulcsnév, a záró vessző, a szimpla idézőjel, a le nem zárt karakterlánc vagy a nem egyező zárójel. Ez az eszköz nem jeleníti meg a probléma pontos karakterpozícióját; a bemenetnek a fent felsorolt szabályok szerinti ellenőrzése általában gyorsan megtalálja a hibát.

Tartalmazhat a JSON megjegyzéseket? Nem. A specifikáció nem engedélyezi őket. Az olyan formátumok, mint a JSONC és a JSON5, a JSON-szintaxisra építve támogatják a megjegyzéseket olyan esetekben, amikor ez hasznos, például konfigurációs fájloknál.

Mi a szabványos JSON-behúzás? A két szóköz a webfejlesztés leggyakoribb konvenciója, és ezt használja ez az eszköz is. Egyes stílusútmutatók négy szóközt vagy tabulátort használnak; maga a JSON-specifikáció nem ír elő konkrét behúzást.

Mi a különbség a JSON.parse() és a JSON.stringify() között? A JSON.parse() egy JSON-karakterláncot JavaScript-értékké alakít. A JSON.stringify() ennek a fordítottját végzi: egy JavaScript-értéket JSON-karakterlánccá alakít, és a csinos nyomtatáshoz behúzási argumentumot is elfogad. Ez az eszköz belsőleg egyik függvényt sem használja, ezért képes pontosan megőrizni a nagy egész számokat.

Hivatkozások

  1. RFC 8259 — A JavaScript Object Notation (JSON) adatcsere-formátuma
  2. MDN Web Docs: JSON
  3. json.org