مقدمة

تعد JavaScript إحدى لغات البرمجة الأكثر شيوعًا، وتوفر للمطورين مجموعة من العوامل للتعامل مع العمليات المنطقية المختلفة. ومن بين هذه العوامل، تعد عوامل التشغيل المنطقية OR (||) وعوامل التشغيل Nullish Coalescing (؟؟) أدوات أساسية لإدارة القيم الافتراضية والتعامل مع القيم الخالية. سوف تتعمق هذه المقالة في الاختلافات بين هذين العاملين، وحالات استخدامهما، والأمثلة العملية والمعقدة لتوضيح استخدامهما.

فهم العامل المنطقي OR (||).

يُستخدم عامل التشغيل المنطقي OR (||) في JavaScript على نطاق واسع لإرجاع أول قيمة صحيحة بين معاملاته أو القيمة الأخيرة إذا لم تكن أي منها صحيحة. يتم استخدامه بشكل أساسي لتعيين القيم الافتراضية.

بناء الجملة

result = operand1 || operand2;

كيف تعمل

ال|| يقوم عامل التشغيل بالتقييم من اليسار إلى اليمين، ويعيد المعامل الأول إذا كان صحيحًا؛ وإلا فإنه يقوم بتقييم وإرجاع المعامل الثاني.

المثال 1: تحديد القيم الافتراضية

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput || defaultText;
console.log(message); // Output: 'Hello, World!'

في هذا المثال، إدخال المستخدم عبارة عن سلسلة فارغة (خطأ)، لذلك يتم إرجاع النص الافتراضي.

المثال 2: التعامل مع قيم متعددة

let firstName = null;
let lastName = 'Doe';

let name = firstName || lastName || 'Anonymous';
console.log(name); // Output: 'Doe'

هنا، الاسم الأول فارغ (خطأ)، لذا يتم إرجاع اسم العائلة لأنه صحيح.

حدود عامل التشغيل المنطقي (||).

القيد الرئيسي لـ || عامل التشغيل هو أنه يتعامل مع العديد من القيم على أنها خاطئة، مثل 0 وNaN و'' وfalse وnull وغير المحدد. يمكن أن يؤدي هذا إلى نتائج غير متوقعة عندما يكون المقصود من هذه القيم أن تكون صالحة.

تقديم عامل الدمج الفارغ (؟؟).

يعد عامل Nullish Coalescing (؟؟) إضافة أحدث إلى JavaScript، تم تقديمها في ES2020. إنه مصمم للتعامل مع الحالات التي يُقصد فيها صراحةً أن تكون القيم الفارغة أو غير المحددة هي القيم الفارغة الوحيدة التي يتم أخذها في الاعتبار.

بناء الجملة

result = operand1 ?? operand2;

كيف تعمل

ال ؟؟ يقوم عامل التشغيل بإرجاع المعامل الأيمن عندما يكون المعامل الأيسر فارغًا أو غير محدد. وإلا فإنه يقوم بإرجاع المعامل الأيسر.

المثال 1: تحديد القيم الافتراضية

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput ?? defaultText;
console.log(message); // Output: ''

في هذا المثال، userInput عبارة عن سلسلة فارغة، وهي ليست فارغة أو غير محددة، لذلك يتم إرجاعها.

المثال 2: التعامل مع القيم الخالية

let firstName = null;
let lastName = 'Doe';

let name = firstName ?? lastName ?? 'Anonymous';
console.log(name); // Output: 'Doe'

هنا، الاسم الأول فارغ، لذا يتم إرجاع اسم العائلة لأنه ليس فارغًا أو غير محدد.

مقارنة عوامل التشغيل المنطقية OR (||) والدمج الفارغ (؟؟).

مثال 1: مقارنة القيم الزائفة

let value1 = 0;
let value2 = '';

let resultOR = value1 || 'default';
let resultNullish = value1 ?? 'default';

console.log(resultOR); // Output: 'default'
console.log(resultNullish); // Output: 0

في هذا المثال، يعتبر 0 خطأ بواسطة || عامل التشغيل ولكنه قيمة صالحة لـ ?? المشغل أو العامل.

المثال 2: استخدام كلا العاملين معًا

let userInput = null;
let fallbackText = 'Default Text';

let message = (userInput ?? fallbackText) || 'Fallback Message';
console.log(message); // Output: 'Default Text'

هنا، إدخال المستخدم فارغ، لذلك يتم استخدام النص الاحتياطي بواسطة ؟؟ المشغل أو العامل. ثم يتم التحقق من النتيجة بواسطة || عامل التشغيل، ولكن نظرًا لأن النص الاحتياطي صحيح، فسيتم إرجاعه.

أمثلة معقدة على عوامل التشغيل المنطقية OR (||) والدمج الفارغ (؟؟).

المثال 3: العمليات المتداخلة مع الكائنات

فكر في سيناريو حيث تحتاج إلى تعيين القيم الافتراضية لخصائص الكائن المتداخلة.

let userSettings = {
  theme: {
    color: '',
    font: null
  }
};

let defaultSettings = {
  theme: {
    color: 'blue',
    font: 'Arial'
  }
};

let themeColor = userSettings.theme.color || defaultSettings.theme.color;
let themeFont = userSettings.theme.font ?? defaultSettings.theme.font;

