در این درس میخوانید
فرض کنید مقدار تعداد کالا از یک فرم میآید. کاربر عدد 2 را دیده، اما برنامه ممکن است رشتهٔ «2» را دریافت کرده باشد. اگر آن را با عدد 1 جمع کنید، نتیجه میتواند «21» شود. پیش از نوشتن فرمول، نوع داده و معنای عملگر را بررسی کنید. در این درس سوم، مثالها را جداگانه در Console اجرا میکنیم و بهجای حفظ جدولهای طولانی، یک محاسبهٔ قابل بررسی میسازیم.
جمع عدد با کنار هم گذاشتن متن یکسان نیست
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 را بخواند و باقی را کنار بگذارد.
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 با خودش نیز برابر نیست.
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 برنمیگردانند؛ ممکن است یکی از خود عملوندها را برگردانند. برای پیشفرضی که فقط در نبود مقدار لازم است، ?? معمولاً مناسبتر از || است، چون صفر و رشتهٔ خالی را حفظ میکند.
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 باشد؛ ارسال رایگان نباید با یک مقدار پیشفرض پولی جایگزین شود. ورودی خالی، عدد منفی و عدد اعشاری را هم امتحان کنید و توضیح دهید چرا پذیرفته یا رد میشوند.
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، جایگزین سیاست محاسبه نیست.
منابع انگلیسی
- MDN — Expressions and operators
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators
- MDN — Equality comparisons and sameness
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness
- MDN — Number
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
توضیحها و تمرین سفارش برای این مسیر نوشته شدهاند. در درس بعد، ساخت متنهای پویا، پاکسازی رشته و نمایش عدد فارسی را تمرین میکنیم.
پیشنیاز و محیط اجرای مثالها
درس 3 از ۲۰؛ پیشنیاز: درسهای قبلی مجموعه. کدهای مستقل این درس در Console تازهٔ مرورگر یا فایل JavaScript اجرا میشوند؛ نمونهها را جداگانه آزمایش کنید.
پیشرفت روی همین مرورگر ذخیره میشود.