НейроАгент

Как красиво форматировать JSON в JavaScript

Узнайте, как красиво форматировать JSON в JavaScript с правильными отступами, пробелами и визуальными улучшениями. Изучите встроенные методы, решения для консоли и npm-пакеты для оптимальной читаемости.

#console-output #javascript-json #json-formatting #npm-packages #syntax-highlighting #web-development

21.10.2025, 18:52

Вопрос

Как я могу красиво форматировать JSON в JavaScript, чтобы сделать его более читаемым для человека? Я ищу решения, которые включают правильные отступы и пробельные символы, и в идеале также поддерживали бы визуальные улучшения, такие как цвета или стили шрифтов.

НейроАгент

Вы можете форматировать JSON в JavaScript с помощью встроенного метода JSON.stringify() с параметром space для добавления правильного отступа и пробелов, или использовать методы консоли, такие как console.dir() с опциями цвета для вывода в терминале, а для расширенных функций, включая подсветку синтаксиса, вы можете использовать пакеты npm или пользовательские стили CSS.

Базовый метод JSON.stringify()

Простой способ форматирования JSON в JavaScript — использование встроенного метода JSON.stringify() с его необязательным третьим параметром под названием space. По умолчанию JSON.stringify() выводит сжатый JSON без каких-либо пробелов, но параметр space позволяет контролировать отступы.

javascript

const data = {
  name: "John",
  age: 30,
  city: "New York",
  hobbies: ["reading", "coding", "gaming"],
  address: {
    street: "123 Main St",
    zip: "10001"
  }
};

// Форматирование с отступом в 2 пробела
const prettyJson = JSON.stringify(data, null, 2);
console.log(prettyJson);

Вывод:

json

{
  "name": "John",
  "age": 30,
  "city": "New York",
  "hobbies": [
    "reading",
    "coding",
    "gaming"
  ],
  "address": {
    "street": "123 Main St",
    "zip": "10001"
  }
}

Параметр space может быть:

Числом (0-10), представляющим количество пробелов для отступа
Строкой (например, '\t' для символов табуляции) для использования в качестве отступа
null или опущен для компактного вывода

Согласно официальной документации, “аргумент space может использоваться для управления интервалами в конечной строке JSON”.

Решения для вывода в консоль

Для вывода в терминал и консоль вы можете использовать встроенный метод Node.js console.dir() с определенными опциями, которые обеспечивают как форматирование, так и улучшение цветового оформления.

javascript

const myObject = {
  name: "Example",
  value: 123,
  nested: {
    key: "value"
  }
};

// Форматирование с полной разверткой и цветами
console.dir(myObject, { depth: null, colors: true });

Этот подход особенно хорошо работает в средах Node.js, где вам нужен отформатированный вывод с визуальной ясностью. Опция depth: null обеспечивает полную развертку вложенных объектов, а colors: true добавляет цветовое кодирование для разных типов данных.

Как объясняется на Mozilla Developer Network, console.dir() отображает интерактивный список свойств указанного объекта JavaScript.

Отображение в HTML и веб-приложениях

При отображении JSON в веб-приложениях вы можете комбинировать JSON.stringify() с форматированием HTML для создания читаемого вывода.

javascript

function displayJsonInHtml(jsonData) {
  const prettyJson = JSON.stringify(jsonData, null, 2);
  const html = `<pre><code>${escapeHtml(prettyJson)}</code></pre>`;
  
  document.getElementById('json-output').innerHTML = html;
}

function escapeHtml(text) {
  const map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  return text.replace(/[&<>"']/g, m => map[m]);
}

Для лучшей визуальной презентации вы можете добавить стили CSS:

css

.json-container {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 1rem;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  overflow-x: auto;
}

.json-container pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

Расширенные пакеты NPM

Для более сложного форматирования JSON и подсветки синтаксиса доступны несколько пакетов NPM:

pretty-print-json

Комплексный пакет, который предоставляет как консольный, так и HTML вывод с настраиваемыми опциями:

bash

npm install pretty-print-json

javascript

import prettyPrintJson from 'pretty-print-json';

// Преобразование в HTML с подсветкой синтаксиса
const html = prettyPrintJson.toHtml(data, {
  indent: 2,
  lineNumbers: true,
  linkUrls: true,
  quoteKeys: true,
  trailingCommas: false
});

json-colorizer

Простой консольный подсветщик синтаксиса:

bash

npm install json-colorizer

javascript

import jsonColorizer from 'json-colorizer';

const coloredJson = jsonColorizer(data, {
  colors: {
    key: 'yellow',
    string: 'green',
    number: 'cyan',
    boolean: 'red',
    null: 'magenta'
  }
});

Как описано на npmjs.com, этот пакет позволяет настраивать вывод с опциями для отступов, номеров строк, URL-ссылок и многого другого.

Пользовательская подсветка синтаксиса

Для полного контроля над представлением JSON вы можете реализовать пользовательскую подсветку синтаксиса с использованием CSS-классов:

javascript

function syntaxHighlight(json) {
  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
    let cls = 'number';
    if (/^"/.test(match)) {
      if (/:$/.test(match)) {
        cls = 'key';
      } else {
        cls = 'string';
      }
    } else if (/true|false/.test(match)) {
      cls = 'boolean';
    } else if (/null/.test(match)) {
      cls = 'null';
    }
    return '<span class="' + cls + '">' + match + '</span>';
  });
}

