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

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

در اینجا چیزی است که ما پوشش خواهیم داد:

اپراتور سه تایی چیست؟

نحوه استفاده از اپراتور سه تایی

نحوه Refactor کردن اظهارات if-else به اپراتور سه‌گانه

نحوه زنجیر کردن اپراتورهای سه تایی

بهترین روش ها هنگام استفاده از اپراتور سه گانه

نتیجه

اپراتور سه تایی چیست؟

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

برای درک چگونگی کارکرد آن، اجازه دهید نگاهی دقیق تر به نحو آن در زیر بیندازیم:

 conditionalExpression ? truthyValue : falsyValue

از نحو بالا، condionalExpression عبارتی است که به عنوان نقطه ارزیابی عمل می کند و مقدار درستی یا نادرستی را تعیین می کند.

دنبال کردن ? (علامت سوال)، در صورتی که عبارت به درستی ارزیابی شود، مقدار ارائه شده برگردانده می شود، در حالی که اگر عبارت به یک نتیجه نادرست منجر شود، مقدار پس از : (دونقطه) برگردانده می شود.

truthyValue و falsyValue می توانند هر چیزی در جاوا اسکریپت باشند. این می تواند موجودیت های مختلفی مانند توابع، مقادیر ذخیره شده در متغیرها، اشیاء، اعداد، رشته ها و موارد دیگر را در بر گیرد. اپراتور سه تایی به شما این امکان را می دهد که هر مقدار دلخواه را برگردانید و تطبیق پذیری در کد شما ارائه می دهد.

نحوه استفاده از اپراتور سه تایی

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

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

 function canAccessPlatform(age) { const shouldAccess = age >= 18 ? true : false; return shouldAccess; }

از قطعه کد بالا، ما یک تابع به canAccessPlatform ایجاد کردیم که ارزیابی می‌کند که آیا کاربر، که با پارامتر age نشان داده می‌شود، الزامات دسترسی به پلتفرم را برآورده می‌کند یا خیر.

از یک اپراتور سه تایی برای تعیین اینکه آیا سن 18 سال یا بیشتر است، استفاده می‌کند، اگر شرط وجود داشته باشد، true به shouldAccess و در غیر این صورت false می‌دهد. در نهایت، مقدار shouldAccess را برمی‌گرداند که نشان می‌دهد کاربر می‌تواند به پلتفرم دسترسی داشته باشد یا خیر.

اگر سن 18 سال یا بیشتر باشد، عبارت درست می شود، پس عملگر true بعد از ? . در غیر این صورت، false برمی گردد. این نتیجه در یک متغیر ذخیره می شود و سپس از تابع برگردانده می شود.

در حالی که این مورد اساسی کد را ساده می کند و خوانایی را با جایگزینی بلوک های غیر ضروری if-else بهبود می بخشد، مهم است که از آن به اندازه کافی استفاده کنید تا از بهم ریختگی و پیچیده شدن کد خود جلوگیری کنید. بعداً، بهترین روش‌ها برای استفاده از عملگر سه تایی را مورد بحث قرار خواهیم داد.

در اینجا مثال دیگری است که استفاده از عملگر سه تایی را نشان می دهد. ما یک تابع برای تعیین زوج یا فرد بودن یک عدد ایجاد می کنیم. قطعه کد زیر را تحلیل کنید:

 function checkEvenOrOdd(number) { const result = number % 2 === 0 ? "even" : "odd"; return result; } // Usage: console.log(checkEvenOrOdd(4)); // Output: "even" console.log(checkEvenOrOdd(7)); // Output: "odd"

از قطعه کد بالا:

ما یک تابع checkEvenOrOdd تعریف می کنیم که پارامتر number را می گیرد.

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

اگر عدد مدول 2 برابر با 0 باشد (به این معنی که بدون باقی مانده بر 2 بخش پذیر است)، آنگاه شرط به درستی ارزیابی می شود، و رشته "حتی" به متغیر result اختصاص داده می شود.

اگر شرط به false ارزیابی شود (به این معنی که عدد فرد است)، رشته "فرد" به result اختصاص داده می شود.

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

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

چگونه بیانیه‌های if-else را به اپراتور سه‌گانه تغییر دهیم

مزیت عملگر سه تایی اجتناب از بلوک های غیرضروری if-else است که می تواند خوانایی و نگهداری کد را پیچیده کند. در این بخش، برخی از گزاره‌های if-else را به عملیات سه‌گانه تبدیل می‌کنیم و درک واضح‌تری از نحوه استفاده مؤثر از عملگرهای سه‌گانه ارائه می‌کنیم.

بیایید با اولین مثال خود شروع کنیم:

 function decideActivity(weather) { let activity; if (weather === "sunny") { activity = "go out"; } else { activity = "stay in"; } console.log(activity); } // Usage console.log(decideActivity("raining")); // Output: "stay in" console.log(decideActivity("snowing")); // Output: "stay in" console.log(decideActivity("sunny")); // Output: "go out"

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

