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

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

اپراتور سه تایی (همچنین به عنوان عملگر شرطی شناخته می‌شود) می‌تواند برای انجام بررسی شرایط درون خطی به جای استفاده از if...elseاستفاده شود. > بیانیه ها این کد را کوتاه تر و قابل خواندن تر می کند. می توان از آن برای اختصاص دادن یک مقدار به متغیر بر اساس یک شرط یا اجرای یک عبارت بر اساس یک شرط استفاده کرد.

معرفی سایت: 7 وب سایت طراحی داخلی برای الهام گرفتن

Syntax

عملگر سه تایی سه عملوند را می پذیرد. این تنها اپراتور در جاوا اسکریپت است که این کار را انجام می دهد. شما یک شرط برای تست، به دنبال آن یک علامت سوال و به دنبال آن دو عبارت که با دو نقطه از هم جدا شده اند، ارائه می دهید. اگر شرط درست در نظر گرفته شود (truthy)، اولین عبارت اجرا می شود. اگر نادرست در نظر گرفته شود، عبارت نهایی اجرا می شود.

در قالب زیر استفاده می شود:

شرایط ؟ expr1 : expr2

در اینجا، condition شرطی برای آزمایش است. اگر مقدار آن true در نظر گرفته شود، expr1 اجرا می شود. در غیر این صورت، اگر مقدار آن false در نظر گرفته شود، expr2 اجرا می شود.

expr1 و expr2 هر نوع عبارتی هستند. آنها می توانند متغیرها، فراخوانی تابع یا حتی شرایط دیگر باشند.

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

1 > 2 ؟ کنسول.ورود(" حق با شماست") : کنسول.ورود("تو اشتباه می کنی");

استفاده از اپراتور سه تایی برای تخصیص ارزش

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

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

const اعداد = [1،2،3];
اجازه دهید پیام؛
اگر (اعداد.طول > 2)  {
  پیام = 'آرایه اعداد خیلی طولانی است';
} else {
  پیام = 'آرایه اعداد کوتاه است';
}

کنسول.ورود(پیام);

در این مثال کد، ابتدا متغیر message را تعریف می‌کنید. سپس، از عبارت if...else برای تعیین مقدار متغیر استفاده می‌کنید.

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

const اعداد = [1،2،3];
اجازه دهید به = اعداد  پیام دهید.طول > 2 ؟ 'آرایه اعداد خیلی طولانی است' : 'آرایه اعداد کوتاه است';

کنسول.ورود(پیام);

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

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

به عنوان مثال، اگر می خواهید تصمیم بگیرید که کدام تابع را بر اساس مقدار یک متغیر اجرا کنید، می توانید این کار را با استفاده از عبارت if...else به این صورت انجام دهید:

اگر (بازخورد === "بله") {
  sayThankYou();
} else {
  ببخشید();
}

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

بازخورد === "بله"  ؟ sayThankYou() : saySorry();

اگر بازخورد دارای مقدار yes باشد، تابع sayThankYou فراخوانی و اجرا خواهد شد. در غیر این صورت، تابع saySorry فراخوانی و اجرا می شود.

استفاده از اپراتور سه‌گانه برای بررسی‌های پوچ

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

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

>

این به ویژه زمانی مفید است که متغیر یک شیء باشد. اگر سعی کنید به یک ویژگی روی یک شی دسترسی پیدا کنید که در واقع null یا undefined است، خطایی رخ خواهد داد. بررسی اینکه آیا شیء واقعاً در ابتدا تنظیم شده است می تواند به شما در جلوگیری از خطاها کمک کند.

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

اجازه دهید کتاب = { name: 'Emma'، نویسنده: 'جین آستن'  };
کنسول.ورود(کتاب ؟ کتاب.نام : "بدون کتاب") ;

کتاب = null;
کنسول.ورود(کتاب ؟ کتاب.نام : "بدون کتاب") ;

در قسمت اول این بلوک کد، book یک شی با دو ویژگی است – name و author. وقتی عملگر سه تایی در book استفاده می‌شود، بررسی می‌کند که null یا undefined نباشد. اگر اینطور نیست – به این معنی که دارای یک مقدار است – ویژگی name قابل دسترسی است و وارد کنسول می شود. در غیر این صورت، اگر پوچ باشد، به جای آن هیچ کتابی وارد کنسول نمی شود.

از آنجایی که book null نیست، نام کتاب در کنسول ثبت شده است. با این حال، در قسمت دوم، زمانی که همان شرط اعمال می شود، شرط در عملگر سه تایی از بین می رود، زیرا book null است. بنابراین، «بدون کتاب» در کنسول وارد می‌شود.

شرایط تودرتو

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

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

پیاده سازی کرد

اجازه دهید نمره = '67';
اجازه دهید نمره دهید;
اگر (score  50) {
  درجه = 'F';
} دیگر اگر (score  70 ) {
  درجه = 'D'
} دیگر اگر (score  80 ) {
  درجه = 'C'
} دیگر اگر (score  90 ) {
  درجه = 'B'
} else {
  درجه = 'A'
}

کنسول.ورود(درجه);

در این بلوک کد، چندین شرط را روی متغیر score آزمایش می‌کنید تا درجه بندی حروف متغیر را تعیین کنید.

این شرایط مشابه را می توان با استفاده از عملگرهای سه تایی به صورت زیر انجام داد:

اجازه دهید نمره = '67';
اجازه دهید به = نمره دهد  50 ؟ 'F'
  : امتیاز  70  ">؟ 'D'
  : امتیاز  80  ">؟ 'C'
  : امتیاز  90 ؟ 'B'
  : 'A';

کنسول.ورود(درجه);

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

این تا زمانی ادامه می‌یابد که همه شرایط نادرست باشند، به این معنی که مقدار نمره A خواهد بود، یا تا زمانی که یکی از شرایط true ارزیابی شود و مقدار صدق آن به grade اختصاص داده شده است.

مثال CodePen

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

اگر مقدار کمتر از 100 را وارد کنید، پیام “خیلی کم” نشان داده می شود. اگر مقداری بیشتر از 100 وارد کنید، پیغام “خیلی زیاد” نشان داده می شود. اگر 100 را وارد کنید، پیام “عالی” نشان داده می شود.

به قلم
اپراتور سه‌گانه در JS توسط SitePoint (@SitePoint)
در CodePen.

نتیجه گیری

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

منبع: https://abdarya.ir/7-وب-سایت-طراحی-داخلی-برای-الهام-گرفتن-ا/