اذهب إلى المحتوى

التعليمة switch في جافاسكربت


سجى الحاج

يمكن للتعليمة switch أن تحل محل الشرط if المُتعدِّد، إذ تمنحك طريقة وصفية أكثر لموازنة قيمة ما مع عدَّة متغيرات.

الصياغة

تحتوي التعليمة switch على واحدة أو أكثر من كتل case (حالة) وكتلة default (حالة افتراضية) أخيرة اختيارية.

الصياغة العامة هي:

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]
  case 'value2':  // if (x === 'value2')
    ...
    [break]
  default:
    ...
    [break]
}
  • يُتحقَّق من المساواة الصارمة (strict equality) لقيمة المتغير x مع القيمة في الحالة case الأولى (أي value1) ثم الحالة الثانية (أي value2) وهلم جرًّا.
  • في حال تحقَّقت المساواة الصارمة، يبدأ تنفيذ الشيفرة بدءًا من الكتلة البرمجية case المتطابقة حتى أقرب تعليمة خروج break (أو حتى نهاية التعليمة switch بأكملها).
  • في حال لم تتحقق المساواة الصارمة مع أي حالة case، فستُنفَّذ كتلة default الافتراضيَّة (إن وجدت).

مثال تطبيقي

مثال على التعليمة switch:

let a = 2 + 2;
switch (a) {
  case 3:
    alert( 'صغير جدًا' );
    break;
  case 4:
    alert( 'بالضبط!' );
    break;
  case 5:
    alert( 'كبير جدًا' );
    break;
  default:
    alert( "لا أعرف ما هذه القيمة" );
}

تبدأ switch هنا في موازنة المُتغيِّر a مع قيمة الحالة case الأولى التي هي 3. لن تتحقق المطابقة في مثالنا لأنَّ قيمة a هي 4 ولكن ستتحقَّق مع قيمة الحالة الثانية، 4. بعد تَحقُّق المطابقة، يبدأ تنفيذ الشيفرة الموجودة بين case 4 وحتى أقرب break.

إذا لم يكن هناك تعليمة break (توقف وخروج)، ستُنفَّذ الحالة case 5 (والحالات اللاحقة) أيضًا دون إجراء عملية التحقُّق.

سنعيد كتابة المثال نفسه دون التعليمة break لترى الفرق:

let a = 2 + 2;
switch (a) {
  case 3:
    alert( 'Too small' );
  case 4:
    alert( 'Exactly!' );
  case 5:
    alert( 'Too big' );
  default:
    alert( "I don't know such values" );
}

في المثال أعلاه، ستُنفَّذ الدوال alert الثلاث تنفيذًا متسلسلًا وكأننا ننفِّذ الشيفرة التالية:

alert( 'Exactly!' );
alert( 'Too big' );
alert( "I don't know such values" );

أي تعبير برمجي يمكن أن يكون وسيطًا للمبدِّل switch/case

يمكنك تمرير تعابير تعسفية إلى switch/case مثل:

let a = "1";
let b = 0;
switch (+a) {
  case b + 1:
    alert("this runs, because +a is 1, exactly equals b+1");
    break;
  default:
    alert("this doesn't run");
}

قيمة التعبير ‎+a هنا هي 1 والتي توازن مع قيمة التعبير b + 1 في case لتُنفَّذ آنذاك الشيفرة المقابلة للقيمة المطابقة.

تجميع حالات case متعدِّدة

يمكنك تجميع العديد من الحالات case المختلفة لتتشارك الكتلة نفسها المراد تنفيذها عند تطابق إحداها. على سبيل المثال، إن أردنا تنفيذ الشيفرة نفسها للحالتين case 3 و case 5 (أي عندما تكون قيمة a هي 3 و 5)، نكتبهما بالشكل التالي:

let a = 2 + 2;
switch (a) {
  case 4:
    alert('Right!');
    break;
  case 3:                    // (*) جمع حالتين
  case 5:
    alert('Wrong!');
    alert("Why don't you take a math class?");
    break;
  default:
    alert('The result is strange. Really.');
}

الآن، تُظهِر كلًا من الحالة case 3 والحالة case 5 الرسالة نفسها عند تطابق إحداهما.