اگر هوا "آفتابی" است، پیشنهاد می کند "بیرون بروید". در غیر این صورت، توصیه می کند "در بمانید". وقتی تابعی را با شرایط آب و هوایی مختلف مانند "باران" یا "برف" فراخوانی می کنیم، توصیه فعالیت مربوطه را با استفاده از console.log() خروجی می دهد.

به عنوان مثال، فراخوانی decideActivity("raining") خروجی "stay in" خواهد بود. به طور مشابه، decideActivity("snowing") نیز "stay in" را خروجی می دهد. هنگامی که decideActivity("sunny") فراخوانی می شود، خروجی آن "go out" است. این عملکرد ساده به تصمیم گیری در مورد فعالیت ها بر اساس شرایط آب و هوایی ارائه شده کمک می کند.

اکنون، می‌توانیم این بلوک‌های کد را تغییر دهیم تا ساده‌تر و منظم‌تر به نظر برسند. بیایید ببینیم که چگونه این کار را در زیر انجام دهیم:

 function decideActivity(weather){ const activity = weather === "sunny" ? "go out" ? "stay in"; console.log(activity) } // Usage console.log(decideActivity("raining")); // Output: "stay in" console.log(decideActivity("snowing")); // Output: "stay in" console.log(decideActivity("sunny")); // Output: "go out"

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

ما عبارات if-else را به یک عملگر سه تایی یک خطی ساده کرده ایم. این باعث می‌شود کد ما پاک‌تر، واضح‌تر و راحت‌تر خوانده شود.

اجازه دهید به مثال دیگری نگاهی بیندازیم:

 function checkNumber(number) { let result; if (number > 0) { result = "positive"; } else { result = "non-positive"; } return result; } // Usage console.log(checkNumber(5)); // Output: "positive" console.log(checkNumber(-2)); // Output: "non-positive"

بیایید توضیح دهیم که کد بالا چه کاری انجام می دهد:

تعریف تابع : با تعریف تابعی به نام checkNumber شروع می کنیم که یک پارامتر واحد به نام number را می گیرد.

اعلام متغیر : در داخل تابع، یک متغیر با نام result بدون اینکه هنوز مقداری به آن اختصاص دهیم، اعلام می کنیم. این متغیر نتیجه تحلیل ما را ذخیره می کند.

عبارت شرطی (if-else) : یک عبارت شرطی داریم که تحلیل می کند که آیا پارامتر number بزرگتر از 0 است یا خیر.

اگر شرط درست باشد (یعنی عدد مثبت است)، رشته "مثبت" را به متغیر result نسبت می دهیم.

