عملگر Ternary در جاوااسکریپت

سودا مجتهدی

دی 26, 1401

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

عملگر Ternary چیست؟

عملگر ternary در جاوااسکریپت یک عملگر شرطی است که هر یک از دو عبارت، یک عبارت true و یک عبارت false را بر اساس یک عبارت شرطی که ما ارائه می‌کنیم ارزیابی می‌کند.

در ادامه یک سینتکس داریم:

condition ? trueExpression : falseExpression

condition ? trueExpression : falseExpression

ما شرطی را داریم که مقدار true یا false برمی‌گرداند. مقادیر درست در اینجا شامل مقادیر

true

trueو non false است و مقادیر نادرست هم عبارتند از

false

false،

null

null،

۰و غیره.

بعد از شرط، یک علامت سوال داریم که می‌توانیم آن را به عنوان “پرسش شرط” در نظر بگیریم، و به دنبال آن هم trueExpression. این عبارت در صورتی اجرا می‌شود که عبارت شرط

true

true ارزیابی شود.

بعد از عبارت true، یک

:و به دنبال آن falseExpression داریم. این عبارت در صورتی اجرا می‌شود که عبارت شرط

false

falseارزیابی شود.

عملگر ternary مقداری را return می‌کند که می‌توانیم آن را به یک متغیر نسبت دهیم. باید به این نکته توجه کنیم که بدون تخصیص مقدار بازگشتی به یک متغیر نمی‌توانیم از عملگر استفاده کنیم:

const result = condition

? trueExpression

: falseExpression

const result = condition ? trueExpression : falseExpression

const result = condition
  ? trueExpression
  : falseExpression

مقدار بازگشتی به ارزیابی عبارت شرط بستگی دارد. اگر شرط

true

trueباشد، مقدار بازگشتی از trueExpression به متغیر اختصاص داده می‌شود. در غیر این صورت، مقدار بازگشتی از falseExpression به متغیر اختصاص داده می‌شود.

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

عملگر ternary می‌تواند در برخی موارد جایگزین خوبی برای دستور

ifباشد. این موضوع باعث می‌شود تا بتوانیم کد خود را کوتاه‌تر، تمیزتر و خواناتر بنویسیم.

در ادامه یک مثال را باهم بررسی می‌کنیم:

const score = 80

let scoreRating

if (score > 70) {

scoreRating = "Excellent"

} else {

scoreRating = "Do better"

}

console.log(scoreRating)

// "Excellent"

const score = 80 let scoreRating if (score > 70) { scoreRating = "Excellent" } else { scoreRating = "Do better" } console.log(scoreRating) // "Excellent"

const score = 80
let scoreRating

if (score > 70) {
  scoreRating = "Excellent"
} else {
  scoreRating = "Do better"
}

console.log(scoreRating)
// "Excellent"

ما در این مثال یک متغیر

score

scoreبا مقدار ۸۰ و یک متغیر

scoreRating

scoreRatingداریم. سپس یک دستور

ifداریم که

score > 70

score > 70را بررسی می‌کند. اگر این شرط

true

trueارزیابی شود، مقدار “Excellent“ و در غیر این صورت مقدار “Do better“ به متغیر

scoreRating

scoreRating تخصیص داده می‌شود.

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

همانطور که می‌دانیم سینتکس عملگر ternary عبارت است از: عبارت شرطی، علامت سوال، عبارت true، : و در نهایت عبارت false. با توجه به این موضوع اکنون مثالی که داریم به صورت زیر خواهد بود:

const score = 80

const scoreRating =

score > 70 ? "Excellent" : "Do better"

console.log(scoreRating)

// Excellent

const score = 80 const scoreRating = score > 70 ? "Excellent" : "Do better" console.log(scoreRating) // Excellent

const score = 80

const scoreRating =
  score > 70 ? "Excellent" : "Do better"

console.log(scoreRating)
// Excellent

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

score > 70

score > 70به متغیر

scoreRating

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

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

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

falseرا برمی‌گرداند، عبارت

printPoor()

printPoor()اجرا می‌شود که

Poor result

Poor resultرا در کنسول چاپ می‌کند. از آنجایی که عبارت

false

falseمقدار

poor

poorرا برمی‌گرداند، می‌توانیم آن مقدار را که به متغیر

result

resultتخصیص داده و مشاهده کنیم.

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

نحوه استفاده از عملگرهای Ternary تودرتو

اگر بخواهیم به یک عبارت

if...else if...else

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"

