هنگامی که در حال نوشتن یک برنامه هستید، ممکن است موقعیتی پیش بیاید که نیاز داشته باشید از بین چندین گزینه بر اساس شرایط مختلف یکی را انتخاب کنید. در این موارد شما نیاز به استفاده از جملات شرطی دارید که به برنامه ی شما اجازه میدهند تصمیم صحیحی گرفته و کار درستی را انجام دهد.

آشنایی با دستور if-else

JavaScript از جملات شرطی که برای انجام کار های مختلف بر اساس شرایط مختلف استفاده میشوند، پشتیبانی میکند.  در این مقاله ما به آموزش عبارت if…else خواهیم پرداخت.

فلوچارت عبارت if-else

فلوچارت زیر نحوه ی عملکرد عبارت if-else را نشان میدهد.


if
جاوا اسکریپت از شکل های مختلف عبارت if-else که در زیر آمده است پشتیبانی میکند :

  • عبارت if
  • عبارت if...else
  • عبارت ...if...else if

عبارت if

عبارت if اساسی ترین عبارت کنترلی است که به جاوا اسکریپت اجازه میدهد تصمیم بگیرد و دستوری را براساس شروطی اجرا کند.
قاعده ی نوشتاری عبارت if به شکلی است که در زیر آمده است :

if (expression){
   Statement(s) to be executed if expression is true
}

در اینجا یک عبارت جاوا اسکریپت ارزیابی میشود. اگر مقدار نتیجه برابر با true باشد، دستورات داخل بدنه ی if اجرا میشوند. اگر مقدار نتیجه برابر false باشد، هیچ دستوری اجرا نمیشود. در بیشتر مواقع شما از عملگر های مقایسه ای در هنگام تصمیم گیری استفاده میکنید.

برای مشاهده ی نحوه ی عملکرد عبارت شرطی if به مثال زیر توجه کنید :

<html>
   <body>
      
      <script type="text/javascript">
         
            var age = 20;
         
            if( age > 18 ){
               document.write("<b>Qualifies for driving</b>");
            }
         
      </script>
      
   </body>
</html>

خروجی به شکل زیر است :

Qualifies for driving

عبارت if...else

عبارت 'if...else' شکل بعدی از عبارت کنترلی if است که به جاوا اسکریپت اجازه اجرای دستورات را به طریق کنترل شده تری میدهد.
قاعده ی نوشتاری عبارت if...else به شکلی است که در زیر آمده است :

if (expression){
   Statement(s) to be executed if expression is true
}

else{
   Statement(s) to be executed if expression is false
}

در اینجا یک عبارت جاوا اسکریپت ارزیابی میشود. اگر مقدار نتیجه برابر با true باشد، دستورات آورده شده در بدنه ی عبارت if اجرا میشوند. اگر نتیجه false باشد، دستورات آورده شده در بدنه ی عبارت else اجرا میشوند.

نمونه کد زیر نحوه ی پیاده سازی عبارت if...else در جاوا اسکریپت را نشان میدهد :

<html>
   <body>
   
      <script type="text/javascript">
       
            var age = 15;
         
            if( age > 18 ){
               document.write("<b>Qualifies for driving</b>");
            }
            
            else{
               document.write("<b>Does not qualify for driving</b>");
            }
        
      </script>
      
   </body>
</html>

خروجی به شکل زیر است :

Does not qualify for driving

عبارت ...if...else if

عبارت ...if...else if شکل پیشرفته ای از عبارت if...else است که به جاوا اسکریپت اجازه میدهد براساس چندین شرط تصمیم درست را اتخاذ کند.

قاعده ی نوشتاری عبارت ...if...else if  به شکلی است که در زیر آمده است :

if (expression 1){
   Statement(s) to be executed if expression 1 is true
}

else if (expression 2){
   Statement(s) to be executed if expression 2 is true
}

else if (expression 3){
   Statement(s) to be executed if expression 3 is true
}

else{
   Statement(s) to be executed if no expression is true
}

چیز خاصی در مورد کد بالا وجود ندارد. نمونه کد بالا فقط یک سری عبارات if است که هر if  قسمتی از عبارت else دستور قبلی است. دستورات براساس درست بودن شروط اجرا میشوند، اگر هیچکدام از شروط صحیح نباشد ، بلاک else اجرا میشود.

