EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語
404 Not Found

404 Not Found

nginx

JSON في JavaScript

JSON (صيغة ترميز كائنات JavaScript) هو صيغة خفيفة لتبادل البيانات. فكّر فيه كصندوق شحن معياري — بغض النظر عمّا تضعه في الداخل، التغليف يتبع مواصفات عالمية بحيث يعرف المستلم بالضبط كيفية فتحه. الاتصال الأمامي/الخلفي، ملفات التكوين، التخزين المحلي — JSON في كل مكان.

قواعد صيغة JSON

JSON يشبه كثيراً كائن JS الحرفي، لكن القواعد أكثر صرامة:

القاعدة الوصف
المفاتيح يجب أن تستخدم مزدوجة الاقتباس "name" ✅ name ❌ 'name' ❌
قيم السلاسل يجب أن تستخدم مزدوجة الاقتباس "hello" ✅ 'hello' ❌
بدون فواصل متدلية {"a":1,} ❌
أنواع قيم محدودة سلسلة، رقم، منطقي، null، كائن، مصفوفة
غير مسموح undefined، دوال، تعليقات
JSON 
{
  "name": "أليس",
  "age": 25,
  "skills": ["HTML", "CSS", "JS"],
  "address": {
    "city": "نيويورك",
    "zip": "10001"
  },
  "active": true,
  "spouse": null
}
⚠️ بدون اقتباسات مفردة في JSON! الخطأ الأكثر شيوعاً للمبتدئين هو كتابة 'key' أو 'value' — هذا صالح في JS لكن غير قانوني في JSON.

JSON.stringify()

JSON.stringify() يconvert قيمة JS إلى سلسلة JSON — تسلسل.

HTML 
<script>
JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)
</script>
المعلمة الوصف
value القيمة المراد تسلسلها
replacer تصفية أو تحويل — دالة أو مصفوفة
space المسافة البادئة — رقم أو سلسلة، للطباعة الجميلة

مثال: التسلسل والتنسيق

HTML 
<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc; direction: ltr; text-align: left;"></div>

<script>
const student = {
  name: 'بوب',
  age: 20,
  scores: [95, 88, 92],
  active: true,
  grade: undefined,
  birthday: new Date()
};

const output = document.getElementById('output');

const plain = JSON.stringify(student);
output.textContent = 'إخراج مدمج:\n' + plain + '\n\n';

const pretty = JSON.stringify(student, null, 2);
output.textContent += 'إخراج جميل:\n' + pretty + '\n\n';

const filtered = JSON.stringify(student, ['name', 'scores'], 2);
output.textContent += 'الاسم والدرجات فقط:\n' + filtered;
</script>
▶ جرّب الكود
💡 ملاحظة: undefined، الدوال، و الرموز تتجاهل أثناء التسلسل (الخصائص تختفي من الكائنات، تصبح null في المصفوفات). كائنات Date تconvert إلى سلاسل ISO.

JSON.parse()

JSON.parse() يconvert سلسلة JSON إلى قيمة JS — فك التسلسل.

HTML 
<script>
JSON.parse(text)
JSON.parse(text, reviver)
</script>
المعلمة الوصف
text سلسلة JSON
reviver دالة تحويل تطبق على كل زوج مفتاح-قيمة

مثال: فك التسلسل

HTML 
<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc; direction: ltr; text-align: left;"></div>

<script>
const output = document.getElementById('output');

const jsonStr = '{"name":"تشارلي","age":30,"hobbies":["القراءة","البرمجة"]}';

const obj = JSON.parse(jsonStr);

output.textContent = 'نتيجة التحليل:\n';
output.textContent += 'الاسم: ' + obj.name + '\n';
output.textContent += 'العمر: ' + obj.age + '\n';
output.textContent += 'الهوايات: ' + obj.hobbies.join('، ') + '\n\n';

const arr = JSON.parse('[1, 2, 3, 4, 5]');
output.textContent += 'مصفوفة محللة: ' + arr + '\n';
output.textContent += 'مجموع المصفوفة: ' + arr.reduce(function(a, b) { return a + b; }, 0);
</script>
▶ جرّب الكود

