Как красиво вывести JSON в JavaScript: полный гайд

Введение: Почему JSON похож на кашу, и как это исправить?

Вы когда-нибудь открывали консоль браузера, видели там километровую строку без единого пробела и думали: «Где тут ошибка?»? Это классика жанра. JSON — универсальный язык обмена данными, но в сыром виде он читается примерно как инструкция к микроволновке на японском. Особенно когда данных много: вложенные объекты, массивы, длинные строки.

К счастью, в JavaScript есть встроенные инструменты, которые превращают эту «кашу» в аккуратную, структурированную красоту. Процесс называется pretty-print JSON (или «красивый вывод»). В этой статье мы разберем все способы: от базового JSON.stringify до продвинутых кастомных решений. Вы научитесь не только читать JSON, но и делать это с комфортом.

Статья написана для pythonlib.ru — образовательного ресурса, где мы любим понятные объяснения и живые примеры. Поехали!

Что такое pretty-print JSON и зачем это нужно?

Pretty-print (или prettify) — это процесс форматирования структурированных данных (JSON, XML, YAML) с отступами, переносами строк и выравниванием. Визуально это выглядит как красиво оформленный код, а не как одна длинная строка.

Зачем это нужно?

• Отладка (debugging). Вы видите структуру объекта: где ключи, где вложенные объекты, где массивы.
• Чтение логов. В консоли браузера или серверных логах форматированный JSON спасает глаза.
• Документация. Примеры JSON в документации всегда pretty-print.
• Обучение. Новичкам проще понимать структуру данных, когда она разбита на уровни.

В JavaScript есть два главных способа получить красивый JSON: встроенный JSON.stringify и сторонние библиотеки (например, pretty-js). Но начнем с базы.

Способ 1: JSON.stringify() с параметрами (самый популярный)

Вы наверняка знаете метод JSON.stringify(). Он превращает объект в строку JSON. Но у него есть второй и третий параметры, которые творят чудеса.

Синтаксис

JSON.stringify(value, replacer, space)

• value — ваш объект или массив.
• replacer — функция или массив для фильтрации ключей (часто null).
• space — количество пробелов для отступа (или строка, например "\t" для табуляции).

Пример 1: Базовый pretty-print с пробелами

const user = {
  name: "Алексей",
  age: 30,
  skills: ["JavaScript", "Python", "SQL"],
  address: {
    city: "Москва",
    zip: 101000
  }
};

// Без форматирования — одна строка
console.log(JSON.stringify(user));
// {"name":"Алексей","age":30,"skills":["JavaScript","Python","SQL"],"address":{"city":"Москва","zip":101000}}

// С форматированием — красота!
console.log(JSON.stringify(user, null, 2));

Результат в консоли:

{
  "name": "Алексей",
  "age": 30,
  "skills": [
    "JavaScript",
    "Python",
    "SQL"
  ],
  "address": {
    "city": "Москва",
    "zip": 101000
  }
}

Обратите внимание: отступы в 2 пробела сделали структуру читаемой. Можно использовать 4 пробела или табуляцию ("\t").

Пример 2: Использование replacer для фильтрации

Иногда нужно вывести только часть данных. Второй параметр replacer может быть массивом ключей.

const filtered = JSON.stringify(user, ["name", "skills"], 2);
console.log(filtered);
// {
//   "name": "Алексей",
//   "skills": [
//     "JavaScript",
//     "Python",
//     "SQL"
//   ]
// }

Или функцией:

const replacerFunc = (key, value) => {
  if (key === "age") return undefined; // исключаем возраст
  return value;
};
console.log(JSON.stringify(user, replacerFunc, 2));

Пример 3: Работа с массивами

const users = [
  { id: 1, name: "Анна" },
  { id: 2, name: "Иван" }
];

console.log(JSON.stringify(users, null, 2));
// [
//   {
//     "id": 1,
//     "name": "Анна"
//   },
//   {
//     "id": 2,
//     "name": "Иван"
//   }
// ]

Важно: метод JSON.stringify работает только с сериализуемыми данными. Функции, undefined, Symbol будут пропущены или заменены на null.

Способ 2: Pretty-print в браузере (консоль DevTools)

Если вы отлаживаетесь прямо в браузере, не обязательно писать код. Современные инструменты разработчика (Chrome DevTools, Firefox Developer Tools) умеют красиво показывать объекты.

Метод console.log()

Просто передайте объект в console.log — браузер покажет его в виде раскрывающегося дерева.

console.log(user);

Вы увидите:

▶ {name: "Алексей", age: 30, skills: Array(3), address: {…}}

Кликните на стрелочку — раскроются все вложенные поля. Это удобно, но не дает текстового представления, которое можно скопировать.

Метод console.table()

Для массивов объектов есть console.table():

console.table(users);

Это выведет таблицу с колонками. Идеально для плоских данных.

Копирование форматированного JSON

Если нужно скопировать красивый JSON, используйте JSON.stringify прямо в консоли:

copy(JSON.stringify(user, null, 2));

Функция copy() доступна в консоли Chrome и Firefox — она поместит результат в буфер обмена.

Способ 3: Кастомное форматирование (для гиков)

Иногда встроенных возможностей мало. Например, нужно:

• Сортировать ключи по алфавиту.
• Подсветить типы данных (строки, числа, null).
• Скрыть пароли или конфиденциальные поля.

Тогда пишем свою функцию.

Пример: сортировка ключей + кастомный отступ

function prettyPrint(obj, indent = 2) {
  const sorted = JSON.stringify(obj, (key, value) => {
    if (