TypeScript Academy · درس

الدمج مع nullish باستخدام ??

وفّروا قيمًا بديلة فقط لـ null وundefined، وليس لكل القيم الزائفة

الدمج مع nullish باستخدام ?? درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

معامل دمج القيم المنعدمة

يُرجع المعامل ?? قيمة الطرف الأيمن فقط عندما يكون الطرف الأيسر هو null أو undefined. وإلا فإنه يُرجع قيمة الطرف الأيسر. وهذه هي الطريقة الدقيقة لتوفير القيم الافتراضية.

const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'

القيم المنعدمة فقط تُفعّل القيمة البديلة

الكلمة الأساسية هنا هي nullish: إذ لا يؤدي إلى استخدام الطرف الأيمن سوى null وundefined. أما كل قيمة أخرى، بما في ذلك القيم الزائفة، فتمر دون تغيير.

console.log(0 ?? 99);       // 0
console.log('' ?? 'x');     // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'

مشكلة ||

يستخدم OR المنطقي || القيمة البديلة مع أي قيمة زائفة: 0 و'' وfalse وNaN، إضافةً إلى القيم المنعدمة. وغالبًا ما يسبب ذلك أخطاءً عندما تكون 0 أو السلسلة الفارغة مدخلات صحيحة.

const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0  — correct

توفير القيم الافتراضية بالطريقة الصحيحة

استخدموا ?? عندما تكون الصفر أو السلسلة الفارغة أو false قيمًا مشروعة تريدون الاحتفاظ بها. واحصروا استخدام || في الحالات التي ينبغي فيها فعلًا استبدال أي قيمة زائفة بقيمة بديلة.

function volume(v: number | undefined): number {
  return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));

?? مع معاملات الدوال

من الأنماط الشائعة توفير قيمة افتراضية لمعامل اختياري عند تمرير undefined، مع الاحتفاظ بالمدخلات الزائفة ذات المعنى.

function greet(name?: string): string {
  return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());

نوع نتيجة ??

يزيل نوع a ?? b النوعين null | undefined من نوع a، ثم يدمجه مع نوع b. فإذا كان a من النوع string | null وكان b من النوع string، فستكون النتيجة من النوع string.

const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());

تسلسل القيم الافتراضية

يمكنكم تسلسل ?? لتجربة عدة مصادر بالترتيب، والانتقال إلى المصدر التالي عندما تكون القيمة منعدمة. وتفوز أول قيمة غير منعدمة.

const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);

?? والأسبقية

لا يمكنكم مزج ?? مع || أو && من دون أقواس، إذ يفرض TypeScript استخدامها لتجنب الالتباس. احرصوا دائمًا على التجميع بوضوح.

const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);

التمييز بين الصفر والقيمة المفقودة

من الاحتياجات الشائعة في الواقع: قد تكون درجة الحرارة أو النتيجة أو الرصيد 0 بيانات صحيحة، بينما تعني undefined أنها «غير متوفرة». يحافظ ?? على التمييز بين الحالتين، أما || فيخلط بينهما.

function format(temp: number | undefined): string {
  return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));

?? مع خصائص الكائنات

تُعد قراءة خاصية اختيارية وتوفير قيمة افتراضية لها الاستخدام اليومي المعتاد لـ ??. وهو يتكامل طبيعيًا مع السلسلة الاختيارية التي ستجمعونها معه في الدرس التالي.

type Opts = { retries?: number };
function run(o: Opts): number {
  return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));

متى تختارون كل معامل

قاعدة اتخاذ القرار: إذا كانت 0 أو '' أو false قيمًا صحيحة يجب الحفاظ عليها، فاستخدموا ??. أما إذا كنتم تريدون فعلًا استبدال أي قيمة زائفة، فاستخدموا ||. وتنشأ أخطاء القيم الافتراضية غالبًا من استخدام || بحكم العادة.

const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty kept

اختبار سريع

اختبر مدى فهمك للدمج عند القيم العدمية.

مراجعة: الدمج عند القيم العدمية

لقد تعلمت أن ??:

يعيد القيمة الاحتياطية فقط عندما يكون الجانب الأيسر null أو undefined.
يحافظ على القيم الصحيحة التي تُقيَّم إلى false مثل 0 و'' وfalse — بخلاف ||.
يزيل null | undefined من نوع النتيجة.
يتطلب استخدام الأقواس عند مزجه مع || أو &&.

بعد ذلك، سنجمع بين ?. و?? معًا.

function port(v: number | undefined): number {
  return v ?? 8080;
}
console.log(port(0), port(undefined));

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

هل درس «الدمج مع nullish باستخدام ??» مجاني؟

نعم — نص درس «الدمج مع nullish باستخدام ??» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «الدمج مع nullish باستخدام ??»؟

وفّروا قيمًا بديلة فقط لـ null وundefined، وليس لكل القيم الزائفة تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟

لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «الدمج مع nullish باستخدام ??»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟

نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

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

السلسلة الاختيارية باستخدام ?.
الدمج مع nullish باستخدام ??
دمج ?. و??
الاستدعاءات الاختيارية والوصول إلى العناصر

← العودة إلى TypeScript Academy