JSON مقابل كائن JS

المقارنة JSON كائن JS
الطبيعة سلسلة (نص) هيكل بيانات في الذاكرة
اقتباس المفاتيح مزدوجة الاقتباس مطلوبة قابلة للحذف (لمعرّفات صالحة)
أنواع القيمة محدودة (6 أنواع) أي نوع
فواصل متدلية غير مسموح بها مسموح بها
التعليقات غير مسموح بها مدعومة (عبر الأدوات)
💡 طريقة سهلة للتذكر: JSON هو "نسخة سلسلة لكائنات JS مع تحقق صارم." ليس كائناً — هو نص. تحتاج parse لتحويله إلى كائن يمكنك العمل به.

مثال: أخطاء JSON الشائعة

<div id="output" style="white-space: pre; font-family: monospace; padding: 10px; border: 1px solid #ccc; direction: ltr; text-align: left;"></div>

<script>
const output = document.getElementById('output');

function tryParse(str, label) {
  try {
    JSON.parse(str);
    output.textContent += label + ': ✅ نجح\n';
  } catch (e) {
    output.textContent += label + ': ❌ ' + e.message + '\n';
  }
}

tryParse("{'name':'توم'}", 'مفتاح مفرد الاقتباس');
tryParse('{"name":"توم",}', 'فاصلة متدلية');
tryParse('{"name":undefined}', 'قيمة undefined');
tryParse('{"name":"توم"}', 'JSON صالح');
tryParse('{"a":1,"b":2}', 'JSON صالح (بدون مسافات)');
</script>
▶ جرّب الكود
💡 الأخطاء الثلاثة الأكثر شيوعاً في JSON: الاقتباسات المفردة، الفواصل المتدلية، و undefined. عند تصحيح مشكلات JSON، الصقه في وحدة تحكم المتصفح مع JSON.parse() — رسالة الخطأ ستحدد الموقع بالضبط.

📖 ملخص

  1. JSON هو صيغة بيانات مبنية على السلاسل — المفاتيح يجب أن تكون مزدوجة الاقتباس، بدون فواصل متدلية، أنواع قيم محدودة
  2. JSON.stringify() يسلسل، JSON.parse() يفك التسلسل — عمليات معكوسة
  3. undefined، الدوال، و الرموز تتجاهل أو تصبح null أثناء التسلسل
  4. معلمة space في JSON.stringify تجعل الإخراج مقروءاً؛ معلمة replacer تصفّي الحقول
  5. تحليل JSON غير صالح يطرح استثناء — لفه دائماً في try/catch

❓ أسئلة شائعة

س لماذا JSON.stringify(NaN) يُرجع null؟
ج مواصفة JSON ليس لديها NaN، Infinity، أو -Infinity — جميعها تصبح null أثناء التسلسل. إذا كنت بحاجة للحفاظ على هذه القيم، استخدم دالة replacer مخصصة.
س هل يمكن لـ JSON.parse تحليل حرفيات كائن JS؟
ج لا. JSON.parse('{}') يعمل، لكن JSON.parse('{a:1}') يطرح خطأ — المفتاح يفتقر إلى الاقتباس المزدوج. صيغة JSON أكثر صرامة من حرفيات كائن JS.
س هل يمكنك كتابة تعليقات في JSON؟
ج JSON القياسي لا يدعم التعليقات. إذا لزم الأمر، استخدم حقلاً مثل "_comment": "وصف" كحل بديل، على الرغم من أن هذا ليس اتفاقية رسمية.

📝 تمارين

  1. أساسي: أنشئ مصفوفة من 3 كائنات طلاب ونسّق الإخراج بـ JSON.stringify (مسافة بادئة من مساحتين).
  2. متوسط: اكتب دالة safeParse(str) تلتف JSON.parse في try/catch، تُرجع النتيجة عند النجاح أو null مع رسالة خطأ عند الفشل.
  3. تحدي: ابنِ "دفتر ملاحظات محلي" — استخدم prompt للإدخال، احفظ في localStorage بـ JSON.stringify، وحمّل/اعرضه عند تحميل الصفحة بـ JSON.parse.
100%