Что такое JSON.parse() простыми словами: разбираем с примерами

mr. Cooper • 2 часа назад • Веб-разработка
#javascript #вебразработка #JSON #JSONParse #FrontendРазработка #ОшибкиJS
Что такое JSON.parse() простыми словами: разбираем с примерами

Если вы только начали изучать JavaScript и наткнулись на JSON.parse(), скорее всего, вы уже успели получить пару непонятных ошибок вроде Unexpected token in JSON. Это нормально - с этим методом сталкивается каждый разработчик. В статье разберём, что такое JSON.parse(), зачем он нужен, как им пользоваться правильно и почему он иногда «ломается» в самый неподходящий момент.

Статья будет полезна новичкам, которые делают первые шаги в JS, и разработчикам среднего уровня, которым нужно освежить детали - например, разницу между JSON.parse() и JSON.stringify(), или как обрабатывать ошибки парсинга.

Что такое JSON.parse()

JSON.parse() - это встроенный метод JavaScript, который превращает строку в формате JSON в обычный объект или массив JavaScript, с которым можно работать в коде.

Смотрите, что под этим имеется в виду:

const jsonString = '{"name": "Алексей", "age": 28}';
const obj = JSON.parse(jsonString);

console.log(obj.name); // "Алексей"
console.log(obj.age);  // 28

До вызова JSON.parse() у нас была просто строка текста. После - полноценный JS-объект, у которого можно обращаться к свойствам через точку или квадратные скобки.

Это особенно важно, потому что данные между сервером и браузером обычно передаются именно в виде текста (строки), а не в виде «живых» объектов. JSON (JavaScript Object Notation) - это текстовый формат для обмена данными, и JSON.parse() - это «переводчик», который превращает текст обратно в структуру, понятную JavaScript.

Почему возникает потребность в JSON.parse()

Когда вы делаете запрос к API, сервер чаще всего отвечает JSON-строкой. Это нужно, потому что:

  • HTTP-протокол передаёт данные как текст - нельзя «по проводам» отправить готовый JS-объект, только последовательность символов.

  • JSON - универсальный формат, который понимают практически все языки программирования: Python, PHP, Java, Go и так далее. Это делает его удобным для общения между разными системами.

  • localStorage хранит только строки - если нужно сохранить объект в браузере, его сначала превращают в строку через JSON.stringify(), а потом, чтобы снова с ним работать, обратно через JSON.parse().

Получается циклическая связка: объект → строка (JSON.stringify) → передача/хранение → строка → объект (JSON.parse). Без второй части этой цепочки данные так и останутся бесполезным набором символов.

Частые ошибки и проблемы

На практике с JSON.parse() новички спотыкаются примерно на одних и тех же местах.

1. Невалидный JSON. Самая частая причина ошибки SyntaxError: Unexpected token. JSON - строгий формат: ключи обязательно в двойных кавычках, никаких висячих запятых, никаких комментариев.

JSON.parse("{name: 'Алексей'}"); // ❌ Ошибка - ключ без кавычек, кавычки одинарные
JSON.parse('{"name": "Алексей",}'); // ❌ Ошибка - лишняя запятая в конце

2. Попытка распарсить уже готовый объект. Если данные уже пришли в виде объекта (например, при использовании fetch().then(res => res.json())), повторный JSON.parse() вызовет ошибку, потому что метод ожидает строку, а не объект.

3. Пустая строка или undefined. Если сервер вернул пустой ответ, JSON.parse("") выбросит исключение, а не вернёт null или undefined.

4. Отсутствие обработки ошибок. Без try/catch одна некорректная строка может «уронить» весь скрипт.

Как исправить, пошаговое решение

Шаг 1. Всегда оборачивайте JSON.parse() в try/catch

function safeParse(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error('Ошибка парсинга JSON:', error.message);
    return null;
  }
}

const result = safeParse('{"status": "ok"}');
console.log(result); // { status: "ok" }

Это базовая защита, которая не даст приложению упасть из-за «кривого» ответа сервера.

Шаг 2. Проверяйте данные перед парсингом

  if (!jsonString || typeof jsonString !== 'string') {
    return null;
  }
  try {
    return JSON.parse(jsonString);
  } catch {
    return null;
  }
}

Шаг 3. Используйте reviver-функцию для трансформации данных «на лету»

Второй необязательный аргумент JSON.parse() - функция, которая позволяет обработать каждое значение перед возвратом результата. Это удобно, например, для преобразования дат.

const data = JSON.parse('{"created": "2026-06-20T10:00:00Z"}', (key, value) => {
  if (key === 'created') {
    return new Date(value);
  }
  return value;
});

