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

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

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

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

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

در اینجا مثالی برای تحلیل اینکه آیا 5 بزرگتر از 3 است آورده شده است:

 console.log(5 > 3); // true

از آنجایی که عدد 5 بزرگتر از 3 است، نتیجه true خواهد بود.

اگر دو مقدار را تغییر دهیم، نتیجه false خواهد بود:

 console.log(3 > 5); // false

نحوه استفاده از عملگر کمتر از < در جاوا اسکریپت

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

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

در اینجا یک مثال وجود دارد که تحلیل می کند که آیا عدد 3 کمتر از 5 است یا خیر:

 console.log(3 < 5); // true

از آنجایی که 3 کمتر از 5 است، نتیجه true خواهد بود.

اما اگر دو مقدار را تغییر دهیم، نتیجه false خواهد بود:

 console.log(5 < 3); // false

نحوه استفاده از عملگر بزرگتر یا مساوی >= در جاوا اسکریپت

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

در صورتی که مقدار سمت چپ بزرگتر یا مساوی با مقدار سمت راست باشد، نتیجه یک مقدار true است و اگر این مقدار نادرست باشد، false برمی‌گرداند.

در اینجا مثالی وجود دارد که تحلیل می کند آیا عدد 5 بزرگتر یا مساوی 5 است:

 console.log(5 >= 5); // true

از آنجایی که عدد 5 برابر با 5 است، نتیجه true خواهد بود.

اگر مقدار سمت چپ را به عدد 3 تغییر دهیم، نتیجه false خواهد بود:

 console.log(3 >= 5); // false

نحوه استفاده از عملگر کمتر یا مساوی <= در جاوا اسکریپت

اگر باید تحلیل کنید که مقدار سمت چپ کمتر یا مساوی با مقدار سمت راست است، می توانید از عملگر کمتر یا مساوی استفاده کنید. با نماد <= نشان داده می شود.

در صورتی که مقدار سمت چپ کمتر یا مساوی با مقدار سمت راست باشد، نتیجه یک مقدار true است و اگر مقدار نادرست باشد، مقدار false برمی‌گرداند.

در اینجا مثالی وجود دارد که تحلیل می کند عدد 3 کمتر یا مساوی 5 است:

 console.log(3 <= 5); // true

اگر مقدار سمت چپ را به عدد 6 تغییر دهیم، نتیجه false خواهد بود:

 console.log(6 <= 5); // false

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

استفاده از عملگرهای مقایسه در داخل دستورات شرطی مانند دستور if معمول است.

در این مثال، اپلیکیشنی داریم که سن کاربر را می‌پرسد و بر اساس سنی که وارد کرده، پاسخی را نشان می‌دهد:

برای HTML، از فرمی استفاده می کنیم تا سن کاربر را بپرسیم. در زیر فرم، پیام را بر اساس سن وارد شده نمایش خواهیم داد.

 <h1 class="title">How old are you?</h1> <main> <form id="form"> <div class="input-container"> <label for="age">Enter your age: </label> <input type="number" id="age" required min="1" max="120" /> </div> <button class="submit-btn" id="submit-btn">Submit age</button> </form> <p class="result-para" id="result"></p> </main>

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

می‌توانیم از روش برای دریافت عنصر فرم، ورودی سن و پاراگراف نتیجه استفاده کنیم و آنها را به متغیرهای const نسبت دهیم:

 const ageInput = document.getElementById("age"); const form = document.getElementById("form"); const resultParagraph = document.getElementById("result");

سپس می‌خواهیم آرایه‌ای از رشته‌ها ایجاد کنیم تا کاربر را بر اساس سن او نشان دهیم.

 const responsesArr = [ "Oh wow! You are just a kid.", "Nice! It looks like you are old enough to drive in the States.", "Awesome! It looks like you are old enough to vote in the States.", "Cool! It looks like you are old enough to drink in the States.", ];

سپس باید تابعی به نام displayResponse با پارامتری به نام age ایجاد کنیم. این تابع وظیفه نمایش پیام ها را بر اساس سن وارد شده بر عهده خواهد داشت.

 function displayResponse(age) { }

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

ما از ویژگی textContent برای تغییر متن داخل عنصر resultParagraph استفاده خواهیم کرد.

 if (age < 16) { resultParagraph.textContent = responsesArr[0]; }

اگر کاربر بین 16 تا 18 باشد، پیام دوم را در آرایه responsesArr نمایش می دهیم.

 else if (age >= 16 && age < 18) { resultParagraph.textContent = responsesArr[1]; }

اگر کاربر بین 18 تا 21 باشد، سومین پیام را در آرایه responsesArr نمایش خواهیم داد.

 else if (age >= 18 && age < 21) { resultParagraph.textContent = responsesArr[2]; }

اگر کاربر 21 یا بیشتر باشد، آخرین پیام را در آرایه responsesArr نمایش خواهیم داد.

 else { resultParagraph.textContent = responsesArr[3]; }

آخرین بخش این تابع، بازنشانی فرم پس از ارسال سن توسط کاربر است.

 ageInput.value = "";

در اینجا تابع کامل است:

 function displayResponse(age) { if (age < 16) { resultParagraph.textContent = responsesArr[0]; } else if (age >= 16 && age < 18) { resultParagraph.textContent = responsesArr[1]; } else if (age >= 18 && age < 21) { resultParagraph.textContent = responsesArr[2]; } else { resultParagraph.textContent = responsesArr[3]; } ageInput.value = ""; }

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

ما قصد داریم از متد addEventListener برای گوش دادن به رویداد submit در فرم استفاده کنیم. وقتی فرم ارسال شد، از رفتار پیش‌فرض فرم جلوگیری می‌کنیم و تابع displayResponse را با مقدار ورودی سن فراخوانی می‌کنیم.

 form.addEventListener("submit", (e) => { e.preventDefault(); displayResponse(ageInput.value); });

در اینجا یک مثال تعاملی کامل در CodePen آمده است:

نتیجه

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

امیدوارم از این مقاله لذت برده باشید و برای شما مفید بوده باشد.

کد نویسی مبارک!

خبرکاو