اپراتورهای مقایسه ای و منطقی در جاوا اسکریپت

javascript-logic-and-comparison

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

اپراتورهای مقایسه ای (Comparison)

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

اپراتور معنا / توضیحات
== مقدار مساوی
=== مقدار و نوع مساوی
!= نا مساوی
!== مقدارِ نا مساوی یا نوعِ نا مساوی
< بیشتر از
> کمتر از
>= بیشتر از یا مساوی با
<= کمتر از یا مساوی با
? اپراتور تِرنِری

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparison</h2>

<p>Assign 5 to x, and compare the different values:</p>

<p id="demo1">5 == 8 --> </p>

<p id="demo2">5 == "5" --> </p>

<p id="demo3">5 === "5" --> </p>

<p id="demo4">5 !== "5" --> </p>

<p id="demo5">5 !== 5 --> </p>

<p id="demo6">5 === 5 --> </p>

<p id="demo7">5 === "5" --> </p>

<p id="demo8">5 > 5 --> </p>

<p id="demo9">5 >= 5 --> </p>

<script>
var x = 5;

document.getElementById("demo1").innerHTML += (x == 8);

document.getElementById("demo2").innerHTML += (x == "5");

document.getElementById("demo3").innerHTML += (x === "5");

document.getElementById("demo4").innerHTML += (x !== "5");

document.getElementById("demo5").innerHTML += (x !== 5);

document.getElementById("demo6").innerHTML += (x === 5);

document.getElementById("demo7").innerHTML += (x === "5");

document.getElementById("demo8").innerHTML += (x > 5);

document.getElementById("demo9").innerHTML += (x >= 5);

</script>

</body>
</html>

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

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

  • "5" == 5 صحیح است اما "5" === 5 صحیح نیست. چرا؟ گفتیم که اپراتور === هم مقدار را چک می کند و هم نوع داده را. مقدار ها در ظاهر یکی است بنابراین اپراتور == حاصل عبارت را true (یعنی صحیح) می داند اما نوع داده ها یکی نیست؛ یکی عدد 5 است و دیگری رشته ی 5! بنابراین اپراتور === آن را رد می کند و مقدار false (به معنی غلط) را بر میگرداند.
  • رفتاری که برای اپراتورهای == و === ذکر شد، برای اپراتور =! و ==! نیز صحیح و قابل اطلاق است، با این تفاوت که این دو جفت اپراتور دقیقا برعکس همدیگر هستند (مساوی و نامساوی).
  • در مورد عبارت 5 < 5 باید گفت: برنامه نویسی را باید از چپ به راست بخوانید، بنابراین حالت خواندنی این عبارت می شود 5 بزرگتر از 5 است (نه کوچکتر).
  • عبارت 5 < 5 غلط است اما عبارت 5 =< 5 صحیح است؛ چرا که "بزرگتر یا مساوی" یعنی اگر بزرگتر نبود حداقل مساوی باشد. 5 از خودش که بزرگتر نیست اما با خودش مساوی است بنابراین حاصل عبارت 5 =< 5  true می شود.

سوال: استفاده ی این اپراتورهای مقایسه ای کجاست؟

پاسخ: این اپراتورها استفاده های زیادی دارند اما مهم ترین استفاده ی آن ها در عبارات شرطی است.

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

یک مثال واقعی برای شما می زنم؛ سایت YouTube را در نظر بگیرید. این سایت بر اساس سن افراد (در زمان ثبت نام در Gmail) برخی از محتوا را به کاربران زیر 18 سال نشان نمی دهد. اگر بخواهیم یک مدل فرضی و بسیار ساده از این سیستم را با اپراتورهای شرطی پیاده سازی کنیم، اینطور می شود:

// دریافت سن کاربر در هنگام درخواست تماشای ویدیو

// بررسی سن کاربر بر اساس محتوای ویدیو

if (age < 18) {
  ShowMessage = "شما نمی توانید این ویدیو را مشاهده کنید";
} else {
  // ویدیو را نمایش بده
}

در قسمت آخر جدول، اپراتوری به نام اپراتور ترنری (ternary) می بینید. کار این اپراتور مانند عبارات شرطی است و ساختار زیر را دارد:

(condition) ? value1:value2

به طور مثال می توانیم چنین مثالی از آن داشته باشیم:

var voteable = (age < 18) ? "Too young":"Old enough";

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

<!DOCTYPE html>
<html dir="rtl">
<body>

<h2>اپراتورهای مقایسه ای جاوا اسکریپت</h2>

<p>سن خود را وارد کنید و سپس روی دکمه ی مقایسه کلیک کنید:</p>

<input id="age" value="18" />

<button onclick="myFunction()">مقایسه</button>

<p id="demo"></p>

<script>
function myFunction() {
  var age, voteable;
  age = Number(document.getElementById("age").value);
  if (isNaN(age)) {
    voteable = "ورودی شما یک عدد نیست";
  } else {
    voteable = (age < 18) ? "سن شما پایین است" : "می توانید رای دهید";
  }
  document.getElementById("demo").innerHTML = voteable;
}
</script>

</body>
</html>

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

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

اپراتورهای منطقی (Logical)

اپراتورهای منطقی را در جدول زیر مشاهده می کنید:

اپراتور معنا
&& "و" منطقی
|| "یا" منطقی
! "نه" منطقی

یادگیری این اپراتورها بسیار ساده است و نهایتا 5 دقیقه طول می کشد!

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

if (age > 18 && pos === "Manager") {
  ShowMessage = "شما می توانید رای دهید";
} else {
  // شما نمی توانید رای دهید
}

