١٩ مايو ٢٠٢٣

عامل التحقق من الفراغ '??'

إضافة حديثة
هذه إضافة حديثة إلى اللغه. المتصفحات القديمه ربما تتطلب polyfills.

يتم كتابة عامل التحقق من الفراغ كعلامتي استفهام ??.

نظرًا لأنه يعامل null و undefined بطريقة مماثلة ، سنستخدم مصطلحًا خاصًا هنا ، في هذه المقالة. سنقول أن التعبير “محدد” عندما لا يكون null ولا undefined.

نتيجة a ?? b هي:

  • إذا كان a محددًا ، فإن a،
  • إذا لم يتم تحديد a ، فإن b.

بعبارة أخرى ، يعيد ?? الوسيطة الأولى إذا لم يكن null/undefined. وإلا ، الثانية.

عامل التحقق من الفراغ ليس شيئًا جديدًا تمامًا. إنه مجرد صياغة جميلة للحصول على القيمة “المحددة” الأولى من اثنين.

يمكننا إعادة كتابة result = a ?? b باستخدام العوامل التي نعرفها بالفعل ، مثل هذا:

result = (a !== null && a !== undefined) ? a : b;

الآن يجب أن يكون من الواضح تمامًا ما يفعله ??. دعنا نرى أين يساعد.

حالة الاستخدام الشائعة لـ ?? هي توفير قيمة افتراضية لمتغير محتمل أن يكون غير محدد.

على سبيل المثال ، هنا نعرض user إذا تم تحديده ، وإلا Anonymous:

let user;

alert(user ?? "مجهول الهوية"); // مجهول الهوية (لم يتم تحديد المستخدم)

هذا مثال على user المعين لاسم:

let user = "John";

alert(user ?? "مجهول الهوية"); // John (تم تحديد المستخدم)

يمكننا أيضًا استخدام تسلسل ?? لتحديد القيمة الأولى من قائمة ليست null/undefined.

لنفترض أن لدينا بيانات المستخدم في المتغيرات firstName و lastName أو nickName. قد لا يتم تحديد كل منهما ، إذا قرر المستخدم عدم إدخال قيمة.

نود عرض اسم المستخدم باستخدام أحد هذه المتغيرات ، أو عرض “مجهول الهوية” إذا لم يتم تحديد كل منهم.

لنستخدم عامل التحقق من الفراغ ?? لذلك:

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// يعرض القيمة المحددة الأولى:
alert(firstName ?? lastName ?? nickName ?? "مجهول الهوية"); // Supercoder

المقارنة مع ||

هذا مشابه جدًا للمعامل ||. في الحقيقة يمكننا استبدال ?? ب || في المثال السابق وسنحصل على نفس النتيجة. كما وصفنا في الفصل السابق.

يمكن استخدام عامل OR || بنفس الطريقة التي يتم فيها استخدام ?? ، كما تم وصفه في الفصل السابق.

على سبيل المثال ، في الكود أعلاه يمكننا استبدال ?? بـ || ولا يزال نحصل على نفس النتيجة:

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// يعرض القيمة الحقيقية الأولى:
alert(firstName || lastName || nickName || "مجهول الهوية"); // Supercoder

تاريخيًا ، كان عامل OR || هناك أولاً. لقد كان موجودًا منذ بداية JavaScript ، لذلك كان المطورون يستخدمونه لمثل هذه الأغراض لفترة طويلة.

من ناحية أخرى ، تمت إضافة عامل التحقق من الفراغ ?? إلى JavaScript مؤخرًا فقط ، وكان السبب في ذلك أن الناس لم يكونوا راضين تمامًا عن ||.

الفرق الهام بينهما هو أن:

  • || يعيد القيمة الحقيقية الأولى.
  • ?? يعيد القيمة المحددة الأولى.