نمونه کد زیر نحوه ی پیاده سازی عبارت if...else if... در جاوا اسکریپت را نشان میدهد :

<html>
   <body>
   
      <script type="text/javascript">
       
            var book = "maths";
            if( book == "history" ){
               document.write("<b>History Book</b>");
            }
         
            else if( book == "maths" ){
               document.write("<b>Maths Book</b>");
            }
         
            else if( book == "economics" ){
               document.write("<b>Economics Book</b>");
            }
         
            else{
               document.write("<b>Unknown Book</b>");
            }
         
      </script>
      
   </body>
<html>

خروجی به شکل زیر است :

Maths Book

بروز رسانی مقاله ی دستور شرطی if...else در جاوا اسکریپت - منتشر شده در 15 خرداد ۱۳۹۷

در بعضی از مواقع بسته به شرایط نیاز داریم از بین چندین عمل یکی را انتخاب کنیم. در زبان جاوا اسکریپت برای این کار می‌توان از عبارت if و یا از عملگر سه تایی (: ?) استفاده کرد.

عبارت if

عبارت if شرطی را می پذیرد ، آن را ارزیابی کرده و در صورتی که آن شرط صحیح ارزیابی شود، دستورات داخل بدنه ی خود را اجرا میکند. برای مثال : 

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year == 2015) alert( 'You are right!' );

در نمونه مثال فوق شرط عبارت if یک مقایسه ساده است :  year == 2015 .

اما این شرط می‌تواند پیچیده تر از این باشد. اگر بدنه ی عبارت if شامل بیش از یک دستور اجرایی باشد باید دستورات داخل کروشه ها { } قرار بگیرند :

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

پیشنهاد می‌کنیم همیشه دستورات بدنه عبارت if را داخل کروشه ها { } قرار دهید. این مورد حتی در صورتی که بدنه ی عبارت if شامل یک دستور نیز باشد به خوانایی کد شما کمک خواهد کرد.

تبدیل به Boolean

عبارت if شروط موجود در پرانتز ها را ارزیابی کرده و نتیجه را به یک مقدار منطقی Boolean تبدیل می‌کند.

قوانین تبدیل را از فصل مربوط به تبدیل انواع به یاد آورید :

  • عدد صفر ، رشته خالی " " ، null ، undefined و NaN به مقدار false تبدیل خواهند شد.
  • دیگر مقادیر به مقدار صحیح true تبدیل می‌شوند.

بنابراین دستورات بدنه عبارت if در مثال زیر هیچ گاه اجرا نخواهد شد :

if (0) { // 0 is falsy
  ...
}

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

if (1) { // 1 is truthy
  ...
}

میتوان مقدار ارزیابی شده را مستقیما برای عبارت if ارسال کرد :

let cond = (year == 2015); // equality evaluates to true or false

if (cond) {
  ...
}

 

جمله "else" (در غیر این صورت)

عبارت if می‌تواند شامل جمله اختیاری else نیز باشد. دستورات موجود در بدنه else در صورتی که شرط عبارت if ناصحیح ارزیابی شود، اجرا خواهند شد. برای مثال :

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year == 2015) {
  alert( 'You guessed it right!' );
} else {
  alert( 'How can you be so wrong?' ); // any value except 2015
}

چندین شرط : "else if"

در بعضی از مواقع نیاز داریم چندین نوع شرط را بررسی کنیم. برای این کار می توان از جمله else ifاستفاده کرد برای مثال :

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year < 2015) {
  alert( 'Too early...' );
} else if (year > 2015) {
  alert( 'Too late' );
} else {
  alert( 'Exactly!' );
}

در نمونه مثال بالا جاوا اسکریپت ابتدا شرط year < 2015 را بررسی می‌کند. اگر شرط ناصحیح ارزیابی شود به سراغ شرط بعدی year > 2015 می رود و آن را ارزیابی می‌کند. هر کدام از شرط‌ ها صحیح ارزیابی شوند بدنه آنها اجرا خواهد شد. در صورتی که هیچ کدام ازشرط ها صحیح ارزیابی نشوند دستورات داخل جمله else اجرا می‌شود.

میتوان هر تعداد جمله else if را به کاربرد. جمله else پایانی اختیاری است.

عملگر سه تایی  (: ?)

در بعضی مواقع نیاز به انتساب یک متغیر در شرایط مختلف را داریم برای مثال : 