Затем примените стили CSS:

css

.json-key { color: #ff6b6b; font-weight: bold; }
.json-string { color: #51cf66; }
.json-number { color: #74c0fc; }
.json-boolean { color: #ffd43b; font-weight: bold; }
.json-null { color: #cc5de8; font-weight: bold; }

Практические примеры

Вот полный пример, демонстрирующий различные подходы к форматированию JSON:

Пример 1: Базовый вывод в консоль

javascript

const userData = {
  id: 12345,
  name: "Alice Johnson",
  email: "alice@example.com",
  isActive: true,
  preferences: {
    theme: "dark",
    notifications: ["email", "push"],
    settings: {
      autoSave: true,
      maxFileSize: 1024
    }
  }
};

// Метод 1: JSON.stringify с 2 пробелами
console.log("Метод 1 - JSON.stringify с 2 пробелами:");
console.log(JSON.stringify(userData, null, 2));

// Метод 2: JSON.stringify с табуляцией
console.log("\nМетод 2 - JSON.stringify с табуляцией:");
console.log(JSON.stringify(userData, null, '\t'));

// Метод 3: console.dir с цветами
console.log("\nМетод 3 - console.dir с цветами:");
console.dir(userData, { depth: null, colors: true });

Пример 2: Отображение в HTML с подсветкой синтаксиса

html

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .json-viewer {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .json-key { color: #d63384; font-weight: bold; }
        .json-string { color: #198754; }
        .json-number { color: #0d6efd; }
        .json-boolean { color: #fd7e14; }
        .json-null { color: #6f42c1; }
    </style>
</head>
<body>
    <h2>Форматирование JSON с подсветкой синтаксиса</h2>
    <div id="jsonOutput" class="json-viewer"></div>

    <script>
        const jsonData = {
            "api": "users",
            "version": "1.0.0",
            "timestamp": new Date().toISOString(),
            "data": [
                { "id": 1, "name": "User One", "active": true },
                { "id": 2, "name": "User Two", "active": false }
            ]
        };

        function prettyPrintJson(data) {
            const jsonString = JSON.stringify(data, null, 2);
            const highlighted = jsonString.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
                let className = '';
                if (/^"/.test(match)) {
                    className = /:$/.test(match) ? 'json-key' : 'json-string';
                } else if (/true|false/.test(match)) {
                    className = 'json-boolean';
                } else if (/null/.test(match)) {
                    className = 'json-null';
                } else {
                    className = 'json-number';
                }
                return `<span class="${className}">${match}</span>`;
            });
            return highlighted;
        }

        document.getElementById('jsonOutput').innerHTML = prettyPrintJson(jsonData);
    </script>
</body>
</html>

Источники

Заключение

Форматирование JSON в JavaScript необходимо для удобочитаемости во время разработки, отладки и представления данных. Родной метод JSON.stringify() с параметром space предоставляет простейшее решение для базового форматирования, в то время как методы консоли, такие как console.dir(), предлагают улучшенный визуальный вывод в терминальных средах. Для веб-приложений сочетание форматирования JSON со стилями CSS или использование специализированных пакетов npm, таких как pretty-print-json, обеспечивает наиболее комплексное решение с подсветкой синтаксиса и настраиваемым стилем. Выберите подход, который лучше всего соответствует вашим конкретным потребностям, в зависимости от среды (консоль, браузер или Node.js) и требуемого уровня визуального улучшения.

Какие лучшие npm-пакеты для красивого вывода JSON с синтаксической подсветкой?Как добавить пользовательские цвета и стили к выводу JSON в веб-приложениях?В чем разница между JSON.stringify() и console.dir() для красивого вывода?Как красиво форматировать JSON с определенными уровнями отступов в JavaScript?Могу ли я красиво форматировать JSON прямо в HTML без использования внешних библиотек?Какие соображения по производительности при красивом выводе больших JSON объектов?

Спросить у NeuroAgent