0Pricing
JavaScript Academy · Lekcja

Podstawy JSON.parse i JSON.stringify

Konwertowanie obiektów do łańcuchów JSON i z powrotem; krótkie użycie replacer/reviver oraz bezpieczna obsługa nieprawidłowych danych wejściowych

Podstawy JSON.parse i JSON.stringify to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 3 lekcji w sumie.

Po co JSON?

Cel: bezpiecznie serializować i analizować dane.

  • JSON.stringify → ciąg znaków
  • JSON.parse ← ciąg znaków
  • replacer/reviver (wprowadzenie)
  • Podstawowe wskazówki dotyczące bezpieczeństwa
Podstawy JSON.parse i JSON.stringify — ilustracja 1

stringify()

Za pomocą JSON.stringify(value) można uzyskać ciąg znaków JSON. Aby poprawić czytelność, należy przekazać liczbę space, na przykład 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);
Podstawy JSON.parse i JSON.stringify — ilustracja 2

parse()

JSON.parse(text) zwraca wartość. Dane wejściowe muszą być prawidłowym ciągiem znaków 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);
Podstawy JSON.parse i JSON.stringify — ilustracja 3

Replacer (stringify)

Funkcja replacer(key, value) może wykluczać lub modyfikować pola podczas serializacji, na przykład ukrywać hasła.

// 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);
Podstawy JSON.parse i JSON.stringify — ilustracja 4

Reviver (parse)

Funkcja reviver(key, value) może przekształcać wartości podczas analizy, na przykład zamieniać ciągi znaków na Date.

// 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);
Podstawy JSON.parse i JSON.stringify — ilustracja 5

Bezpieczeństwo i ograniczenia

Wskazówki:

  • Wywołanie JSON.parse niezaufanych danych należy umieścić w bloku try/catch.
  • Przed rejestrowaniem lub udostępnianiem danych należy użyć replacer do usunięcia poufnych pól.
  • JSON nie zachowuje funkcji ani informacji o prototypie; serializuje wyłącznie dane.
Podstawy JSON.parse i JSON.stringify — ilustracja 6

Quiz: stringify kontra parse

Szybkie sprawdzenie: serializowanie wartości.

Podstawy JSON.parse i JSON.stringify — ilustracja 7

Podsumowanie

Podsumowanie: wartości można konwertować za pomocą JSON.stringify/JSON.parse; replacer służy do filtrowania pól, a reviver do przywracania typów takich jak Date; dla bezpieczeństwa należy dodać try/catch.

Podstawy JSON.parse i JSON.stringify — ilustracja 8

Często zadawane pytania

Czy lekcja „Podstawy JSON.parse i JSON.stringify” jest bezpłatna?

Tak — pełny tekst „Podstawy JSON.parse i JSON.stringify” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Podstawy JSON.parse i JSON.stringify”?

Konwertowanie obiektów do łańcuchów JSON i z powrotem; krótkie użycie replacer/reviver oraz bezpieczna obsługa nieprawidłowych danych wejściowych Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.

Ile czasu zajmuje lekcja „Podstawy JSON.parse i JSON.stringify”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Podstawy JSON.parse i JSON.stringify
  2. Klonowanie strukturalne i URLSearchParams
  3. Strategie bezpiecznego parsowania JSON
← Powrót do JavaScript Academy