let accessAllowed;
let age = prompt('How old are you?', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

در نمونه مثال بالا اگر متغیر age بزرگتر از 18 باشد مقدار true در متغیر accessAllowed قرار می گیرد. در غیر این صورت این متغیر با مقدار false مقدار دهی می شود. با استفاده از عملگر سه تایی (: ?)  همین عمل را میتوان ساده تر و کوتاه تر انجام داد. سه تایی بودن به این معناست که این عملگر سه عملوند دارد. در جاوا اسکریپت اولین و تنها عملگری که سه عملوند را میپذیرد عملگر سه تایی شرطی  (: ?) است.

قاعده نوشتاری این عملگر به این شکل است :

let result = condition ? value1 : value2

شرط condition ارزیابی می‌شود اگر صحیح(true) بود مقدار value1 و در غیر این صورت اگر ناصحیح (false) بود ، مقدار value2 بر خواهد گشت. مثال ذکر شده در بالا را می توان به شکل زیر بازنویسی کرد :

let accessAllowed = (age > 18) ? true : false;

از نظر تکنیکی می‌توان پرانتزهای اطراف شرط را نادیده گرفت : age > 18 . علامت سوال در عملگر سه تایی دارای اولویت تقدم کمتری است. در نتیجه  مشکلی با حذف پرانتز ها پیش نمی یاید:

// the comparison operator "age > 18" executes first anyway
// (no need to wrap it into parentheses)
let accessAllowed = age > 18 ? true : false;

با این حال استفاده از پرانتز ها به خوانایی کد شما کمک خواهند کرد و پیشنهاد می شود همیشه از آنها استفاده کنید.

استفاده از چندین عملگر سه تایی شرطی در داخل هم

زنجیره‌ای از عملگر های سه تایی شرطی اجازه بررسی چندین شرط را به ما خواهند داد. برای مثال :

let age = prompt('age?', 18);

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';

alert( message );

در نمونه مثال بالا :

  • عملگر سه تایی شرطی ابتدا بررسی می‌کند که age < 3 صحیح است یا خیر.
  • اگر صحیح (true) باشد مقدار 'Hi, baby!' را برمیگرداند. در غیر اینصورت به دستور بعد از ":" رجوع می‌کند و شرط سنی age < 18 را بررسی می‌کند.
  • اگر صحیح (true) باشد مقدار 'Hello!' را برمیگرداند. در غیر اینصورت به دستور بعد از ":" دوم رجوع می‌کند و شرط age < 100 را بررسی  می کند.
  • اگر صحیح (true) باشد مقدار 'Greetings!' را برمیگرداند. در غیر اینصورت به دستور بعد از آخرین ":" مراجعه کرده و مقدار 'What an unusual age!' را برمیگرداند.
     

چنین منطقی را می توان با استفاده از دستورات if..else به شکل زیر پیاده سازی کرد :

if (age < 3) {
  message = 'Hi, baby!';
} else if (age < 18) {
  message = 'Hello!';
} else if (age < 100) {
  message = 'Greetings!';
} else {
  message = 'What an unusual age!';
}

استفاده ی نادرست از عملگر سه تایی به جای عبارت if 

در بعضی از مواقع از عملگرهای سه تایی (: ?) به عنوان جایگزینی برای عبارت if استفاده میشود :

let company = prompt('Which company created JavaScript?', '');

(company == 'Netscape') ?
   alert('Right!') : alert('Wrong.');

در مثال بالا بسته به شرط company == 'Netscape' ، دستور بعد از علامت سوال و یا دستور بعد از  : (کالن) اجرا خواهد شد. در این مورد ما نتیجه را به متغیری انتساب نمیدهیم. و هدف اجرای دستوری بر اساس یک شرط است. استفاده از عملگر سه تایی در این مورد صحیح نیست. ممکن است این کد به نسبت استفاده از عبارت if کوتاه تر باشد اما از خوانایی کد می‌کاهد. نمونه مثال بالا را میتوان با استفاده از عبارت if به شکل زیر بازنویسی کرد :

let company = prompt('Which company created JavaScript?', '');

if (company == 'Netscape') {
  alert('Right!');
} else {
  alert('Wrong.');
}

 کد بالا دارای خوانایی بیشتری  است. 

ایده استفاده از عملگر سه تایی شرطی برگشت مقداری بر اساس یک شرط است. پس از آن در این مورد باید استفاده کرد.