JSON Форматер: Beautify & Validate JSON Онлайн Безкоштовно

Q: У чому різниця між JSON.parse() і JSON.stringify()?

JSON.parse() перетворює рядок JSON на значення JavaScript. JSON.stringify() виконує зворотне перетворення — перетворює значення JavaScript на рядок JSON — і приймає аргумент відступу для красивого друку. Цей інструмент не використовує жодну з цих функцій усередині, завдяки чому точно зберігає великі цілі числа.

Що таке форматувальник JSON?

Форматувальник JSON — це інструмент, який бере текст JSON (JavaScript Object Notation) і переписує його з відступами та розривами рядків, не змінюючи самі дані. JSON — це текстовий формат для зберігання та передавання структурованих даних, побудований із пар ім’я/значення та списків. Програми зазвичай заощаджують місце, видаляючи всі зайві пробіли, унаслідок чого утворюється один щільний рядок, який важко читати. Форматувальник, також званий засобом для покращення вигляду або форматувальником із читабельним форматуванням, узгоджено додає ці пробіли назад, щоб структура була видимою. Цей інструмент автоматично форматує JSON під час введення або вставлення. Кнопки форматування немає: результат оновлюється після кожного натискання клавіші. Кнопка скидання очищає введені дані, а кнопка копіювання копіює відформатований результат.

Правила синтаксису JSON

JSON визначено специфікацією RFC 8259. Він має два типи контейнерів:

Об’єкти містять пари ім’я/значення у фігурних дужках:

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

Масиви містять упорядковані списки у квадратних дужках:

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

Значення в JSON має належати до одного із шести типів: рядок, число, логічне значення (true або false), null, об’єкт або масив.

Кілька правил спричиняють більшість помилок:

Імена властивостей потрібно брати в подвійні лапки. {name: "John"} є неприпустимим; має бути {"name": "John"}.
Рядки потрібно записувати в подвійних лапках, а не в одинарних.
Кома не може стояти після останнього елемента об’єкта або масиву (кінцеві коми не допускаються).
У JSON немає синтаксису коментарів, хоча його вигляд із фігурними та квадратними дужками походить із JavaScript.
У JSON немає undefined. Для відсутнього значення використовуйте null.

Поширена помилка — вставити літерал об’єкта JavaScript замість JSON. {name: 'John', age: undefined} є припустимим JavaScript, але не припустимим JSON. Версія JSON має вигляд {"name": "John", "age": null}.

Як працює цей форматувальник JSON

Багато форматувальників JSON передають текст через JSON.parse(), щоб створити об’єкт JavaScript, а потім викликають JSON.stringify(), щоб перетворити його назад на текст із відступами. Таке перетворення має побічний ефект: числа JavaScript є числами з плаваючою комою подвійної точності IEEE 754, які не можуть точно подати кожне ціле число понад 2^53 − 1 (9,007,199,254,740,991). Ідентифікатор на кшталт 9007199254740993 після такого перетворення може стати 9007199254740992.

Цей інструмент уникає такого кроку. Він читає введені дані посимвольно за допомогою невеликого синтаксичного аналізатора, створеного вручну, і замість перетворення кожного числа чи рядка на значення JavaScript точно копіює цей фрагмент тексту, а потім розміщує його на відповідному рівні відступу. Оскільки числа ніколи не перетворюються на числа з плаваючою комою, цілі числа будь-якого розміру зберігають точний запис. Якщо той самий ключ в об’єкті записано двічі, обидві копії залишаються на своїх місцях, а не згортаються до останньої, як це сталося б під час створення об’єкта JavaScript.

Процес покроково:

Прочитати наступний токен (об’єкт, масив, рядок, число, true, false або null).
Перевірити його за граматикою JSON. Відхилити токен, якщо він порушує правило, наприклад містить ключ без лапок або кінцеву кому.
Скопіювати текст токена без змін у вихідні дані.
Додати розрив рядка та відступ у 2 пробіли для кожного рівня вкладеності всередині об’єкта або масиву. Порожній об’єкт або масив залишається в одному рядку: {} або [].
Повторювати, доки весь введений текст не буде прочитано.

Відступ незмінно дорівнює 2 пробілам; налаштування для його зміни немає. Поки поле введення порожнє, панель результату показує текст-заповнювач «Відформатований JSON автоматично з’явиться тут...». Якщо введені дані порушують правило JSON, інструмент показує повідомлення «Недійсний JSON: перевірте введені дані», а не технічне повідомлення аналізатора з точною позицією символу. Вбудований у браузери JSON.parse(), навпаки, указує позицію символу в тексті помилки.

Приклад обчислення

Цей мінімізований вхідний текст:

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

перетворюються на:

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

Кожен вкладений об’єкт або масив має відступ на один рівень більший, ніж його батьківський елемент, тому зв’язок між address і трьома його полями видно одразу.

Другий приклад показує, чому важливо копіювати літерали. Ці вхідні дані:

1{"id":9007199254740993}
2

форматуються так:

1{
2  "id": 9007199254740993
3}
4

Цифри залишаються точно такими, як їх введено. Форматувальник на основі JSON.parse() із подальшим викликом JSON.stringify() натомість непомітно перетворив би це число на 9007199254740992.

