يتم كتابة عامل التحقق من الفراغ كعلامتي استفهام ??
.
نظرًا لأنه يعامل 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…)