دستور switch و case در جاوا اسکریپت (JavaScript)

در مباحث پیشین از آموزش مقدماتی جاوا اسکریپت دیدیم که چگونه با عبارات if و else و ترکیب آنها یعنی elseif دستورات شرطی (Conditional Statements) تعریف و استفاده کنیم، همچنین با حلقه های for و while به کمک مثال هایی آشنا شدیم، اکنون می خواهیم ببینیم که دستور switch و case که جزء دسته دستورات کنترلی (Control Statements) است چه کاربردی در جاوا اسکریپت دارد و به چه منظوری در زبان های برنامه نویسی معرفی شده است.

کاربرد دستور switch و case در جاوا اسکریپت (JavaScript)

به صورت ساده از دستور سوئیچ (switch) برای انتخاب مورد (case) مد نظر از بین موارد موجود بر اساس درست (true) شدن و برقرار بودن مقایسه switch و case های آن استفاده می شود، به طور مثال در سایتی چندزبانه کاربر می تواند از بین زبان های موجود یک مورد را به عنوان زبان مد نظر خود انتخاب کند، در این حالت برای ایجاد قدرت تصمیم گیری در برنامه و اجرای ادامه دستورات مطابق با مقدار انتخابی کاربر، زبان انتخابی را در متغیر فرضی lang مقداردهی کرده و به عنوان switch در نظر می گیرم، زبان های قابل انتخاب را نیز به عنوان case ها فرض می کنیم، به این ترتیب می توانیم رابطه بین switch و case ها را به صورت نمونه زیر مورد به مورد مقایسه کنیم:

<script>
var lang = 'Fa';

switch(lang) {
    case 'Fa':
    document.write("زبان سایت فارسی است!");
    break;
    case 'En':
    document.write("Website language is English!");
    break;
    default:  
    document.write("Default language!");
}
</script>

خروجی نمونه کد بالا به صورت زیر خواهد بود:

زبان سایت فارسی است!

توضیح:
- در مثال بالا ابتدا در متغیر فرضی lang زبان فارسی (FA) را به عنوان مقدار پیش فرض تنظیم کرده ایم (در برنامه های کاربردی این مقدار می تواند از آدرس URL، فیلد input، کوکی یا ورودی های دیگری دریافت شود)، سپس در قسمت مربوط به دستور switch مقادیر متغیر lang را به عنوان کلید بررسی می کنیم که به این صورت دستور switch بین case های خود مورد به مورد جستجو نموده و در صورتی که مقادیری مشابه با مقدار متغیر lang پیدا شود آن case را انتخاب و عملیات تعریف شده اجرا می شود (در این مثال با دستور document.write مقادیر متنی در خروجی صفحه وب چاپ می شود)، اگر هیچ کدام از case ها با مقادیر متغیر lang همخوانی نداشته باشند قسمت مربوط به عملیات پیش فرض یا default اجرا خواهد شد، در نظر گرفتن قسمت default اختیاری است.
- دقت کنیم که پس از هر case یک break درج کرده ایم که مفهوم آن خاتمه اجرای دستور switch است، یعنی هر کجا نتیجه جستجوی دستور switch درست (true) باشد قسمت مربوط به break اجرا شده و فرآیند switch و case خاتمه می یابد.
- اگر break را از کد بالا حذف کنیم همه مقادیر case ها به خروجی ارسال می شوند، در واقع کد را باید در جایی متوقف می کردیم که این کار را انجام نداده ایم.
- در فرآیند دستور switch ممکن است نیاز باشد چند case مختلف عملیات واحدی را اجرا کنند، به فرض اگر بخواهیم جهت نمایش حروف سایت را مشخص کنیم قاعدتا این تنظیمات برای زبان فارسی و عربی از راست به چپ و برای زبان های انگلیسی، فرانسه و... از چپ به راست خواهد بود، در اینگونه موارد از case های چندگانه متوالی استفاده می کنیم، مثال:

