Основы JSON.parse и JSON.stringify
Преобразуйте объекты в строки JSON и обратно; кратко используйте replacer и reviver; безопасно обрабатывайте некорректные входные данные
«Основы JSON.parse и JSON.stringify» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.
Зачем нужен JSON
Цель: безопасно сериализовать и разбирать данные.
- JSON.stringify → строка
- JSON.parse ← строка
- заменяющая функция/восстанавливающая функция (знакомство)
- Основные советы по безопасности
stringify()
Используйте JSON.stringify(value), чтобы получить строку JSON. Для удобства чтения передайте числовой параметр space (например, 2).
// Turn a value into a JSON string
const user = { name: "Ayla", score: 12, active: true };
const json = JSON.stringify(user);
console.log("json:", json);
// Optional: pretty-print with spaces (2)
const pretty = JSON.stringify(user, null, 2);
console.log("pretty:", pretty);
parse()
JSON.parse(текст) возвращает значение. Входные данные должны быть корректной строкой JSON.
// Parse a JSON string back to a value
const raw = "{\"name\":\"Ayla\",\"score\":12,\"active\":true}";
const value = JSON.parse(raw);
console.log("name:", value.name, "score:", value.score);
Заменяющая функция (stringify)
Заменяющая функция(key, value) может исключать или изменять поля при сериализации (например, скрывать пароли).
// Replacer: filter or transform keys during stringify
const account = { id: 7, password: "secret", role: "user" };
// Hide sensitive fields
function replacer(key, value) {
if (key === "password") return undefined; // drop it
return value;
}
const safeJson = JSON.stringify(account, replacer, 2);
console.log("safeJson:", safeJson);
Восстанавливающая функция (parse)
Восстанавливающая функция(key, value) может преобразовывать значения во время разбора (например, строки → даты).
// Reviver: convert specific strings back into richer types
const orderJson = "{\"when\":\"2024-06-01T10:00:00Z\",\"total\":25}";
function reviver(key, value) {
if (key === "when" && typeof value === "string") {
return new Date(value); // restore Date
}
return value;
}
const order = JSON.parse(orderJson, reviver);
console.log("is Date?", order.when instanceof Date);
console.log("total:", order.total);
Безопасность и ограничения
Советы:
- Оберните JSON.parse в try/catch при работе с ненадёжными входными данными.
- Используйте заменяющую функцию, чтобы удалить конфиденциальные поля перед журналированием или передачей данных.
- JSON не сохраняет функции и информацию о прототипах; он сериализует только данные.
Тест на stringify и parse
Быстрая проверка: сериализация значения.
Итоги
Итоги: Преобразовывайте значения с помощью JSON.stringify/JSON.parse; используйте заменяющую функцию для фильтрации полей и восстанавливающую функцию для восстановления типов, например дат; для безопасности добавьте try/catch.
Часто задаваемые вопросы
Урок «Основы JSON.parse и JSON.stringify» бесплатный?
Да — полный текст урока «Основы JSON.parse и JSON.stringify» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Основы JSON.parse и JSON.stringify»?
Преобразуйте объекты в строки JSON и обратно; кратко используйте replacer и reviver; безопасно обрабатывайте некорректные входные данные Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Основы JSON.parse и JSON.stringify»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы JSON.parse и JSON.stringify
- Структурированное клонирование и URLSearchParams
- Стратегии безопасного разбора JSON