عرض مصدر JavaScript/switch

<noinclude>{{DISPLAYTITLE:<code>switch</code> في JavaScript}}</noinclude>
التعبير البرمجي <code>switch</code> يُستخدَم لمطابقة قيمة تعبير برمجي باستخدام عبارة <code>case</code>، ثم يُنفِّذ التعابير البرمجية المرتبطة معها.
==البنية العامة==
<syntaxhighlight lang="javascript">
switch (expression) {
  case value1:
    // التعابير البرمجية التي ستُطبِّق
    // عندما تُطابِق قيمةُ التعبير قيمةَ الحالة
    [break;]
  case value2:
    // التعابير البرمجية التي ستُطبِّق
    // عندما تُطابِق قيمةُ التعبير قيمةَ الحالة
    [break;]
  ...
  case valueN:
    // التعابير البرمجية التي ستُطبِّق
    // عندما تُطابِق قيمةُ التعبير قيمةَ الحالة
    [break;]
  [default:
    // التعابير البرمجية التي ستُطبِّق
    // عندما لا تُطابِق قيمةُ التعبير أيّة حالة
    [break;]]
}

</syntaxhighlight>

=== <code>expression</code> ===
التعبير الذي سيُطابَق مع كل حالة (case).

=== <code>case value''N''</code> ===
القسم <code>case</code> الذي يُستخدَم لمطابقة التعبير <code>expression</code>، وإذا طابق التعبير <code>expression</code> القيمة <code>value''N''</code>، فستُنفَّذ التعلميات داخل القسم <code>case</code> حتى نهاية التعبير البرمجي <code>switch</code> أو وجود التعبير <code>[[JavaScript/break|break]]</code>.

=== <code>default</code> ===
القسم <code>default</code>، وهو يوفِّر التعابير البرمجية التي يجب تطبيقها إن لم تُطابَق أيّة حالة <code>case</code>. 

== الوصف ==
تقبل switch تعبيرًا ثم ستبحث عن أوّل حالة case قيمتها تُطابِق قيمة التعبير تمامًا (باستخدام [[JavaScript/Comparison Operators|معامل المقارنة]] <code>===</code>) ثم ستنقل التحكم إلى قسم case المُطابَق مما يؤدي إلى تنفيذ التعابير البرمجية المرتبطة به (وإذا كانت هنالك أكثر من حالة تُطابِق القيمة المعطاة، فستُحدَّد أوّل حالة فقط).

إذا لم تكن هنالك حالة <code>case</code> تُطابِق التعبير فسيبحث البرنامج عن قسم <code>default</code>، وإن وجِدَ فسيُنقَل التحكم إلى ذلك القسم، مما يؤدي إلى تنفيذ التعابير البرمجية المرتبطة به، وإن لم يكن قسم <code>default</code> موجودًا فسيُكمِل البرنامج تنفيذ التعابير البرمجية التي تلي نهاية <code>switch</code>؛ ومن الشائع وضع قسم <code>default</code> في نهاية <code>switch</code> لكن ذلك ليس ضروريًا.

تعبير <code>[[JavaScript/break|break]]</code> الاختياري يرتبط بإحدى الحالات وسيؤدي إلى خروج البرنامج من عبارة <code>switch</code> وإكمال تنفيذ التعليمات التي تلي <code>switch</code>؛ أما إذا لم يكن تعبير <code>[[JavaScript/break|break]]</code> موجودًا فسيكمل البرنامج تنفيذ التعبيرات البرمجية التي تلي الحالة المُطابَقة في <code>switch</code>.

== أمثلة ==

=== استخدام <code>switch</code> ===
في المثال الآتي، إذا كانت قيمة التعبير <code>expr</code> تساوي <code>Bananas</code>، فسيُطابِق البرنامج الحالة <code>Bananas</code> وسيُنفِّذ التعابير البرمجية المرتبطة معها، وعند تنفيذ التعبير <code>[[JavaScript/break|break]]</code> فسيخرج البرنامج من <code>switch</code> ثم يُنفِّذ التعابير البرمجية التي تلي <code>switch</code>، وإذا حُذِفَ التعبير <code>[[JavaScript/break|break]]</code> فستُنفَّذ التعابير المرتبطة مع الحالة <code>Cherries</code> أيضًا:<syntaxhighlight lang="javascript">
switch (expr) {
  case 'Oranges':
    console.log('Oranges are $0.59 a pound.');
    break;
  case 'Apples':
    console.log('Apples are $0.32 a pound.');
    break;
  case 'Bananas':
    console.log('Bananas are $0.48 a pound.');
    break;
  case 'Cherries':
    console.log('Cherries are $3.00 a pound.');
    break;
  case 'Mangoes':
  case 'Papayas':
    console.log('Mangoes and papayas are $2.79 a pound.');
    break;
  default:
    console.log('Sorry, we are out of ' + expr + '.');
}

