JavaScript метод JSON.parse()

Определение и применение

JavaScript метод .parse() объекта JSON является статическим методом, предназначенным для анализа (парсинга) строк в формате JSON, при необходимости преобразует и возвращает значения, полученные в ходе анализа.

В качестве возвращаемого значения вы можете получить объект, массив или элементарное значение, полученное в результате анализа переданной строки в формате JSON.

Для того, чтобы преобразовать элементарные значения, объекты, или массивы в строку в формате JSON вы можете воспользоваться статическим методом JSON.stringify() (сериализует объект, массив или элементарное значение).

JSON требует двойных кавычек для строк и ключей. Комментарии, завершающие запятые и undefined недопустимы. Числа преобразуются в Number и могут потерять точность ещё до вызова reviver (необязательной функции преобразования разобранных значений); большие целые безопаснее передавать строками либо восстанавливать из context.source (свойства третьего аргумента функции reviver, содержащего исходный JSON-текст текущего примитивного значения).

Поддержка браузерами

Спецификация: ecma262

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьjavascript.builtins.JSON.parse
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`parse`	✓3	✓12	✓3.5	✓10.5	✓4	✓18	✓4	✓11	✓4	✓1.0	✓4.4	✓4
Reviver has context parameter	✓114	✓114	✓135	✓100	✓18.4	✓114	✓135	✓76	✓18.4	✓23.0	✓114	✓18.4

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис:

JavaScript

JSON.parse(text);
JSON.parse(text, reviver);

Спецификация

ECMAScript — JSON.parse(). Метод стандартизован в ECMAScript 5.

Значения параметров

Справочные сведения JSON.parse()
Параметр	Описание
`text`	Анализируемая строка в формате JSON. Обязательный параметр.
`reviver`	Функция, предназначенная для преобразования значения, полученного в ходе анализа перед его возвращением из метода. Необязательный параметр. `reviver` вызывается сначала для вложенных значений, затем для содержащих их объектов и массивов. Последний вызов обрабатывает корневое значение с ключом пустой строкой. Аргументы — ключ (имя свойства или индекс массива в виде строки) и текущее значение. Для примитивов современные реализации дополнительно передают `context` с полем `source` — исходным JSON-текстом значения. Для объектов и массивов `source` отсутствует. Поддержка `context` новее поддержки самого parse(). Возвращённое значение заменяет текущее. Возврат `undefined` удаляет свойство; в массиве остаётся пустая позиция без изменения длины. Если вернуть `undefined` для корня, весь JSON.parse() вернёт `undefined`. У обычной функции `this` указывает на объект, содержащий свойство; для корня создаётся объект-обёртка с ключом пустой строкой. Стрелочная функция не получает этот `this`.

Исключения

Справочные сведения JSON.parse()
Тип исключения	Описание
`SyntaxError`	Возникает в том случае, если разбираемая строка содержит не допустимый (не валидный) JSON.

Примеры, попробуйте сами

Базовый анализ строк в виде JSON

В следующем примере мы с Вами рассмотрим как с помощью статического метода JSON.parse() объекта JSON произвести анализ строк в формате JSON и вернуть значения, полученные в ходе анализа.

Из JSON-строки в значение JavaScript

Измените исходные значения или аргументы метода и нажмите ▶. Сравните результат в консоли.

index.html

HTML

<p>Результат выполнения выводится в консоль.</p>

main.js

JavaScript

// инициализируем три переменные, содержащие строки в формате JSON
const jsonString = '{"a":true, "b":10, "c": ["c1", "c2", "c3"], "d":{"d1": 1, "d2": 2, "d3": 3}}',
    jsonString2 = '["a", "b", {"c": false}]',
    jsonString3 = '"test"'

// анализируем переданные строки и инициализируем переменные, полученным значением
const obj = JSON.parse(jsonString),
    obj2 = JSON.parse(jsonString2),
    obj3 = JSON.parse(jsonString3)

// выводим в консоль значения переменных
console.log(obj)
// {a: true, b: 10, c: ["c1", "c2", "c3"], d: {d1: 1, d2: 2, d3: 3}}

console.log(obj2)
// ["a", "b", {c: false}]

console.log(obj3)
// "test"

В этом примере мы инициализируем три переменные, которые содержат строки в формате JSON. С помощью метода JSON.parse() мы анализируем переданные строки и инициализируем переменные, полученным значением. Для демонстрации работы метода JSON.parse() выводим полученные значения в консоль.