اگر شرط نادرست است (یعنی عدد مثبت نیست، (یعنی منفی یا صفر است)، رشته "non-positive" را به متغیر result نسبت می دهیم.

Return Statement : در نهایت مقدار ذخیره شده در متغیر result را برمی گردانیم.

فراخوانی تابع : سپس تابع checkNumber را دو بار با آرگومان های مختلف فراخوانی می کنیم: 5 و -2.

وقتی checkNumber(5) را فرا می‌خوانیم، تابع "مثبت" را برمی‌گرداند، که سپس به کنسول وارد می‌شود.

به طور مشابه، وقتی checkNumber(-2) را فرا می‌خوانیم، تابع "non-positive" را برمی‌گرداند که دوباره به کنسول وارد می‌شود.

این تابع به طور موثر مثبت یا غیرمثبت بودن یک عدد را تعیین می کند و بر اساس شرایط، نتیجه مناسب را ارائه می دهد.

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

 function checkNumber(number) { const result = number > 0 ? "positive" : "non-positive"; return result; } // Usage console.log(checkNumber(5)); // Output: "positive" console.log(checkNumber(-2)); // Output: "non-positive"

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

این کد با استفاده از عملگر سه تایی، مختصرتر و زیباتر به نظر می رسد. این به طور موثر تعیین می کند که آیا یک عدد مثبت است یا غیر مثبت، کد را تمیزتر و درک آن را آسان تر می کند. وقتی checkNumber(5) را صدا می زنیم، "مثبت" را برمی گرداند، در حالی که checkNumber(-2) "غیر مثبت" را برمی گرداند. به طور کلی، عملگر سه تایی خوانایی کد را افزایش می دهد.

نحوه زنجیر کردن اپراتورهای سه تایی

هنگام رسیدگی به چک های مشروط، گاهی اوقات یک شرط کافی نیست. در چنین مواردی، ما از عبارات 'else-if' در کنار 'if/else' برای ترکیب چند شرط استفاده می کنیم.

بیایید نگاهی به نحو بیندازیم:

 function exampleFn() { return conditionalExpression1 ? value1 : conditionalExpression2 ? value2 : conditionalExpression3 ? value3 : value4; }

این را می توان به یک زنجیره if/else ترجمه کرد:

 function exampleFn() { if (conditionalExpression1) { return value1; } else if (conditionalExpression2) { return value2; } else if (conditionalExpression3) { return value3; } else { return value4; } }

بیایید یک مثال را در زیر تحلیل کنیم:

 function checkNumber(number) { let message; if (number > 0) { message = "Positive"; } else if (number === 0) { message = "Zero"; } else { message = "Negative"; } return message; } // Usage console.log(checkNumber(5)); // Output: "Positive" console.log(checkNumber(0)); // Output: "Zero" console.log(checkNumber(-3)); // Output: "Negative"

این کد بالا تابعی به نام checkNumber را تعریف می کند که پارامتر number را می گیرد و وضعیت آن (مثبت، صفر یا منفی) را تعیین می کند. از بلوک if-else با یک عبارت else-if برای ارزیابی مقدار عدد استفاده می کند. اگر عدد بزرگتر از 0 باشد مثبت و اگر مساوی 0 باشد صفر در نظر گرفته می شود. در غیر این صورت منفی است. تابع نتیجه را برمی گرداند.

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

 function checkNumber(number) { return number > 0 ? "Positive" : number === 0 ? "Zero" : "Negative"; } // Usage console.log(checkNumber(5)); // Output: "Positive" console.log(checkNumber(0)); // Output: "Zero" console.log(checkNumber(-3)); // Output: "Negative"

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

در اپراتور سه تایی اول:

number > 0 تحلیل می کند که آیا عدد بزرگتر از 0 است یا خیر.

اگر درست باشد، عبارت "مثبت" را برمی گرداند.

در اپراتور سه تایی دوم (زنجیری):

اگر شرط اول نادرست باشد (یعنی عدد بزرگتر از 0 نباشد)، به قسمت بعدی عبارت منتقل می شود: number === 0 .

این قسمت تحلیل می کند که آیا عدد برابر با 0 است یا خیر.

اگر درست باشد، عبارت "صفر" را برمی گرداند.

و مقدار پیش فرض:

اگر هیچ یک از شرایط بالا درست نباشد (یعنی عدد بزرگتر از 0 و مساوی 0 نباشد)، به قسمت آخر عبارت "Negative" پیشفرض می شود.

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

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

بیایید مثال دیگری از یک عملگر سه تایی زنجیره ای را تحلیل کنیم.

 function getDrink(age) { return age >= 21 ? "Enjoy a cocktail" : age >= 18 ? "Have a beer" : age >= 16 ? "Grab a soft drink" : "Sorry, you're too young to drink"; } // Usage console.log(getDrink(25)); // Output: "Enjoy a cocktail" console.log(getDrink(19)); // Output: "Have a beer" console.log(getDrink(16)); // Output: "Grab a soft drink" console.log(getDrink(10)); // Output: "Sorry, you're too young to drink"

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

اگر شرط اول درست باشد (واقعیت)، «لذت بردن از یک کوکتل» را برمی‌گرداند. اگر false (نادرست) باشد، به عبارت شرطی بعدی منتقل می شود و غیره. این فرآیند زنجیره‌ای تا زمانی ادامه می‌یابد که یک شرط درست ارزیابی شود. اگر هیچ یک از شرایط موجود در زنجیره درست نباشد، آخرین مقدار به عنوان یک بازگشت بازگردانده می شود، مشابه بلوک 'else' در یک دستور if/else.

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

بهترین روش ها هنگام استفاده از اپراتور سه تایی

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

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

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

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

به طور کامل تست کنید : کد خود را به طور کامل آزمایش کنید تا مطمئن شوید که عملگر سه تایی در شرایط مختلف مطابق انتظار عمل می کند. موارد لبه را تحلیل کنید و صحت مقادیر اختصاص داده شده را تأیید کنید.

اجتناب از سه تایی تو در تو: در حالی که زنجیره بندی سه تایی امکان پذیر است، تودرتو بیش از حد می تواند منجر به کدهایی شود که خواندن آن دشوار است. وضوح را ترجیح دهید و از if/else برای شرایط پیچیده استفاده کنید.

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

این بهترین شیوه‌ها دستورالعمل‌هایی را برای استفاده مؤثر از اپراتور سه‌گانه ترسیم می‌کنند. اگرچه آنها قوانین سختگیرانه نیستند، اما بینش ارزشمندی را برای افزایش وضوح و خوانایی کد شما ارائه می دهند.

نتیجه

همانطور که ما این مقاله را به پایان می رسانیم، شما درک جامعی از عملگر سه تایی به دست آورده اید – کاربرد آن در وظایف کدنویسی روزانه، تبدیل عبارات if/else، عملگرهای زنجیره ای و بهترین شیوه ها. من مطمئن هستم که شما به بینش های ارزشمندی دست یافته اید که شیوه های کدنویسی شما را با استفاده از اپراتور سه تایی بهبود می بخشد.

ممنون که خواندید، دفعه بعد می بینمت!

اطلاعات تماس

آیا می خواهید با من در تماس باشید؟ در ارتباط با هر یک از کانال های زیر دریغ نکنید:

Twitter / X: @developeraspire

ایمیل: developeraspire5@gmail.com

خبرکاو