بعبارة أخرى ، لا يميز || بين false و 0 والسلسلة الفارغة "" و null/undefined. كلهم متشابهون – قيم زائفة. إذا كان أي منهم هو الوسيطة الأولى لـ || ، فسنحصل على الوسيطة الثانية كنتيجة.

على الرغم من ذلك ، في الممارسة قد نرغب في استخدام قيمة افتراضية فقط عندما يكون المتغير null/undefined. أي عندما تكون القيمة مجهولة / غير محددة حقًا.

على سبيل المثال ، خذ هذا:

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0
  • يتحقق height || 100 من height لكونه قيمة زائفة ، وهو 0 ، زائف بالفعل.
  • لذلك نتيجة || هي الوسيطة الثانية ، 100.
  • يتحقق height ?? 100 من height لكونه null/undefined ، وليس كذلك ،
  • لذلك النتيجة هي height “كما هو” ، أي 0.

في الممارسة ، يعد الارتفاع الصفري قيمة صالحة في كثير من الأحيان ، والتي يجب عدم استبدالها بالقيمة الافتراضية. لذلك يفعل ?? ما يجب.

الأولوية

تعادل أولوية عامل التحقق من الفراغ ?? تقريبًا نفس || ، فقط قليلًا أدنى. يساوي 5 في جدول MDN ، بينما || هو 6.

وهذا يعني أنه مثل || ، يتم تقييم عامل التحقق من الفراغ ?? قبل = و ؟ ، ولكن بعد معظم العمليات الأخرى مثل + و *.

لذلك إذا كنا نرغب في اختيار قيمة مع ?? في تعبير مع عوامل أخرى ، فكر في إضافة أقواس:

let height = null;
let width = null;

// مهم: استخدم الأقواس
let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

وإلا ، إذا تجاهلنا الأقواس ، فبما أن * لديه أولوية أعلى من ?? ، فسيتم تنفيذه أولاً مما يؤدي إلى نتائج غير صحيحة.

// بدون أقواس
let area = height ?? 100 * width ?? 50;

// ... يعمل بنفس الطريقة كهذا (ربما ليس ما نريده):
let area = height ?? (100 * width) ?? 50;

استخدام ?? مع && أو ||

نظرًا لأسباب السلامة ، يحظر JavaScript استخدام ?? مع عوامل التشغيل && و || ، ما لم يتم تحديد الأولوية صراحةً بالأقواس.

هذا سينتج خطأ لغوي:

let x = 1 && 2 ?? 3; // Syntax error

الحد هو بالتأكيد قابل للنقاش ، تم إضافته إلى مواصفات اللغة بهدف تجنب أخطاء البرمجة ، عندما يبدأ الناس في التبديل من || إلى ??.

استخدم الأقواس لتجنب الخطأ:

let x = (1 && 2) ?? 3; // تعمل دون مشاكل
alert(x); // 2

ملخص

  • يوفر المشغل الفارغ المتحد ?? طريقة قصيرة لاختيار القيمة “المحددة” الأولى من قائمة.

يستخدم لوضع قيم افتراضية للمتغيرات:

// اجعل height=100 إذا كان null أو undefined
height = height ?? 100;
  • يحتوي المشغل ?? على أولوية منخفضة جدًا ، فقط قليلًا أعلى من ؟ و = ، لذلك يجب عليك النظر في إضافة الأقواس عند استخدامه في تعبير.
  • يحظر استخدامه مع || أو && بدون أقواس صريحة.
خريطة الدورة التعليمية

التعليقات

إقرأ هذا قبل أن تضع تعليقًا…
  • إذا كان لديك اقتراحات أو تريد تحسينًا - من فضلك من فضلك إفتح موضوعًا فى جيتهاب أو شارك بنفسك بدلًا من التعليقات.
  • إذا لم تستطع أن تفهم شيئّا فى المقال - وضّح ماهو.
  • إذا كنت تريد عرض كود استخدم عنصر <code> ، وللكثير من السطور استخدم <pre>، ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)