const score = 60 let scoreRating if (score > 70) { scoreRating = "Excellent" } else if (score > 50) { scoreRating = "Average" } else { scoreRating = "Do better" } console.log(scoreRating) // "Average"

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

if-else-if-elseداریم که در آن ابتدا شرط

score > 70

score > 70را بررسی می‌کنیم. اگر این شرط مقدار

true

trueرا برگرداند، “Excellent” را به متغیر

scoreRating

scoreRatingاختصاص می‌دهیم. اما اگر شرطی که داریم مقدار

false

falseبرگرداند، بررسی می کنیم که

score > 50

score > 50است یا نه. اگر این شرط دوم مقدار

true

true را برگرداند، “Average” را به متغیر اختصاص می‌دهیم، اما اگر این نیز

false

false را برگرداند، در نهایت(

else

else) “Do better” را به متغیر تخصیص می‌دهیم.

اکنون می‌خواهیم این کار را با عملگر سه‌‌تایی انجام دهیم:

const score = 60

const scoreRating =

score > 70

? "Excellent"

: score > 50

? "Average"

: "Do better"

console.log(scoreRating)

// "Average"

const score = 60 const scoreRating = score > 70 ? "Excellent" : score > 50 ? "Average" : "Do better" console.log(scoreRating) // "Average"

const score = 60

const scoreRating =
  score > 70
    ? "Excellent"
    : score > 50
    ? "Average"
    : "Do better"

console.log(scoreRating)
// "Average"

همانطور که می‌بینید ما اینجا دو

?و دو

:داریم. در عملگر ternary اول، عبارت شرطی

score > 70

score > 70را بررسی می‌کنیم. بعد از اولین علامت سوال، عبارت true را داریم که “Excellent” می‌باشد. بعد از : اول، عبارت بعدی قرار است عبارت false باشد. برای عبارت false، یک عبارت شرطی دیگر با استفاده از عملگر ternary تعریف می‌کنیم.

شرط دوم در اینجا

score > 50

score > 50است. بعد از علامت سوال دوم، عبارت true را داریم که “Average” می‌باشد. پس از : دوم، اکنون یک عبارت false دیگر داریم که شامل “Do better” است.

با این کار، اگر شرط اول

true

trueباشد، “Excellent” به متغیر

scoreRating

scoreRatingتخصیص داده می‌شود. اگر شرط اول

false

falseباشد، یک شرط دیگر را بررسی می‌کنیم. اگر شرط دوم

true

true باشد، “Average” به متغیر برگردانده می‌شود. اما اگر این شرط دوم نیز

false

false باشد، عبارت false نهایی “Do better” را داریم که به متغیر تخصیص پیدا می‌کند.

استفاده از چندین عملگر Ternary می‌تواند کد ما را غیرقابل خواندن کند

در مثال‌های قبلی دیدیم که چگونه می‌توانیم کد خود را با حفظ خوانایی بهبود دهیم. اما هنگام استفاده از چندین عملگر ternary خیلی باید مراقب باشیم.

تصور کنید در مثال قبلی یک عملگر ternary اضافه‌تر داشتیم:

const score = 45

const scoreRating =

score > 70

? "Excellent"

: score > 50

? "Average"

: score > 40

? "Fair"

: "Do better"

console.log(scoreRating)

// "Fair"

const score = 45 const scoreRating = score > 70 ? "Excellent" : score > 50 ? "Average" : score > 40 ? "Fair" : "Do better" console.log(scoreRating) // "Fair"

const score = 45

const scoreRating =
  score > 70
    ? "Excellent"
    : score > 50
    ? "Average"
    : score > 40
    ? "Fair"
    : "Do better"

console.log(scoreRating)
// "Fair"

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

در چنین مواردی که به چندین شرط نیاز داریم، استفاده از دستور

ifیا

switch

switchبهتر است. اگرچه استفاده از این روش‌ها تعداد خط کد طولانی‌تری دارند، اما باعث می‌شوند کد خواناتری داشته باشیم.

جمع‌بندی

عملگر ternary این امکان را به ما می‌دهد تا بتوانیم عبارات شرطی را ارزیابی کنیم و در برخی موارد حتی می‌تواند جایگزین دستور

ifشود. این موضوع به ما کمک می‌کند تاکد کوتاه‌تر (حتی در یک خط) و تمیزتر بنویسیم.

در این مقاله سعی کردیم مثال‌هایی را ا استفاده از

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

دیدگاه‌ها:

افزودن دیدگاه جدید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.