<script>
var lang = 'Fa';

switch(lang) {
    case 'Fa':
    case 'Ar':
    alert("RTL!");
    break;
    case 'En':
    case 'Fr':
    alert("LTR!");
    break;
}
</script>

خروجی نمونه کد بالا به صورت زیر خواهد بود:

RTL!

با توجه به این نمونه کد در صورتی که مقادیر متغیر lang یکی از موارد Fa یا Ar باشد قسمت اول دستور اجرا می شود، اما اگر مقادیر متغیر lang یکی از موارد En یا Fr باشد قسمت دوم دستور اجرا خواهد شد.
نکته: مفسر جاوا اسکریپت در هنگام مقایسه مقادیر متغیر switch با case ها از عملگر === استفاده می کند، یعنی دو قسمت باید از هر نظر (نوع و مقدار) یکسان باشند تا نتیجه مقایسه true شود.

استفاده از دستور switch در حالت داینامیک

اصولا زبان های برنامه نویسی برای انجام هوشمندانه فرآیندها ساخته شده اند، به عبارتی معمولا ورودی و خروجی برنامه ها از قبل مشخص نیست و می توانند یک مقدار داینامیک و غیرثابت باشند، در مورد دستور switch هم این قاعده جاری است و امکان استفاده از مقادیر داینامیک و متغیر برای مقایسه case ها وجود دارد، به طور مثال می توانیم کدی بنویسیم که در صفحه وب با توجه به نام کاربری افراد یا زمان فعلی سیستم پیامی به آنها نشان داده شود یا در حالت های پیشرفته تر با دریافت اختلاف زمانی کشور کاربر و مقایسه آن با زمان سرور کارها را به وقت محلی تنظیم کنیم و بسیاری ایده های دیگر، در مثال زیر با استفاده از آبجکت Date و متد getDay عدد متناظر با هر روز (از روزهای هفته) را دریافت و با توجه به مقدار آن یکی از موارد (case) ها را به خروجی ارسال کرده ایم که بر اساس روزهای هفته خروجی ما نیز متغیر خواهد بود، به این صورت می توانیم به صورت داینامیک و بدون در نظر گرفتن مقادیر اولیه از دستور switch و case در جاوا اسکریپت استفاده کنیم:

<script>
var date = new Date();
var today = date.getDay();
switch(today) {
    case 1:
    document.write("با توجه به تاریخ سیستم، امروز دوشنبه است!<br>");
    break;
    case 2:
    document.write("با توجه به تاریخ سیستم، امروز سه شنبه است!<br>");
    break;
    case 3:
    document.write("با توجه به تاریخ سیستم، امروز چهارشنبه است!<br>");
    break;
    case 4:
    document.write("با توجه به تاریخ سیستم، امروز پنجشنبه ست!<br>");
    break;
    case 5:
    document.write("با توجه به تاریخ سیستم، امروز جمعه است!<br>");
    break;
    case 6:
    document.write("با توجه به تاریخ سیستم، امروز شنبه است!<br>");
    break;
    case 7:
    document.write("با توجه به تاریخ سیستم، امروز یکشنبه است!<br>");
    break;            
    default:  
    document.write("بروز مشکل در نمایش تاریخ سیستم!<br>");
}
</script>

توضیح:
- کلاس Date در حالت عادی از تاریخ میلادی سیستم کاربر پیروی می کند، لذا بر اساس اینکه یکشنبه روز تعطیل (روز هفتم) در تقویم میلادی است شروع شمارش روزهای هفته از دوشنبه (case 1) خواهد بود.
- اعدادی که به عنوان مقادیر به case ها داده شده اند در واقع حاصل و نتیجه برگردانده شده از متد date.getDay بوده که با توجه به تاریخ تنظیم شده سیستم بین مقادیر 1 تا 7 (هفت روز هفته) در نوسان خواهند بود.
- برای بررسی نحوه عملکرد دستورات جاوا اسکریپت کافی است نمونه کدها را کپی و در صفحه وب به کمک برنامه های ویرایشگر HTML مانند برنامه Adobe Dreamweaver، PhpStorm یا حتی ++Notepad درج و در نهایت با فرمت html یا htm ذخیره و فایل را با مرورگر اجرا کنیم.