console.log(data.created instanceof Date); // true

Шаг 4. Проверяйте структуру результата

Даже валидный JSON может не содержать тех полей, которые вы ожидаете. После парсинга стоит проверять наличие нужных ключей, особенно если данные приходят от внешнего API.

Примеры использования на практике

Парсинг ответа от API:

fetch('https://api.example.com/users')
  .then(response => response.text())
  .then(text => {
    const users = JSON.parse(text);
    console.log(users);
  })
  .catch(error => console.error('Ошибка:', error));

Кстати, метод .json() у объекта Response уже делает JSON.parse() под капотом, поэтому в большинстве случаев писать его вручную не нужно:

fetch('https://api.example.com/users')
  .then(response => response.json()) // парсинг встроен
  .then(users => console.log(users));

Чтение данных из localStorage:

localStorage.setItem('cart', JSON.stringify({ items: 3, total: 1500 }));

const cartString = localStorage.getItem('cart');
const cart = cartString ? JSON.parse(cartString) : null;

console.log(cart); // { items: 3, total: 1500 }

Парсинг массива:

const jsonArray = '[1, 2, 3, "четыре"]';
const arr = JSON.parse(jsonArray);
console.log(arr[3]); // "четыре"

Часто задаваемые вопросы (FAQ)

Чем JSON.parse() отличается от JSON.stringify()? JSON.parse() превращает строку в объект/массив JavaScript. JSON.stringify() делает обратное - превращает объект в строку. Это парные методы, которые работают вместе.

Можно ли распарсить уже существующий объект? Нет. Если передать в JSON.parse() объект, а не строку, он автоматически приведётся к строке через toString(), и в большинстве случаев это вызовет ошибку или некорректный результат. Парсить нужно именно строки.

Почему JSON.parse() выдаёт ошибку Unexpected token? Чаще всего это значит, что строка не является валидным JSON: одинарные кавычки вместо двойных, незакавыченные ключи, лишняя запятая в конце объекта или массива, либо комментарии внутри строки (JSON их не поддерживает).

Как безопасно распарсить JSON без падения скрипта? Используйте try/catch - это единственный надёжный способ перехватить ошибку парсинга и не дать ей остановить выполнение всего приложения.

Что вернёт JSON.parse(), если строка пустая? Ничего хорошего - будет выброшено исключение SyntaxError. Пустую строку нужно проверять заранее, до вызова метода.

Можно ли распарсить JSON с датами? Напрямую - нет, JSON не имеет отдельного типа для дат, поэтому даты в JSON-строках хранятся как обычный текст (ISO-строка). Чтобы получить объект Date, нужно использовать reviver-функцию вторым аргументом JSON.parse() или конвертировать вручную после парсинга.

Зачем нужен второй аргумент в JSON.parse()? Это reviver-функция, которая позволяет модифицировать значения по мере их обработки - например, превращать строки в даты, фильтровать поля или приводить типы.

Безопасен ли JSON.parse() по сравнению с eval()? Да, в отличие от устаревшего и небезопасного способа парсинга через eval(), JSON.parse() не выполняет произвольный код - он только разбирает данные по строгим правилам JSON-формата, что делает его безопасным для работы с данными из внешних источников.

Полезные советы и лучшие практики

  • Всегда оборачивайте JSON.parse() в try/catch, если строка приходит из внешнего источника (API, localStorage, пользовательский ввод).

  • Не используйте JSON.parse() для данных, в которых не уверены на 100% - лучше явно проверить тип и содержимое.

  • Если работаете с fetch, используйте встроенный .json() вместо ручного парсинга текста.

  • Для отладки используйте JSON.stringify(data, null, 2) - он красиво форматирует объект перед выводом в консоль.

  • Не храните в localStorage и не парсите большие объёмы данных синхронно - это может подвесить интерфейс на слабых устройствах.

  • Проверяйте структуру данных после парсинга, особенно если работаете со сторонними API, формат ответа которых может меняться.

Итог

JSON.parse() - это базовый, но критически важный метод JavaScript, который превращает JSON-строку в объект или массив, с которым можно работать в коде. Он используется почти в каждом проекте: при работе с API, localStorage и обмене данными между системами. Главное правило безопасной работы - всегда оборачивать парсинг в try/catch и проверять данные перед обработкой, чтобы одна некорректная строка не «уронила» всё приложение.

Комментарии

Пока нет комментариев. Будьте первым, кто напишет.

Чтобы оставить комментарий, войдите в аккаунт.

Похожие статьи