0Pricing
JavaScript Academy · درس

أساسيات 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 ← سلسلة نصية
  • replacer/reviver (لمحة)
  • نصائح أساسية للسلامة
أساسيات JSON.parse وJSON.stringify — رسم توضيحي 1

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);
أساسيات JSON.parse وJSON.stringify — رسم توضيحي 2

parse()

يعيد JSON.parse(text) القيمة. ويجب أن يكون الإدخال سلسلة 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);
أساسيات JSON.parse وJSON.stringify — رسم توضيحي 3

Replacer (stringify)

يمكن لـreplacer(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);
أساسيات JSON.parse وJSON.stringify — رسم توضيحي 4

Reviver (parse)

يمكن لـreviver(key, value) تحويل القيم أثناء التحليل، مثل تحويل السلاسل النصية إلى 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);
أساسيات JSON.parse وJSON.stringify — رسم توضيحي 5

السلامة والقيود

نصائح:

  • أحاطوا JSON.parse بـ try/catch عند التعامل مع إدخال غير موثوق.
  • استخدموا replacer لإزالة الحقول الحساسة قبل التسجيل أو المشاركة.
  • يفقد JSON الدوال ومعلومات النموذج الأولي؛ فهو يجري تسلسل البيانات فقط.
أساسيات JSON.parse وJSON.stringify — رسم توضيحي 6

اختبار stringify مقابل parse

تحقق سريع: إجراء تسلسل لقيمة.

أساسيات JSON.parse وJSON.stringify — رسم توضيحي 7

مراجعة

مراجعة: حوّلوا القيم باستخدام JSON.stringify/JSON.parse؛ واستخدموا replacer لتصفية الحقول وreviver لاستعادة أنواع مثل Date؛ وأضيفوا try/catch للسلامة.

أساسيات JSON.parse وJSON.stringify — رسم توضيحي 8

الأسئلة الشائعة

هل درس «أساسيات 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 يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. أساسيات JSON.parse وJSON.stringify
  2. الاستنساخ البنيوي وURLSearchParams
  3. استراتيجيات تحليل JSON الآمن
← العودة إلى JavaScript Academy