console.log("Is there anything else you'd like?");

</syntaxhighlight>

=== نسيان وضع التعبير <code>[[JavaScript/break|break]]</code> ===
إذا نسيت وضع التعبير <code>[[JavaScript/break|break]]</code> فسينفِّذ البرنامج التعابير البرمجية التي تلي الحالة المُطابَقة، وسيستمر بتنفيذ التعابير البرمجية في الحالات الأخرى التي تلي الحالة المُطابَقة حتى لو لم يتحقق الشرط. فمثلًا:<syntaxhighlight lang="javascript">
var foo = 0;
switch (foo) {
  case -1:
    console.log('negative 1');
    break;
  case 0: // سيُطابَق الشرط لذا ستنفَّذ التعابير البرمجية هنا
    console.log(0);
    // نسينا وضع break
  case 1: // لم نخرج في الحالة الأولى، لذا سيستمر التنفيذ
    console.log(1);
    break; // لن ننتقل إلى تنفيذ الحالة التالية لوجود break
  case 2:
    console.log(2);
    break;
  default:
    console.log('default');
}
</syntaxhighlight>

=== موضع الحالة الافتراضية ===
يمكن وضع الحالة الافتراضية <code>default</code> في أي مكان، وستُنفَّذ التعليمات التي تليها إن لم يُطابِق التعبير أحد الحالات:<syntaxhighlight lang="javascript">
var foo = 5;
switch (foo) {
  case 2:
    console.log(2);
    break;
  default:
    console.log('default')
    // ستُنفَّذ الحالة التالية لعدم وجود break
  case 1:  
    console.log('1');
}
</syntaxhighlight>

=== استخدام <code>switch</code> بدلًا من عدِّة تعابير <code>if</code> ===
<syntaxhighlight lang="javascript">
var a = 100;
var b = NaN;
switch (true) {
  case isNaN(a) || isNaN(b):
    console.log('NaNNaN');
    break;
  case a === b:
    console.log(0);
    break;
  case a < b:
    console.log(-1);
    break;
  default:
    console.log(1);
}
</syntaxhighlight>

=== تنفيذ تعابير برمجية عند مطابقة حالة أو أكثر ===
يمكن الاستفادة من سلوك <code>switch</code> عند عدم توافر التعبير <code>[[JavaScript/break|break]]</code> بإمكانية تنفيذ عملية ما إذا تمت مطابقة حالة أو أكثر:<syntaxhighlight lang="javascript">
var Animal = 'Giraffe';
switch (Animal) {
  case 'Cow':
  case 'Giraffe':
  case 'Dog':
  case 'Sheep':
    console.log('This animal is cute.');
    break;
  case 'Dinosaur':
  default:
    console.log('This animal is NOT!.');
}

</syntaxhighlight>

=== تنفيذ سلسلة من التعابير ===
سنستخدم سلسلة من التعابير في المثال الآتي التي يختلف ناتج تنفيذها حسب قيمة العدد الذي يجري اختباره. وهذا المثال يبيّن أنَّ بإمكانك جعل ترتيب الحالات كما تشاء، وليس من الضروري أن تكون مرتبةً؛ ويمكن أيضًا استخدام السلاسل النصية لمطابقة الناتج إضافةً إلى الأرقام (إن كان ذلك منطقيًا):<syntaxhighlight lang="javascript">
var foo = 1;
var output = 'Output: ';
switch (foo) {
  case 10:
    output += 'So ';
  case 1:
    output += 'What ';
    output += 'Is ';
  case 2:
    output += 'Your ';
  case 3:
    output += 'Name';
  case 4:
    output += '?';
    console.log(output);
    break;
  case 5:
    output += '!';
    console.log(output);
    break;
  default:
    console.log('Please pick a number from 0 to 6!');
}
</syntaxhighlight>ناتج المثال السابق:
{| class="wikitable"
!القيمة
!الناتج
|-
|قيمة المتغير foo هي NaN أو ليست 1 أو 2 أو 3 أو 4 أو 5 أو 10
|Please pick a number from 0 to 6!‎
|-
|10
|So What Is Your Name?‎
|-
|1
|What Is Your Name?‎
|-
|2
|Your Name?‎
|-
|3
|Name?‎
|-
|4
|?‎
|-
|5
|!
|}

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|نعم
|نعم
|نعم
|نعم
|نعم
|}

== مصادر ومواصفات ==
* مسودة المعيار [https://tc39.github.io/ecma262/#sec-switch-statement ECMAScript Latest Draft].
* معيار [http://www.ecma-international.org/ecma-262/6.0/#sec-switch-statement ECMAScript 2015 (6th Edition)]‎.
* معيار [http://www.ecma-international.org/ecma-262/5.1/#sec-12.11 ECMAScript 5.1].
* معيار [http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf ECMAScript 3rd Edition]. 
[[تصنيف:JavaScript]]
[[تصنيف:JavaScript Statement]]