منابع آموزشی و پژوهشی، برای دانشگاه و مدرسه
راهنمای انتخابمیز نویسنده
آموزش javascriptدرس ۳ از ۲۰رایگان

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

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

فضای تمرینبه‌روزرسانی: ۱۴۰۵/۸/۵
شروع و مبانی
در این درس می‌خوانید

فرض کنید مقدار تعداد کالا از یک فرم می‌آید. کاربر عدد 2 را دیده، اما برنامه ممکن است رشتهٔ «2» را دریافت کرده باشد. اگر آن را با عدد 1 جمع کنید، نتیجه می‌تواند «21» شود. پیش از نوشتن فرمول، نوع داده و معنای عملگر را بررسی کنید. در این درس سوم، مثال‌ها را جداگانه در Console اجرا می‌کنیم و به‌جای حفظ جدول‌های طولانی، یک محاسبهٔ قابل بررسی می‌سازیم.

جمع عدد با کنار هم گذاشتن متن یکسان نیست

javascript
console.log(2 + 3); // 5
console.log("2" + 3); // "23"
console.log(Number("2") + 3); // 5
console.log(10 % 3); // 1
console.log(2 ** 3); // 8

عملگر + هم برای جمع عددی و هم برای اتصال رشته‌ها به کار می‌رود. عملگر % باقی‌ماندهٔ تقسیم و * توان را محاسبه می‌کند. تقدم عملگرها نیز مهم است: 2 + 3 4 برابر 14 است، اما (2 + 3) * 4 برابر 20 می‌شود. در فرمول‌های کاری از پرانتز برای روشن‌کردن قصد خود استفاده کنید، حتی اگر تقدم را می‌دانید. نام‌های واحددار مانند priceToman و quantity از اشتباه در ترکیب مقدارها جلوگیری می‌کنند.

تبدیل صریح و اعتبارسنجی ورودی

Number متن عددی کامل را به عدد تبدیل می‌کند، اما رشتهٔ نامعتبر به NaN می‌رسد. Number.isFinite بررسی می‌کند نتیجه یک عدد متناهی است؛ برای تعداد، صحیح‌بودن و مثبت‌بودن نیز لازم است. رشتهٔ خالی و رشتهٔ فقط فاصله را پیش از تبدیل رد کنید؛ Number برای چنین ورودی‌هایی صفر می‌سازد و ممکن است خطای فرم پنهان بماند. parseInt نیز برای هر نوع اعتبارسنجی کافی نیست، چون می‌تواند ابتدای یک متن مانند 12px را بخواند و باقی را کنار بگذارد.

javascript
const rawQuantity = " 3 ";
const cleaned = rawQuantity.trim();
const quantity = Number(cleaned);
const valid = cleaned !== "" && Number.isInteger(quantity) && quantity > 0;
console.log(valid); // true
console.log(Number("سه")); // NaN
console.log(Number.isFinite(Number("سه"))); // false

=، == و === چه تفاوتی دارند؟

علامت = یک مقدار را به متغیر نسبت می‌دهد. == پیش از بعضی مقایسه‌ها تبدیل نوع انجام می‌دهد، اما === مقایسهٔ دقیق بدون هم‌نوع‌کردن خودکار است. برای قراردادهای معمول برنامه، === و !== رفتار روشن‌تری دارند. این توصیه به معنای بی‌ارزش‌بودن == نیست؛ باید هر مورد استفاده از تبدیل ضمنی، عمدی و قابل توضیح باشد. برای تشخیص NaN از Number.isNaN استفاده کنید؛ NaN با خودش نیز برابر نیست.

javascript
console.log("5" == 5); // true
console.log("5" === 5); // false
console.log(Number("5") === 5); // true
console.log(null === undefined); // false
console.log(Number.isNaN(NaN)); // true

عملگرهای منطقی و مقدار پیش‌فرض