console.log(themeColor); // Output: 'blue'
console.log(themeFont); // Output: 'Arial'

في هذا المثال، userSettings.theme.color عبارة عن سلسلة فارغة، لذلك يتم استخدام defaultSettings.theme.color. userSettings.theme.font فارغ، لذلك يتم استخدام defaultSettings.theme.font.

المثال 4: معلمات الوظيفة مع الإعدادات الافتراضية

عند التعامل مع معلمات الوظائف، قد ترغب في توفير قيم افتراضية للوسائط المفقودة.

function greet(name, greeting) {
  name = name ?? 'Guest';
  greeting = greeting || 'Hello';

  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: 'Hello, Guest!'
greet('Alice'); // Output: 'Hello, Alice!'
greet('Bob', 'Hi'); // Output: 'Hi, Bob!'
greet(null, 'Hey'); // Output: 'Hey, Guest!'

في هذا المثال، تستخدم معلمة الاسم ؟؟ عامل التشغيل لتعيين قيمة افتراضية لـ "ضيف" إذا كان الاسم فارغًا أو غير محدد. تستخدم معلمة الترحيب || عامل التشغيل لتعيين قيمة افتراضية لـ "مرحبًا" إذا كانت الترحيب أي قيمة زائفة غير فارغة أو غير محددة.

مثال 5: الدمج مع التسلسل الاختياري

يمكن دمج التسلسل الاختياري (؟.) مع || و ؟؟ للتعامل مع خصائص الكائنات المتداخلة بشكل آمن.

let user = {
  profile: {
    name: 'John Doe'
  }
};

let userName = user?.profile?.name || 'Anonymous';
let userEmail = user?.contact?.email ?? 'No Email Provided';

console.log(userName); // Output: 'John Doe'
console.log(userEmail); // Output: 'No Email Provided'

في هذا المثال، يضمن التسلسل الاختياري أنه في حالة عدم وجود أي جزء من مسار الخاصية، فإنه يُرجع غير محدد، مما يمنع الأخطاء. || و ؟؟ ثم يقوم المشغلون بتوفير القيم الافتراضية المناسبة.

أفضل الممارسات وحالات الاستخدام

1. استخدم || للتقصير الواسع النطاق:

   • عندما تحتاج إلى توفير قيم افتراضية لمجموعة من الشروط الخاطئة (على سبيل المثال، سلاسل فارغة، 0، NaN).

2. يستخدم ؟؟ للفحوصات الفارغة الدقيقة:

   • عندما تريد على وجه التحديد التعامل مع القيم الفارغة أو غير المحددة دون التأثير على القيم الخاطئة الأخرى.

3. الجمع بين كليهما:

   • استخدم مجموعة من || و ؟؟ للسيناريوهات المعقدة حيث تحتاج إلى التعامل مع كل من القيم الصادقة/الخاطئة والقيم الفارغة بشكل واضح.

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

ماذا يفعل عامل التشغيل المنطقي (||)؟
يقوم عامل التشغيل المنطقي OR (||) بإرجاع أول قيمة صحيحة بين معاملاته أو المعامل الأخير إذا لم يكن أي منها صحيحًا.

متى يجب علي استخدام عامل التشغيل Nullish Coalescing (؟؟)؟
استخدم عامل التشغيل Nullish Coalescing (؟؟) عندما تحتاج إلى التعامل مع القيم الفارغة أو غير المحددة على وجه التحديد دون التعامل مع القيم الخاطئة الأخرى مثل 0 أو السلاسل الفارغة على أنها فارغة.

هل يمكنني استخدام كلا العاملين معًا؟
نعم، يمكنك استخدام كليهما || و ؟؟ معًا للتعامل مع أنواع مختلفة من القيم والتأكد من أن منطق التعليمات البرمجية الخاص بك يغطي الحالات المختلفة بفعالية.

كيف || التعامل مع السلاسل الفارغة؟
|| يتعامل عامل التشغيل مع السلاسل الفارغة على أنها خاطئة، لذلك سيعيد المعامل التالي إذا كان الأول عبارة عن سلسلة فارغة.

هل عامل التشغيل Nullish Coalescing (؟؟) مدعوم في جميع المتصفحات؟
ال ؟؟ المشغل مدعوم في المتصفحات والبيئات الحديثة التي تدعم ES2020. بالنسبة للبيئات القديمة، قد تحتاج إلى استخدام مترجم مثل بابل.

ما الفرق بين || و ؟؟ العاملين؟
والفرق الرئيسي هو أن || يعتبر العديد من القيم كاذبة (على سبيل المثال، 0، ''، خطأ)، بينما ؟؟ يعامل فقط القيم الخالية وغير المحددة كقيم فارغة.

خاتمة

يعد فهم الاختلافات بين عوامل التشغيل المنطقية OR (||) والدمج الفارغ (؟؟) في JavaScript أمرًا ضروريًا لكتابة تعليمات برمجية قوية وخالية من الأخطاء. || يعد المشغل رائعًا لسيناريوهات التخلف عن السداد الواسعة، بينما ؟؟ مثالي للتعامل مع القيم الخالية بدقة. باستخدام عوامل التشغيل هذه بشكل مناسب، يمكنك التأكد من أن التعليمات البرمجية الخاصة بك تتعامل مع حالات البيانات المختلفة بفعالية، مما يوفر تجربة مستخدم سلسة.