▎شاخه‌بندی شرطی: if و '?'

گاهی اوقات، نیاز داریم که بر اساس شرایط مختلف، اقدامات متفاوتی انجام دهیم. برای این کار می‌توانیم از دستور if و عملگر شرطی '?' که به آن عملگر "علامت سوال" نیز گفته می‌شود، استفاده کنیم.

▎دستور "if"

دستور if(...) یک شرط را در پرانتز ارزیابی می‌کند و اگر نتیجه درست بود، یک بلوک کد را اجرا می‌کند.

به عنوان مثال:

در مثال بالا، شرط یک بررسی ساده برابری (year == 2015) است، اما می‌تواند بسیار پیچیده‌تر باشد.

اگر بخواهیم چندین دستور را اجرا کنیم، باید کد خود را داخل آکولادها {} قرار دهیم:

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

▎تبدیل بولی

دستور if (...) عبارت موجود در پرانتز را ارزیابی کرده و نتیجه را به یک مقدار بولی تبدیل می‌کند.

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

یک عدد 0، یک رشته خالی ""، null، undefined و NaN همگی به false تبدیل می‌شوند. به همین دلیل به آن‌ها "مقادیر کاذب" (falsy) گفته می‌شود.

سایر مقادیر به true تبدیل می‌شوند، بنابراین به آن‌ها "مقادیر حقیقی" (truthy) گفته می‌شود.

بنابراین، کد زیر هرگز اجرا نخواهد شد:

و در داخل این شرط – همیشه اجرا خواهد شد:

ما همچنین می‌توانیم یک مقدار بولی از پیش ارزیابی شده را به if پاس دهیم، مانند این:

▎بخش "else"

دستور if ممکن است شامل یک بلوک else اختیاری باشد. این بلوک زمانی اجرا می‌شود که شرط نادرست باشد.

به عنوان مثال:

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

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

به عنوان مثال:

در کد بالا، جاوااسکریپت ابتدا بررسی می‌کند که آیا year < 2015. اگر این نادرست باشد، به شرط بعدی year > 2015 می‌رود. اگر آن هم نادرست باشد، آخرین هشدار را نشان می‌دهد.

می‌توان بلوک‌های else if بیشتری داشت. آخرین else اختیاری است.

▎عملگر شرطی ‘?’

گاهی اوقات، نیاز داریم که یک متغیر را بسته به یک شرط اختصاص دهیم.

به عنوان مثال:

عملگر معروف به "شرطی" یا "علامت سوال" به ما اجازه می‌دهد که این کار را به روشی کوتاه‌تر و ساده‌تر انجام دهیم.

این عملگر با یک علامت سوال ? نمایش داده می‌شود. گاهی اوقات به آن "ternary" نیز گفته می‌شود، زیرا این عملگر سه عملوند دارد. در واقع، این تنها عملگری در جاوااسکریپت است که این تعداد عملوند دارد.

سینتکس آن به صورت زیر است:

شرط ارزیابی می‌شود: اگر درست باشد، value1 بازگشت داده می‌شود، در غیر این صورت – value2.

به عنوان مثال:

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

این مثال همان کار را انجام خواهد داد:

اما پرانتزها کد را خواناتر می‌کنند، بنابراین توصیه می‌کنیم از آن‌ها استفاده کنید.

❕ توجه داشته باشید:

در مثال بالا، شما می‌توانید از استفاده از عملگر علامت سوال اجتناب کنید زیرا خود مقایسه true/false برمی‌گرداند:

▎چندگانه ’?’

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

به عنوان مثال:

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

1. اولین علامت سوال بررسی می‌کند که آیا age < 3.

2. اگر درست باشد – 'سلام، بچه!' را بازمی‌گرداند. در غیر این صورت، ادامه می‌دهد به عبارت بعد از دو نقطه “:”، و age < 18 را بررسی می‌کند.

3. اگر آن هم درست باشد – 'سلام!' را بازمی‌گرداند. در غیر این صورت، ادامه می‌دهد به عبارت بعدی بعد از دو نقطه “:”، و age < 100 را بررسی می‌کند.

4. اگر آن هم درست باشد – 'درود!' را بازمی‌گرداند. در غیر این صورت، ادامه می‌دهد به عبارت بعد از آخرین دو نقطه “:”، و 'چه سنی غیرمعمول!' را بازمی‌گرداند.

این نحوه نمایش با استفاده از if..else است:

▎استفاده غیرسنتی از ’?’

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

بسته به اینکه آیا company == 'Netscape'، یکی از دو عبارت اول یا دوم بعد از ? اجرا شده و یک هشدار نشان داده می‌شود.