در شرط‌ها، مقدارهای false، صفر، رشتهٔ خالی، null، undefined و NaN از نمونه‌های falsy هستند. در مقابل، آرایهٔ خالی و شیء خالی truthy محسوب می‌شوند. عملگرهای && و || لزوماً boolean برنمی‌گردانند؛ ممکن است یکی از خود عملوندها را برگردانند. برای پیش‌فرضی که فقط در نبود مقدار لازم است، ?? معمولاً مناسب‌تر از || است، چون صفر و رشتهٔ خالی را حفظ می‌کند.

javascript
const savedVolume = 0;
console.log(savedVolume || 50); // 50
console.log(savedVolume ?? 50); // 0
const nickname = null;
console.log(nickname ?? "مهمان"); // مهمان
console.log(Boolean([])); // true

در مثال صدا، صفر یک انتخاب معتبر کاربر است؛ جایگزین‌کردن آن با 50 اشتباه محصولی ایجاد می‌کند. پیش از انتخاب || یا ?? بپرسید «نبود مقدار» دقیقاً چیست. اگر رشتهٔ خالی نیز نامعتبر است، باید آن را جداگانه بررسی کنید. همچنین ?? را بدون پرانتز با && یا || ترکیب نکنید؛ برای این ترکیب محدودیت نحوی وجود دارد. خوانایی یک شرط کوتاه، از فشرده‌کردن چند قاعده در یک خط مهم‌تر است.

تمرین: هزینهٔ سفارش را محاسبه کنید

تعداد را از رشتهٔ «4»، قیمت هر واحد را 15000 و هزینهٔ ارسال را صفر در نظر بگیرید. ابتدا تعداد را اعتبارسنجی کنید و سپس مبلغ نهایی را به دست آورید. انتظار داریم نتیجه 60000 باشد؛ ارسال رایگان نباید با یک مقدار پیش‌فرض پولی جایگزین شود. ورودی خالی، عدد منفی و عدد اعشاری را هم امتحان کنید و توضیح دهید چرا پذیرفته یا رد می‌شوند.

javascript
const input = "4".trim();
const count = Number(input);
const unitPriceToman = 15000;
const shippingToman = 0;
if (input !== "" && Number.isInteger(count) && count > 0) {
  const total = count * unitPriceToman + (shippingToman ?? 20000);
  console.log(total); // 60000
} else {
  console.log("تعداد معتبر وارد کنید");
}

نکته‌های دقت عددی

عددهای معمول JavaScript با نمایش ممیز شناور ذخیره می‌شوند؛ بنابراین بعضی کسرهای ده‌دهی دقیقاً نمایش‌پذیر نیستند. برای نمونه 0.1 + 0.2 دقیقاً برابر 0.3 نیست. در مبلغ‌های صحیحِ این تمرین، یک واحد ثابت مانند تومان نگه داشته‌ایم. در سامانهٔ مالی واقعی، دامنهٔ عدد، گردکردن، واحد پول و محاسبهٔ سمت سرور باید صریح طراحی شوند. تغییر ظاهر عدد با format، جایگزین سیاست محاسبه نیست.

منابع انگلیسی

توضیح‌ها و تمرین سفارش برای این مسیر نوشته شده‌اند. در درس بعد، ساخت متن‌های پویا، پاک‌سازی رشته و نمایش عدد فارسی را تمرین می‌کنیم.

پیش‌نیاز و محیط اجرای مثال‌ها

درس 3 از ۲۰؛ پیش‌نیاز: درس‌های قبلی مجموعه. کدهای مستقل این درس در Console تازهٔ مرورگر یا فایل JavaScript اجرا می‌شوند؛ نمونه‌ها را جداگانه آزمایش کنید.

پیشرفت روی همین مرورگر ذخیره می‌شود.

یکجا انتخاب کن، راحت‌تر دریافت کن

انتخاب‌های من ۰ منبع

مجموعهٔ مطالعه‌ات را بساز.

کنار مقاله‌ها «انتخاب» را بزنید تا چند فایل را با هم دریافت کنید.

انتخاب مقاله‌های رایگان