Использование функции для преобразования JSON

В этом примере мы рассмотрим использование второго аргумента метода JSON.parse() - функции, которая позволяет преобразовать значение, полученное в ходе анализа перед его возвращением из метода:

Как reviver изменяет и удаляет значения

Измените исходные значения или аргументы метода и нажмите ▶. Сравните результат в консоли.

index.html

HTML

<p>Результат выполнения выводится в консоль.</p>

main.js

JavaScript

// инициализируем переменную, содержащую строку в формате JSON
const jsonString = '{"a": 1,"b": false,"c": "3"}'

// преобразуем значение, полученное в ходе анализа таким образом, что оставляем только те свойства значения которых не являются числами
const obj = JSON.parse(jsonString, (key, val) => (typeof val !== 'number' ? val : undefined))
console.log(obj)
// {b: false, c: "3"}

// преобразуем значение, полученное в ходе анализа таким образом, что оставляем только те свойства значения которых являются числами
const obj2 = JSON.parse(jsonString, (key, val) => (typeof val === 'number' || key === '' ? val : undefined))
console.log(obj2)
// {a: 1}

// преобразуем значение, полученное в ходе анализа таким образом, что изменяем все числовые значения на 777
const obj3 = JSON.parse(jsonString, (key, val) => (typeof val === 'number' ? (val = 777) : val))
console.log(obj3)
// {a: 777, b: false, c: "3"}

// преобразуем значение, полученное в ходе анализа таким образом, что изменяем значение свойства "b" на "deleted"
const obj4 = JSON.parse(jsonString, (key, val) => (key === 'b' ? (val = 'deleted') : val))
console.log(obj4)
// {a: 1, b: "deleted", c: "3"}

// Вложенные значения обрабатываются раньше контейнеров и корня.
JSON.parse('{"items":[1]}', (key, value) => {
    console.log(key, value)
    return value
})
// Возврат undefined для корня удаляет весь результат.
console.log(JSON.parse('{"a":1}', () => undefined))

// source сохраняет точную запись числа, даже если Number уже округлён.
JSON.parse('{"large":9007199254740993}', (key, value, context) => {
    if (key === 'large') console.log(value, context?.source ?? 'context.source не поддерживается')
    return value
})
// Удаление элемента не уменьшает длину массива.
const sparse = JSON.parse('[1,2]', (key, value) => (key === '0' ? undefined : value))
console.log(sparse.length, 0 in sparse)
// Невалидный JSON вызывает SyntaxError.
try {
    JSON.parse('{"a":1,}')
} catch (error) {
    console.log(error.name)
}

В этом примере с использованием функции метода JSON.parse() (второй аргумент), предназначенной для преобразования значения, полученного в ходе анализа перед его возвращением из метода мы:

В первом случае оставляем только те свойства значения которых не являются числами.
Во втором случае оставляем только те свойства значения которых являются числами. Обратите внимание, что последний вызов функции осуществляется с пустым ключом, по этой причине мы добавляем дополнительную проверку. В описании аргумента есть пояснение этому.
В третьем случае изменяем все числовые значения на 777.
В четвертом случае изменяем значение свойства "b" на "deleted".

Глубокое копирование объекта

Глубокое копирование создаёт независимые вложенные объекты. Связка JSON.parse(JSON.stringify(obj)) подходит только для JSON-совместимых данных: она теряет undefined, функции, символы и прототипы, превращает Date в строку, а NaN и бесконечности — в null. Циклические ссылки и BigInt без специального преобразования вызывают TypeError. Для поддерживаемых типов и циклических ссылок используйте structuredClone(); функции он также не копирует.

Давайте рассмотрим как с помощью методов JSON.parse() и JSON.stringify() сделать глубокую копию нашего объекта:

Изменение оригинала не затрагивает JSON-копию

Измените исходные значения или аргументы метода и нажмите ▶. Сравните результат в консоли.

index.html

HTML

<p>Результат выполнения выводится в консоль.</p>

main.js

JavaScript

// инициализируем переменную, содержащую объект
let obj = {
    a: 1,
    b: {
        c: 2,
    },
}

// осуществляем глубокое копирование объекта и инициализируем переменную
let newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj) // переменная содержит значение { a: 1, b: { c: 2} }

obj.b.c = 200 // изменяем значение свойства объекта obj
console.log(obj) // переменная содержит значение { a: 1, b: { c: 200} }
console.log(newObj) // переменная содержит значение { a: 1, b: { c: 2} }

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