در این مثال میگوییم اگر age > 18 (یعنی سن بیشتر از 18 سال باشد) و pos === manager (یعنی سِمَت یا پوزیشن اداری فرد "مدیریت" باشد) بگذار رای بدهد (یعنی وقتی هر دو حالت را داشت). حالا اگر بخواهیم بگوییم یا مدیر باشد یا 18 سال باشد (یکی از دو حالت، نه هر دو حالت) از اپراتور || استفاده می کردیم، یا اگر بخواهیم بگوییم 18 سال داشته باشد و مدیر نباشد از ! استفاده می کردیم.

نکته ای جزئی اما مهم: اگر در مقایسه ها، یک رشته را با یک عدد مقایسه کنیم، جاوا اسکریپت رشته را به عدد تبدیل می کند! چطور؟ به این شکل:

  • یک رشته ی خالی ("") تبدیل به صفر می شود.
  • یک رشته ی غیر عددی تبدیل به NaN می شود که خود همیشه برابر با false است. همانطور که از قبل میدانید، NaN مخفف Not A Number (به معنی "عدد نیست" می باشد).

چند مثال:

  • 2 < 12 صحیح است.
  • 2 < "12" صحیح است. به این دلیل که رشته ی 12 به عدد 12 تبدیل خواهد شد و 12 بزرگتر از 2 است.
  • 2 < "John" یا 2 > "John" یا 2 == "John" همگی غلط (false) هستند چرا که گفتیم رشته های غیر عددی به NaN تبدیل می شوند که خود همیشه برابر با false است.
  • نکته ی جالب اینجاست که "2" < "12" غلط بوده اما "2" > "12" صحیح است. چرا؟ زیرا اینجا دو رشته داریم، نه دو رشته و یک عدد. در جایی که دو رشته داشته باشیم، با منطق رشته ای برخورد خواهیم کرد. از نظر حروف الفبا (یعنی A و B و C و .... سپس اعداد 1 و 2 و 3 و...) رشته ی "12" کوچک تر است چرا که با 1 شروع می شود و "1" کوچک تر از "2" است (کوچک تر در ترتیب حروف الفبا)! اولش ممکن است گنگ به نظر بیاید اما بعدا به آن عادت می کنید.

امیدوارم از این قسمت لذت برده باشید. در قسمت بعدی به آخرین دسته از اپراتورهای جاوا اسکریت یعنی اپراتورهای نوعی (type) و اپراتورهای بیتی (bitwise) می رسیم.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

حسن فرجی
04 شهریور 1398
سلام اپراتور تِرنِری چی کار میکنه؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
07 شهریور 1398
سلام دوست عزیز اپراتور ternary خلاصه شده ی دستور if هست. توضیحاتش هم بالاتر گفته شده. مثال و اطلاعات بیشتر: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

رها
28 اردیبهشت 1398
سلام و با تشکر از توضیحات خوبتون. راستش من کد زیر را نمیفهمم. document.getElementById("demo1").innerHTML += (x == 8); علامت =+ برای جمع به کار میرود . یا کنار هم قرار دادن رشته ها یا جمع اعداد .این جا به چه معنیه؟ همچنین عبارت (x == 8) یک عبارت شرطیه درسته؟یعنی مقدار true یا false را میدهد.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
29 اردیبهشت 1398
سلام دوست عزیز، 1- کد زیر رو ببینید: document.getElementById(“demo1”).innerHTML += (x == 8); - این کد میگه اول از همه عنصری که id اش مساوی با demo1 هست رو بگیر (همون دستور getElementById) 2- بعدش گفتیم innerHTML اش رو تغییر بده. innerHTML همون مقداری هست که بین تگ ها قرار میگیره. مثلا توی کد سلام مقدار اون innerHTML برابر با "سلام" هست که بین تگ ها قرار گرفته. 3- علامت += رو در قسمت زیر توضیح دادیم که می تونین بخونین: https://www.roxo.ir/javascript-string-and-assignment-operators/ اما اگر خلاصه اش رو بخواین، اپراتور =+ میگه به مقدار innerHTML دست نزن بلکه ادامه ی کد رو بهش اضافه کن. مثلا توی همین کد زیر: document.getElementById(“demo1”).innerHTML += (x == 8); اینجا ما توی قسمت HTML کد هایی مثل این داریم: 5 > 5 --> این کد همین الان هم یک innerHTML داره ( <-- 5 < 5) و برای اینکه این مقدار حذف نشه، بلکه مقدار جدید بهش اضافه بشه و در انتهای اون قرار بگیره، از این اپراتور استفاده کردیم. اگر از اپراتور عادی ترکیب استفاده میکردیم اون innerHTML اولیه حذف می شد. 4- اپراتور + یا =+ برای جمع اعداد به کار میره اما زمانی که دو طرف رشته باشه دیگه رشته ها رو کنار هم میزاره چون نمیشه رشته رو از نظر ریاضی جمع کرد. مثلا اتوبوس + هندوانه از نظر ریاضی هیچ معنی نمیده! 5- بله (x == 8) میگه یا true برگردونه یا false (بر اساس منطق جاوا اسکریپت). مثلا توی همین کدی که میگید، گفته شده آیا x که 5 هست با 8 برابر هست؟ چون هر دو عدد هستن از نظر ریاضی جواب false میشه (واضحه که 5 و 8 دو عدد متفاوت هستن، نه یکسان). 6- من کد رو براتون توی JSBin گذاشتم میتونین برین ببینین: https://jsbin.com/jabilan/14/edit?html,output

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.