Поширені помилки JSON

Ім’я властивості без лапок: {name: "John"}. Виправлення: {"name": "John"}.
Кінцева кома: {"age": 30,}. Виправлення: видаліть кому перед закривною фігурною дужкою.
Невідповідні дужки: {"data": [1, 2}. Виправлення: закрийте масив дужкою ] перед закриттям об’єкта.
Незакритий рядок: {"name": "John}. Виправлення: додайте відсутню закривну лапку.
Одинарні лапки: {'name': 'John'}. Виправлення: використовуйте подвійні лапки.
undefined, NaN або Infinity: жодне з цих значень не є припустимим значенням JSON. Використовуйте null або рядок.

Частою причиною цих помилок є копіювання об’єкта безпосередньо з консолі браузера або журналу сервера, які часто містять синтаксис, властивий лише JavaScript, і потребують очищення, перш ніж стануть припустимим JSON.

Коли використовувати форматувальник JSON

Форматувальники JSON найчастіше використовують для перевірки відповідей API, які зазвичай надсилаються в мінімізованому вигляді для заощадження пропускної здатності. Їх також використовують для ручної перевірки конфігураційних файлів, таких як package.json або composer.json, читання даних, скопійованих із локального сховища чи консолі браузера, і розуміння структури набору даних, отриманого від іншої системи.

Інші способи форматування JSON

Інструменти розробника браузера: Chrome, Edge і Firefox автоматично форматують відповіді JSON у панелі попереднього перегляду на вкладці «Мережа».
Редактори коду: Visual Studio Code форматує відкритий файл JSON за допомогою Alt+Shift+F (Shift+Option+F на Mac). Більшість редакторів мають відповідне сполучення клавіш або розширення для форматування.
Командний рядок: jq (jq . file.json) і вбудований у Python інструмент python -m json.tool file.json форматують JSON у терміналі.

Вбудовування форматування JSON у код

Більшість мов програмування мають бібліотеку JSON із параметром відступу. У JavaScript:

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

У Python:

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

Обидва підходи аналізують текст у вбудовану структуру даних, а потім серіалізують її назад із пробілами. Це просто написати, але числа можуть змінитися. JavaScript зберігає кожне число як число подвійної точності, тому 9007199254740993 повертається як 9007199254740992. Python зберігає цілі числа точно, оскільки цілі числа Python не мають обмеження за розміром, але все одно переписує 1.0e2 як 100.0 і перетворює 1e999 на Infinity, що не є припустимим JSON. Програми, яким потрібні точні великі цілі числа, наприклад ідентифікатори баз даних, часто зберігають їх у JSON як рядки, а не як числа.

Коротка історія JSON

Дуглас Крокфорд визначив JSON на початку 2000-х років, узявши його синтаксис із літералів об’єктів JavaScript, але зробивши його придатним для використання з будь-якою мовою. RFC 4627 формалізував його у 2006 році. Формат швидко поширився, оскільки його було коротше записувати, ніж XML, а його синтаксис безпосередньо відображався на об’єкти JavaScript. Це мало значення, коли вебзастосунки почали отримувати дані у фоновому режимі, а не перезавантажувати цілі сторінки. До 2010-х років JSON став форматом за замовчуванням для REST API і таких баз даних, як MongoDB.

Поширені запитання

Що таке форматувальник JSON? Інструмент, який додає до тексту JSON відступи, розриви рядків і пробіли, щоб його структуру було легко читати, не змінюючи дані.

Чи змінює форматування дані? Ні. Форматування змінює лише пробіли. Цей інструмент копіює кожен рядок і число точно такими, як їх введено, тому значення у відформатованому результаті повністю відповідають вхідним даним, зокрема числа, завеликі для точного зберігання як числа JavaScript.

Чому я отримую помилку «Недійсний JSON»? Введені дані порушують правило JSON. Поширені причини — імена властивостей без лапок, кінцева кома, одинарні лапки, незакритий рядок або невідповідні дужки. Цей інструмент не показує точну позицію проблемного символу; перевірка введених даних за наведеними вище правилами зазвичай швидко допомагає знайти помилку.

Чи можуть у JSON бути коментарі? Ні. Специфікація їх не допускає. Формати на кшталт JSONC і JSON5 додають підтримку коментарів поверх синтаксису JSON у випадках, де це корисно, наприклад у конфігураційних файлах.

Який стандартний відступ у JSON? Найпоширеніша конвенція у веброзробці — два пробіли; саме це використовує цей інструмент. Деякі посібники зі стилю рекомендують натомість чотири пробіли або табуляцію; сама специфікація JSON не вимагає певного відступу.

У чому різниця між JSON.parse() і JSON.stringify()? JSON.parse() перетворює рядок JSON на значення JavaScript. JSON.stringify() виконує зворотне перетворення — перетворює значення JavaScript на рядок JSON — і приймає аргумент відступу для красивого друку. Цей інструмент не використовує жодну з цих функцій усередині, завдяки чому точно зберігає великі цілі числа.

JSON Форматер: Beautify & Validate JSON Онлайн Безкоштовно