ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript
توصیه می‌کند:
اپراتورهای مقایسه ای و منطقی در جاوا اسکریپت
25 دی 1397
درس 9 از سری آموزش جاوا اسکریپت | Javascript
با سلام، در قسمت قبلی از سری آموزشی برنامه نویسی جاوا اسکریپت به سراغ اپراتورهای انتساب و رشته ای رفتیم. در این قسمت با نوعی دیگر از این اپراتورها آشنا می شویم، در واقع با سه نوع!
اپراتورهای مقایسه ای (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 =< 5true می شود.
سوال: استفاده ی این اپراتورهای مقایسه ای کجاست؟
پاسخ: این اپراتورها استفاده های زیادی دارند اما مهم ترین استفاده ی آن ها در عبارات شرطی است.
عبارات شرطی، که در جلسات بعد به توضیح آن ها خواهیم پرداخت، عباراتی هستند که شرطی را بر اساس فرضی برقرار می کنند و به دستور برنامه نویس بر اساس حالت های مختلفِ آن، واکنش های مختلفی نشان می دهند.
یک مثال واقعی برای شما می زنم؛ سایت 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
توصیه می‌کند:
دوره‌های آموزشی مرتبط
مقالات مرتبط
22 اردیبهشت 1401
16 اردیبهشت 1401
21 اسفند 1400
17 اسفند 1400
16 اسفند 1400
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.