JSON.parse() - преобразование JSON-строки в значение JavaScript

JSON.parse() превращает JSON-строку в обычное значение JavaScript.

Чаще всего его используют, когда нужно:

получить объект из строки
прочитать данные из localStorage
обработать JSON, пришедший с сервера

Синтаксис

Базовая запись выглядит так:

JSON.parse(text, reviver)

Где:

text - строка в формате JSON
reviver - необязательная функция для преобразования значений после разбора

Что возвращает JSON.parse()

Метод возвращает уже не строку, а обычное значение JavaScript.

const json = '{"name":"Анна","age":25}';
const user = JSON.parse(json);

console.log(user);
// { name: "Анна", age: 25 }

console.log(typeof user); // "object"

Это главное, что важно запомнить: JSON.parse() превращает JSON-строку обратно в данные.

Пример с объектом

Самый частый сценарий - получить объект из JSON-строки.

const json = '{"title":"Ноутбук","price":120000,"inStock":true}';

const product = JSON.parse(json);

console.log(product.title); // "Ноутбук"
console.log(product.price); // 120000

Пример с массивом

Массивы тоже спокойно разбираются.

const json = "[1,2,3]";

const numbers = JSON.parse(json);

console.log(numbers); // [1, 2, 3]
console.log(Array.isArray(numbers)); // true

JSON.parse() умеет возвращать не только объект

Если JSON-строка содержит примитив, результатом тоже будет примитив.

console.log(JSON.parse('"JavaScript"')); // "JavaScript"
console.log(JSON.parse("123")); // 123
console.log(JSON.parse("true")); // true
console.log(JSON.parse("null")); // null

Поэтому JSON.parse() может вернуть:

объект
массив
строку
число
true или false
null

JSON.parse() и localStorage

Очень частый практический сценарий - достать строку из localStorage и превратить её обратно в объект.

const settingsJson = localStorage.getItem("settings");

if (settingsJson) {
  const settings = JSON.parse(settingsJson);
  console.log(settings.theme);
}

Именно так JSON.parse() обычно работает в паре с JSON.stringify().

Второй аргумент reviver

reviver позволяет изменить значения во время разбора JSON.

Например, можно превратить строку даты в объект Date.

const json = '{"date":"2025-01-15T10:00:00.000Z"}';

const result = JSON.parse(json, (key, value) => {
  if (key === "date") {
    return new Date(value);
  }

  return value;
});

console.log(result.date instanceof Date); // true

Это удобно, когда обычного разбора недостаточно и некоторые значения нужно дообработать.

reviver можно использовать для удаления свойств

Если reviver возвращает undefined, свойство удаляется из результата.

const json = '{"name":"Анна","password":"123456"}';

const user = JSON.parse(json, (key, value) => {
  if (key === "password") {
    return undefined;
  }

  return value;
});

console.log(user);
// { name: "Анна" }

JSON.parse() работает только с валидным JSON

Это очень важный момент.

JSON похож на JavaScript-объекты, но это не одно и то же.

Например, вот такой JSON валидный:

JSON.parse('{"name":"Анна","age":25}');

А вот такой уже невалидный:

// JSON.parse('{name: "Анна"}'); // SyntaxError

Почему ошибка:

ключ name не взят в двойные кавычки
строка "Анна" записана как JavaScript-литерал, а не как строгий JSON

Что в JSON нельзя

В JSON нельзя использовать:

комментарии
функции
undefined
одинарные кавычки для строк
лишние запятые в конце

Примеры невалидного JSON:

// JSON.parse("{'name':'Анна'}"); // SyntaxError
// JSON.parse('{"name":"Анна",}'); // SyntaxError
// JSON.parse('{"run": function(){}}'); // SyntaxError

То есть JSON.parse() разбирает именно JSON, а не произвольный JavaScript-код.

Ошибки разбора лучше обрабатывать через try…catch

Если строка окажется невалидной, JSON.parse() выбросит SyntaxError.

const text = '{name: "Анна"}';

try {
  const data = JSON.parse(text);
  console.log(data);
} catch (error) {
  console.log("Не удалось разобрать JSON");
}

Это особенно важно, если строка приходит извне и вы не уверены, что она всегда корректна.

JSON.parse() и объект JavaScript - не одно и то же

Иногда пытаются передать в JSON.parse() уже готовый объект.

const user = { name: "Анна" };

// JSON.parse(user); // ошибка

JSON.parse() ждёт именно строку.

Если у вас уже есть объект, разбирать нечего.

Правильная логика такая:

JSON.stringify() превращает объект в строку
JSON.parse() превращает строку обратно в объект

JSON.parse() и Date

После обычного JSON.parse() дата остаётся строкой.

const json = '{"date":"2025-01-15T10:00:00.000Z"}';
const result = JSON.parse(json);

console.log(result.date); // "2025-01-15T10:00:00.000Z"
console.log(typeof result.date); // "string"

Если нужен именно объект Date, используйте reviver.

JSON.parse() и пара с JSON.stringify()

Эти методы обычно используют вместе.

const user = {
  name: "Анна",
  age: 25,
};

const json = JSON.stringify(user);
const parsedUser = JSON.parse(json);

console.log(parsedUser);
// { name: "Анна", age: 25 }

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

Когда это полезно

JSON.parse() особенно удобен, когда:

нужно прочитать JSON из localStorage
данные приходят с сервера в виде строки
нужно восстановить объект после JSON.stringify()
хочется превратить текстовый JSON в обычные данные JavaScript

Пример:

const profileJson = '{"name":"Анна","skills":["HTML","CSS","JavaScript"]}';
const profile = JSON.parse(profileJson);

console.log(profile.skills[2]); // "JavaScript"

Частые ошибки

Передавать в JSON.parse() не строку, а объект

const user = { name: "Анна" };

// JSON.parse(user); // ошибка

Метод ждёт JSON-строку, а не уже готовый объект.

Путать JSON и объектный литерал JavaScript

// JSON.parse('{name: "Анна"}'); // SyntaxError

В JSON ключи и строки должны быть записаны строго по правилам JSON.

Использовать одинарные кавычки внутри JSON

// JSON.parse("{'name':'Анна'}"); // SyntaxError

JSON требует двойные кавычки.

Забывать обрабатывать ошибку парсинга

Если строка пришла извне, безопаснее оборачивать JSON.parse() в try...catch.

Ожидать, что строка даты автоматически станет Date

После обычного разбора дата остаётся строкой.

Быстрая памятка

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

Коротко

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