استفاده از دستور switch بدون متغیر مقایسه

در مثال ها و نمونه کدهایی که تا این قسمت از آموزش بررسی کردیم دستور switch با یک متغیر همراه بود که برای مقایسه با case ها از آن استفاده کرده ایم، جالب است که دستور switch و case بدون وجود این متغیر مقایسه ای نیز قابل استفاده است، به طور مثال:

<script>
var number = 20;
switch(true) {
    case number < 20:
    alert('عدد از 20 کوچکتر است!');
    break;
    case number > 20:
    alert('عدد از 20 بزرگتر است!');
    break;
    case number == 20:
    alert('عدد با 20 برابر است!');
    break;
}
</script>

خروجی نمونه کد بالا به صورت زیر خواهد بود:

عدد با 20 برابر است!

همان طور که مشخص است به جای متغیر مقایسه از عبارت true استفاده و در هر case مقادیر متغیر فرضی number را بررسی کرده ایم.

کجا از if else و کی از switch case استفاده کنیم؟!

در زبان های برنامه نویسی دستور if else و switch case هر دو جزء خانواده دستورات کنترلی (Control Statements) هستند و برای تصمیم گیری در دو یا چندراهی های برنامه ها به کار می روند، این دو شکل از دستورات قابلیت جایگزینی به جای هم را دارند یعنی یک الگوریتم را هم می توانیم با if else و هم با switch case پیاده سازی کنیم، به طور مثال:

<script>
var a = 1;

if(a == 0) {
    alert(0);
} else if(a == 1) {
    alert(1);
} else if(a == 2) {
    alert(2);
}

switch(a) {
    case 0:
    alert(0);
    break;
    case 1:
    alert(1);
    break;
    case 2:
    alert(2);
    break;
}
</script>

خروجی هر دو دستور عدد 1 خواهد بود، با این شباهت سوالی که ممکن است به ذهن خطور کند این است که کجا باید از if else و کی از switch case استفاده کنیم؟!
در پاسخ باید گفت هر دستوری با فلسفه خاصی ایجاد و معرفی گردیده تا در بهینه ترین شکل ممکن نیاز برنامه نویسان را پوشش دهد، دستورات در برنامه نویسی شبیه ابزارها در دنیای واقعی هستند، پیچ چهارسو را در مواردی با آچار دوسو هم می توانیم باز و بسته کنیم اما قاعدتا در این حالت آچار دوسو شیوه استاندارد نیست و کاربردها و مزیت های آچار چهارسو را نخواهد داشت! به عبارتی برای کار حرفه ای ابزار حرفه ای مورد نیاز است.
با این توضیح بهینه این است که از if else در شرایط زیر استفاده کنیم:
- حالت های شرطی محدود به یک یا چند مورد باشند (با یک یا چند دستور if else کدهای مورد نیاز برنامه نوشته شوند).
- کدهایی که با true شدن شرط اجرا می شوند بیش از چند خط باشند (بهتر است کدهای طولانی را بین بلاک های if else قرار دهیم).
- بررسی و مقایسه ی بیش از یک متغیر در شرط مورد نیاز باشد (گفتیم که عموما در دستور switch صرفا یک متغیر به عنوان کلید مقایسه استفاده می شود).
- عملیاتی به غیر از عملگر === مورد نیاز باشد (اگرچه می توانیم دستور switch را به گونه ای بنویسیم که عملگرهای مقایسه ای به جزء عملگر پیش فرض === در آن استفاده شود، اما استفاده از if else در این شرایط ساده تر است و ارجحیت دارد).
استفاده از switch case نیز در شرایط زیر ارجحیت دارد:
- بررسی و مقایسه صرفا به یک متغیر (به عنوان سوئیچ) وابسته باشد.
- حالت های شرطی بیش از چند مورد باشند (شرایطی که ناچار باشیم if else های تو در توی چند لایه تعریف کنیم).
- زمانی که با true شدن شرط چند مقایسه، نتیجه واحد اجرا شود (گفتیم که می توانیم از چند case متوالی برای اجرای عملیات واحد در دستور switch استفاده کنیم).
نکته: در برنامه نویسی پروژه های کاربردی گاهی تصمیم گیری برای انتخاب شیوه بهینه به دلیل وجوه مشترک دستورات دشوار می شود، در این شرایط باید توجه داشته باشیم که کدام روش مزیت های بیشتری در اختیارمان قرار می دهد، هرچند رسیدن به این مهارت تا حدود زیادی نیازمند کسب تجربه کافی در دنیای برنامه نویسی و به طور خاص برنامه نویسی وب است.