القدرة على تجميع الحالات هي أحد الآثار الجانبية لكيفيَّة تنفيذ switch/case دون الحاجة إلى الفاصل break. يبدأ هنا تنفيذ الحالة case 3 (عند تطابقها) من السطر (*) ويمر عبر الحالة case 5 بسبب عدم وجود التعليمة break.

نوع القيم

دعني أركز على أمر مهم يتعلق بالتحقق من المساواة وهو أنَّ عملية المساواة تكون «صارمة» دومًا. أي يجب أن تكون القيم من النوع نفسه دائمًا لتتساوى.

لتكن لدينا الشيفرة التالية مثلًا:

let arg = prompt("أدخل قيمة عددية؟");
switch (arg) {
  case '0':
  case '1':
    alert( 'صفر أو واحد' );
    break;
  case '2':
    alert( 'اثنان' );
    break;
  case 3:
    alert( 'لا تُنفَّذ أبدًا' );
    break;
  default:
    alert( 'قيمة مجهولة' );
}
  1. عند الحالة 0 والحالة 1، تُنفَّذ الدالة alert الاولى.
  2. عند الحالة 2، تُنفَّذ الدالة alert الثانية.
  3. لكن عند الحالة 3، ناتج الدالة prompt هي السلسلة النصية "3"، والتي لا تحقق المساواة الصارمة === مع العدد 3، لذا فإنَّ الشيفرة المكتوبة في الحالة case 3 هي شيفرة ميتة ولا تُنفَّذ أبدًا. وستُنفَّذ آنذاك شيفرة الحالة default الافتراضيَّة.

تمارين

أعد كتابة المبدِّل switch بصيغة الشرط if

الأهمية: 5

اكتب الشرط if..else المقابل للمبدِّل switch التالي:

switch (browser) {
  case 'Edge':
    alert( "لديك المتصفح Edge!" );
    break;
  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    alert( 'حسنًا، نحن ندعم هذه المتصفحات أيضًا!' );
    break;
  default:
    alert( 'نرجو أن تظهر هذه الصفحة بمظهر جيد!' );
}

الحل

لمحاكاة عمل التعليمة switch بدقَّة، يجب استخدام المساواة الصارمة '===' في الشرط if. ويمكنك استخدام المساواة '==' أيضًا مع السلاسل النصية المعروفة مسبقًا.

if(browser == 'Edge') {
  alert("لديك المتصفح Edge!");
} else if (browser == 'Chrome'
 || browser == 'Firefox'
 || browser == 'Safari'
 || browser == 'Opera') {
  alert( 'حسنًا، نحن ندعم هذه المتصفحات أيضًا!' );
} else {
  alert( 'نرجو أن تظهر هذه الصفحة بمظهر جيد!' );
}

ملاحظة: كُتِب التعبير التالي: browser == 'Chrome' || browser == 'Firefox' …‎ في الشيفرة أعلاه على أسطر متعدِّدة لتسهيل قراءته.

على أي حال، تبقى صيغة التعليمة switch أكثر وضوحًا.

أعد كتابة الشرط if بصيغة المبدِّل switch

الأهمية: 4

اكتب المبدِّل switch المقابل للشيفرة التالية:

let a = +prompt('a?', '');
if (a == 0) {
  alert( 0 );
}
if (a == 1) {
  alert( 1 );
}
if (a == 2 || a == 3) {
  alert( '2,3' );
}

الحل

تتحول عملية التحقُّق الأولى والثانية إلى حالتين منفصلتين (أي case) بينما تُجمَع عملية التحقق الثالثة في حالتين معًا:

let a = +prompt('a?', '');
switch (a) {
  case 0:
    alert( 0 );
    break;
  case 1:
    alert( 1 );
    break;
  case 2:
  case 3:
    alert( '2,3' );
    break;
}

ملاحظة: التعليمة break في آخر الشيفرة غير مطلوبة، ولكنها تجنبنا الحصول على خطأ في الصياغة مستقبلًا. فقد تود لاحقًا إضافة حالة case أخرى، مثل case4. فإذا نسيت إضافة break قبلها (لأنك لم تكتبها الآن، أي في نهاية case3)، فستواجه خطأ حتميًّا؛ لذلك، هذا نوع من الاحتياط والحذر المسبق من ارتكاب الأخطاء.

ترجمة -وبتصرف- للفصل The "switch" statement من كتاب The JavaScript Language

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...