عملگر سه تایی (Ternary) (ES6 Ternary Operator)

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

آشنایی با عملگر سه تایی در ES6

عملگر سه تایی (Ternary Operator) یک عملگر شرطی فشرده است. به جای ساختار کامل if و else، از یک عبارت کوتاه استفاده می کنی. شکل کلی آن این است: condition ? exprTrue : exprFalse. اگر شرط true باشد، بخش اول اجرا می شود، در غیر این صورت بخش دوم اجرا می شود.

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

مقایسه if/else با عملگر سه تایی

اول نسخه معمولی با if و else را ببینیم. این کد بررسی می کند کاربر authenticated است یا نه و براساس آن تابع مناسب را صدا می زند.

کد قبل از استفاده از عملگر سه تایی

if (authenticated) {
  renderApp();
} else {
  renderLogin();
}

مشاهده در ادیتور

در این حالت، اگر authenticated برابر true باشد، تابع renderApp() اجرا می شود. اگر false باشد، تابع renderLogin() اجرا می شود. ساختار واضح است، اما چند خط جا می گیرد و در JSX ممکن است شلوغ به نظر برسد.

همان منطق با عملگر سه تایی

حالا دقیقا همان منطق را با عملگر سه تایی در ES6 می نویسیم. نتیجه یک خط تمیز است که همان کار را انجام می دهد.

authenticated ? renderApp() : renderLogin();

مشاهده در ادیتور

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

استفاده از عملگر سه تایی در ری اکت

در ری اکت معمولا می خواهی بر اساس یک شرط، دو حالت مختلف نمایش دهی. عملگر سه تایی در ES6 دقیقا برای همین موقعیت عالی است. مثلا در JSX می توانی بین یک متن خوش آمدگویی و فرم ورود یکی را نشان بدهی.

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

اگر این صفحه را بعدا لازم داشتی، می توانی آدرس عملگر سه تایی در ES6 را نگه داری. هر زمان درباره شرط های کوتاه سؤال داشتی، دوباره به همین راهنما برگرد.

تمرین کوتاه با عملگر سه تایی

برای این که عملگر سه تایی در ES6 برایت جا بیفتد، این چند قدم را انجام بده.

1. یک متغیر بولی مثل isStudent تعریف کن و true یا false بده.
2. همان شرط را یک بار با if و else بنویس و یک پیام در کنسول چاپ کن.
3. حالا همان منطق را با یک عملگر سه تایی بنویس و نتیجه را در کنسول چاپ کن.

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

جمع بندی سریع

• عملگر سه تایی در ES6 نسخه کوتاه if و else است.
• شکل کلی آن این است: شرط ? نتیجه اگر درست : نتیجه اگر غلط.
• برای انتخاب بین دو حالت ساده، عالی و خواناست.
• در ری اکت برای نمایش شرطی JSX زیاد استفاده می شود.
• اگر شرطت پیچیده شد، به if و else معمولی برگرد.