عملگرهای زیادی در جاوااسکریپت وجود دارد که یکی از آنها عملگر ternary است. در این مقاله قصد داریم تا با این عملگر بیشتر آشنا شویم و بدانیم استفاده از آن چگونه میتواند هنگام ساخت برنامهها مفید باشد.
عملگر ternary در جاوااسکریپت یک عملگر شرطی است که هر یک از دو عبارت، یک عبارت true و یک عبارت false را بر اساس یک عبارت شرطی که ما ارائه میکنیم ارزیابی میکند.
در ادامه یک سینتکس داریم:
condition ? trueExpression : falseExpression
ما شرطی را داریم که مقدار true یا false برمیگرداند. مقادیر درست در اینجا شامل مقادیر true
و non false است و مقادیر نادرست هم عبارتند از false
، null
، ۰
و غیره.
بعد از شرط، یک علامت سوال داریم که میتوانیم آن را به عنوان “پرسش شرط” در نظر بگیریم، و به دنبال آن هم trueExpression. این عبارت در صورتی اجرا میشود که عبارت شرط true
ارزیابی شود.
بعد از عبارت true، یک :
و به دنبال آن falseExpression داریم. این عبارت در صورتی اجرا میشود که عبارت شرط false
ارزیابی شود.
عملگر ternary مقداری را return میکند که میتوانیم آن را به یک متغیر نسبت دهیم. باید به این نکته توجه کنیم که بدون تخصیص مقدار بازگشتی به یک متغیر نمیتوانیم از عملگر استفاده کنیم:
const result = condition ? trueExpression : falseExpression
مقدار بازگشتی به ارزیابی عبارت شرط بستگی دارد. اگر شرط true
باشد، مقدار بازگشتی از trueExpression به متغیر اختصاص داده میشود. در غیر این صورت، مقدار بازگشتی از falseExpression به متغیر اختصاص داده میشود.
عملگر ternary میتواند در برخی موارد جایگزین خوبی برای دستورif
باشد. این موضوع باعث میشود تا بتوانیم کد خود را کوتاهتر، تمیزتر و خواناتر بنویسیم.
در ادامه یک مثال را باهم بررسی میکنیم:
const score = 80 let scoreRating if (score > 70) { scoreRating = "Excellent" } else { scoreRating = "Do better" } console.log(scoreRating) // "Excellent"
ما در این مثال یک متغیر score
با مقدار ۸۰ و یک متغیر scoreRating
داریم. سپس یک دستور if
داریم که score > 70
را بررسی میکند. اگر این شرط true
ارزیابی شود، مقدار “Excellent“ و در غیر این صورت مقدار “Do better“ به متغیر scoreRating
تخصیص داده میشود.
ما میتوانیم این کد را با استفاده از عملگر ternary بهبود دهیم.
همانطور که میدانیم سینتکس عملگر ternary عبارت است از: عبارت شرطی، علامت سوال، عبارت true، : و در نهایت عبارت false. با توجه به این موضوع اکنون مثالی که داریم به صورت زیر خواهد بود:
const score = 80 const scoreRating = score > 70 ? "Excellent" : "Do better" console.log(scoreRating) // Excellent
این روشی است که ما از عملگر ternary استفاده میکنیم. عبارات true و false در اینجا رشتههایی هستند که بسته به شرط ما، یعنی score > 70
به متغیر scoreRating
تخصیص داده میشوند.
عبارت true و false میتواند هر نوع عبارتی از اجرای تابع گرفته تا عملیات محاسباتی و غیره باشد. در ادامه یک مثال داریم که اجرای یک تابع را نشان میدهد:
function printPoor() { console.log("Poor result") return "poor" } function printSuccess() { console.log("Nice result") return "success" } const pass = false; const result = pass ? printSuccess() : printPoor() // Poor result (console.log executed) console.log(result) // poor
اینجا میبینیم که وقتی شرط مقدار false
را برمیگرداند، عبارت printPoor()
اجرا میشود که Poor result
را در کنسول چاپ میکند. از آنجایی که عبارت false
مقدار poor
را برمیگرداند، میتوانیم آن مقدار را که به متغیر result
تخصیص داده و مشاهده کنیم.
در ادامه مقاله برای سادگی کار از عبارات true و false رشتهای استفاده میکنیم.
اگر بخواهیم به یک عبارت if...else if...else
با عملگر ternary دست پیدا کنیم، چه کاری باید انجام دهیم؟ برای این کار میتوانیم از عملگرهای ternary تودرتو استفاده کنیم. با این حال، باید مراقب نحوه استفاده از آن باشیم، زیرا میتواند خواندن کد ما را سختتر کند.
در ادامه یک مثال را باهم بررسی میکنیم:
const score = 60 let scoreRating if (score > 70) { scoreRating = "Excellent" } else if (score > 50) { scoreRating = "Average" } else { scoreRating = "Do better" } console.log(scoreRating) // "Average"
ما اینجا یک عبارت if-else-if-else
داریم که در آن ابتدا شرط score > 70
را بررسی میکنیم. اگر این شرط مقدار true
را برگرداند، “Excellent” را به متغیر scoreRating
اختصاص میدهیم. اما اگر شرطی که داریم مقدار false
برگرداند، بررسی می کنیم که score > 50
است یا نه. اگر این شرط دوم مقدار true
را برگرداند، “Average” را به متغیر اختصاص میدهیم، اما اگر این نیز false
را برگرداند، در نهایت(else
) “Do better” را به متغیر تخصیص میدهیم.
اکنون میخواهیم این کار را با عملگر سهتایی انجام دهیم:
const score = 60 const scoreRating = score > 70 ? "Excellent" : score > 50 ? "Average" : "Do better" console.log(scoreRating) // "Average"
همانطور که میبینید ما اینجا دو ?
و دو :
داریم. در عملگر ternary اول، عبارت شرطی score > 70
را بررسی میکنیم. بعد از اولین علامت سوال، عبارت true را داریم که “Excellent” میباشد. بعد از : اول، عبارت بعدی قرار است عبارت false باشد. برای عبارت false، یک عبارت شرطی دیگر با استفاده از عملگر ternary تعریف میکنیم.
شرط دوم در اینجا score > 50
است. بعد از علامت سوال دوم، عبارت true را داریم که “Average” میباشد. پس از : دوم، اکنون یک عبارت false دیگر داریم که شامل “Do better” است.
با این کار، اگر شرط اول true
باشد، “Excellent” به متغیر scoreRating
تخصیص داده میشود. اگر شرط اول false
باشد، یک شرط دیگر را بررسی میکنیم. اگر شرط دوم true
باشد، “Average” به متغیر برگردانده میشود. اما اگر این شرط دوم نیز false
باشد، عبارت false نهایی “Do better” را داریم که به متغیر تخصیص پیدا میکند.
در مثالهای قبلی دیدیم که چگونه میتوانیم کد خود را با حفظ خوانایی بهبود دهیم. اما هنگام استفاده از چندین عملگر ternary خیلی باید مراقب باشیم.
تصور کنید در مثال قبلی یک عملگر ternary اضافهتر داشتیم:
const score = 45 const scoreRating = score > 70 ? "Excellent" : score > 50 ? "Average" : score > 40 ? "Fair" : "Do better" console.log(scoreRating) // "Fair"
در اینجا ما سه عملگر ternary داریم و میتوانیم ببینیم که خواندن کدها نسبت به قبل سختتر شده است.
در چنین مواردی که به چندین شرط نیاز داریم، استفاده از دستور if
یا switch
بهتر است. اگرچه استفاده از این روشها تعداد خط کد طولانیتری دارند، اما باعث میشوند کد خواناتری داشته باشیم.
عملگر ternary این امکان را به ما میدهد تا بتوانیم عبارات شرطی را ارزیابی کنیم و در برخی موارد حتی میتواند جایگزین دستور if
شود. این موضوع به ما کمک میکند تاکد کوتاهتر (حتی در یک خط) و تمیزتر بنویسیم.
در این مقاله سعی کردیم مثالهایی را ا استفاده از if
و عملگر ternary در جاوااسکریپت بررسی کرده و با نحوه کارکرد آنها آشنا شویم. همچنین باید به این نکته توجه کنیم که هنگام استفاده از عملگرهای ternary تودرتو خیلی مراقب باشیم زیرا در این صورت کد ما ممکن است از خوانایی قابل قبولی برخوردار نباشد.
۵۰ درصد تخفیف ویژه پاییز فرانت کست تا پایان هفته
کد تخفیف: atm