JavaScript Academy · Lektion

Grunderna i JSON.parse och JSON.stringify

Konvertera objekt till JSON-strängar och tillbaka; använd kortfattat replacer/reviver; hantera felaktig indata säkert.

Lektion 1 av 38 steg

Grunderna i JSON.parse och JSON.stringify är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 3 lektioner.

Varför JSON?

Mål: Serialisera och parsa säkert.

JSON.stringify → string
JSON.parse ← string
replacer/reviver (en första titt)
Grundläggande säkerhetstips

stringify()

Använd JSON.stringify(value) för att få en JSON-sträng. Ange ett tal för space (t.ex. 2) för bättre läsbarhet.

// 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(text) returnerar värdet. Indata måste vara en giltig JSON-sträng.

// 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);

Grunderna i JSON.parse och JSON.stringify — illustration 3

Replacer (stringify)

En replacer(key, value) kan utesluta eller ändra fält när värdet serialiseras (t.ex. dölja lösenord).

// 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);

Grunderna i JSON.parse och JSON.stringify — illustration 4

Reviver (parse)

En reviver(key, value) kan omvandla värden vid parsning (t.ex. strängar → 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);

Grunderna i JSON.parse och JSON.stringify — illustration 5

Säkerhet och begränsningar

Tips:

Omgärda JSON.parse med try/catch för otillförlitlig indata.
Använd replacer för att ta bort känsliga fält före loggning eller delning.
JSON förlorar funktioner och prototypinformation; det serialiserar endast data.

Grunderna i JSON.parse och JSON.stringify — illustration 6

Quiz: stringify kontra parse

Snabb kontroll: Serialisera ett värde.

Grunderna i JSON.parse och JSON.stringify — illustration 7

Besvara frågan i den interaktiva lektionen

Sammanfattning

Sammanfattning: Konvertera värden med JSON.stringify/JSON.parse; använd en replacer för att filtrera fält och en reviver för att återställa typer som Date; lägg till try/catch för säkerhet.

Grunderna i JSON.parse och JSON.stringify — illustration 8

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Grunderna i JSON.parse och JSON.stringify” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Grunderna i JSON.parse och JSON.stringify”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 3 lektioner.

Vad lär jag mig i ”Grunderna i JSON.parse och JSON.stringify”?

Konvertera objekt till JSON-strängar och tillbaka; använd kortfattat replacer/reviver; hantera felaktig indata säkert. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.

Hur lång tid tar lektionen ”Grunderna i JSON.parse och JSON.stringify”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Grunderna i JSON.parse och JSON.stringify
Strukturerad kloning och URLSearchParams
Strategier för säker JSON-parsning

← Tillbaka till JavaScript Academy