ما در اینجا نتیجه‌ای را به یک متغیر اختصاص نمی‌دهیم. در عوض، کدهای مختلفی را بسته به شرط اجرا می‌کنیم.

استفاده از عملگر علامت سوال به این روش توصیه نمی‌شود.

این نوشتار کوتاه‌تر از دستور معادل if است که برای برخی برنامه‌نویسان جذاب است. اما خوانایی آن کمتر است.

▎شاخه‌بندی شرطی: if و '?'

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

هدف از عملگر علامت سوال ? این است که یک مقدار یا دیگری را بسته به شرایط خود بازگرداند. لطفاً از آن فقط برای همین منظور استفاده کنید. از if زمانی استفاده کنید که نیاز به اجرای شاخه‌های مختلف کد داشته باشید.

▎چگونه در جاوااسکریپت عبارات شرطی بنویسیم

▎مقدمه

در برنامه‌نویسی، در بسیاری از مواقع شما می‌خواهید بلوک‌های مختلف کد بسته به ورودی کاربر یا عوامل دیگر اجرا شوند.

به عنوان مثال، ممکن است بخواهید یک فرم در صورتی که هر فیلد به درستی پر شده باشد، ارسال شود، اما اگر برخی از فیلدهای الزامی خالی باشند، از ارسال آن جلوگیری کنید. برای رسیدن به چنین وظایفی، ما عبارات شرطی داریم که بخش جدایی‌ناپذیر همه زبان‌های برنامه‌نویسی هستند.

عبارات شرطی یک عمل خاص را بر اساس نتایج یک نتیجه درست یا نادرست اجرا می‌کنند.

چند مثال از عبارات شرطی جاوااسکریپت که ممکن است ببینید شامل موارد زیر است:

• بررسی موقعیت کاربر و نمایش زبان صحیح بر اساس کشور.

• ارسال فرم در زمان ارسال، یا نمایش هشدارها در کنار فیلدهای الزامی خالی.

• باز کردن یک منوی کشویی در رویداد کلیک، یا بستن منوی کشویی اگر قبلاً باز باشد.

• نمایش وب‌سایت فروشنده الکل اگر کاربر بالای سن قانونی نوشیدن باشد.

• نمایش فرم رزرو برای یک هتل اما نه اگر هتل رزرو شده باشد.

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

در این آموزش، ما به بررسی عبارات شرطی خواهیم پرداخت، از جمله کلیدواژه‌های if، else و else if. همچنین اپراتور سه‌گانه را پوشش خواهیم داد.

▎عبارت If

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

عبارت if با کلیدواژه if نوشته می‌شود، که پس از آن یک شرط در پرانتز قرار دارد و کد قابل اجرا در بین آکولادها قرار می‌گیرد. به طور خلاصه، می‌توان آن را به صورت if () {} نوشت.

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

محتوای یک عبارت if باید تو رفتگی داشته باشد و آکولادهایی که بلوک کد را اجرا می‌کنند باید بدون نقطه‌ویرگول پایان یابند، درست مانند یک بلوک تابع.

به عنوان مثال، بیایید یک برنامه خرید را در نظر بگیریم. فرض کنید برای عملکرد این برنامه، کاربری که مبلغ مشخصی را به حساب خود واریز کرده است، می‌خواهد یک کالا از فروشگاه خریداری کند.

ما یک موجودی حساب ۵۰۰ داریم و می‌خواهیم یک جفت شلوار جین به قیمت ۴۰ خریداری کنیم. با استفاده از اپراتور کمتر یا برابر با، می‌توانیم بررسی کنیم که آیا قیمت شلوار جین کمتر یا برابر با مقدار موجودی ما است. از آنجا که jeans <= balance به true ارزیابی می‌شود، شرط برقرار است و بلوک کد اجرا خواهد شد.

در یک مثال جدید، ما یک کالای جدید فروشگاه ایجاد خواهیم کرد که قیمت آن بیشتر از موجودی فعلی است.

این مثال هیچ خروجی ندارد، زیرا phone <= balance به false ارزیابی می‌شود. بلوک کد به سادگی نادیده گرفته می‌شود و برنامه به خط بعدی ادامه می‌دهد.

▎عبارت Else

با عبارات if، ما تنها کدی را اجرا می‌کنیم که وقتی یک عبارت به true ارزیابی شود، اما اغلب ما می‌خواهیم چیزی دیگر اتفاق بیفتد اگر شرط ناموفق باشد.

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

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

با استفاده از همان مثال بالا، می‌توانیم پیامی اضافه کنیم تا اگر موجودی حساب کافی نباشد نمایش داده شود.

از آنجا که شرط if موفق نشد، کد به آنچه در عبارت else وجود دارد منتقل می‌شود.

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