مثال و پیش نمایش آنلاین

مباحثی که در آموزش کاربرد دستور switch و case در جاوا اسکریپت (JavaScript) بررسی کردیم را با مثال زیر و پیش نمایش آنلاین آن به پایان می بریم.

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از دستور switch در جاوا اسکریپت (JavaScript)</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 22px;    
}
.date {
    height: 20px;
    width: auto;
    background: #666;
    color: #FFFFFF;
}
</style>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است یا پشتیبانی نمی شود!</noscript>
<div class="date">
<script>
var date = new Date();
var today = date.getDay();
switch(today) {
    case 1:
    document.write("با توجه به تاریخ سیستم، امروز دوشنبه است!<br>");
    break;
    case 2:
    document.write("با توجه به تاریخ سیستم، امروز سه شنبه است!<br>");
    break;
    case 3:
    document.write("با توجه به تاریخ سیستم، امروز چهارشنبه است!<br>");
    break;
    case 4:
    document.write("با توجه به تاریخ سیستم، امروز پنجشنبه ست!<br>");
    break;
    case 5:
    document.write("با توجه به تاریخ سیستم، امروز جمعه است!<br>");
    break;
    case 6:
    document.write("با توجه به تاریخ سیستم، امروز شنبه است!<br>");
    break;
    case 7:
    document.write("با توجه به تاریخ سیستم، امروز یکشنبه است!<br>");
    break;            
    default:  
    document.write("بروز مشکل در نمایش تاریخ سیستم!<br>");
}
</script>
</div>
- در این نمونه کد مقدار متغیر switch با یکی از case های آن مقایسه شده و در صورت برقرار بودن و true شدن رابطه، کد مربوط به آن مورد اجرا می شود.<br>
- متد getDay بر اساس تاریخ میلادی سیستم کاربر، روز متناظر از روزهای هفته را به صورت عدد 1 الی 7 برمی گرداند.<br>
<hr>
<script>
function checkLangDirection(id){
    var select_elm = document.getElementById(id);
    var option_value = select_elm.options[select_elm.selectedIndex].value;
    
    switch(option_value) {
        case 'Fa':
        case 'Ar':
        alert("RTL!");
        break;
        case 'En':
        case 'Fr':
        alert("LTR!");
        break;
    }
}
</script>
<label for="lang">انتخاب یک زبان:</label>
<select name="lang" id="lang">
<option value="Fa">Fa</option>
<option value="En">En</option>
<option value="Ar">Ar</option>
<option value="Fr">Fr</option>
</select>
<button onclick="checkLangDirection('lang')">بررسی جهت نوشتار</button>
<br>
- در این نمونه کد دستور switch و case های متوالی را در تابع فرضی checkLangDirection استفاده و به کمک رویداد onclick تابع را فراخوانی نموده ایم.<br>
- در خصوص توابع و رویدادها در آموزش های پیش رو به صورت مفصل صحبت خواهیم کرد.
</body>
</html>

پیش نمایش آنلاین