اطلب من JavaScript أن تجمع ثمن قهوة وغداء وتذكرة حافلة، وستعطيك جوابًا خاطئًا بفارق ضئيل:
\nconsole.log(4.1 + 12.2 + 2.7);توقّعت 19 فحصلت على 18.999999999999996. هذا ليس خطأً في JavaScript؛ فمعظم لغات البرمجة تفعل الشيء نفسه. وحين تفهم السبب، تستطيع أن تصمّم Pocket بحيث لا يلدغك هذا أبدًا.
تعمل العوامل الحسابية كما تتمنّى، مع أولوية العمليات المعتادة: * و/ و% تُنفَّذ قبل + و-، والأقواس تتقدّم على كل شيء.
console.log(2 + 3 * 4); // multiplication first\nconsole.log((2 + 3) * 4); // parentheses first\nconsole.log(17 % 5); // remainder after dividing 17 by 5\nconsole.log(2 ** 10); // 2 to the power of 10% (باقي القسمة) أنفع مما تبدو: n % 2 === 0 تخبرك إن كان الرقم زوجيًا، وminutes % 60 تعطيك الدقائق المتبقية بعد الساعات الكاملة.
حين تحدّث متغيّرًا انطلاقًا من قيمته نفسها، توجد اختصارات. total += 450 تعني total = total + 450، والنمط نفسه يعمل مع -= و*= و/=. أما count++ فتضيف واحدًا، وستراها في حلقات التكرار.
لدى JavaScript نوع واحد للأرقام، يُستخدم للأعداد الصحيحة والعشرية معًا. وفي الخفاء يُخزَّن كل رقم بالنظام الثنائي في 64 بتًا، وفق معيار اسمه IEEE 754. الأعداد الصحيحة تتّسع بلا مشكلة، أما كثير من الأعداد العشرية فلا: فالعدد 0.1 بالنظام الثنائي كسر يتكرّر إلى ما لا نهاية، مثل 1/3 بالنظام العشري (0.3333…). يضطر الحاسوب إلى قطعه في مكان ما، فيخزّن أقرب قيمة يستطيعها. اجمع بضعًا من هذه القيم “شبه الصحيحة” فيصبح الخطأ مرئيًا.
\nconsole.log(0.1 + 0.2);\nconsole.log(0.1 + 0.2 === 0.3);\nconsole.log(4.1 * 100);الخطأ ضئيل جدًا، نحو جزء واحد من عشرة كوادريليون، لذلك لا يهم أبدًا في قياس المسافات أو الرسم على الشاشة. لكنه يهم في المال. فالمجموع الذي يُفترض أن يكون 19 لكنه مخزّن على أنه 18.999999999999996 يفشل في فحص المساواة، ويُقرَّب في الاتجاه الخاطئ على الإيصال، وينحرف أكثر مع كل مصروف تضيفه. وتقريب الرقم عند عرضه يُخفي العَرَض بينما يبقى الرقم المخزّن خاطئًا.
\nمع المال، الحل بسيط، وهو ما تفعله شركات الدفع: خزّن المبالغ سنتاتٍ صحيحة. الأعداد الصحيحة دقيقة حتى Number.MAX_SAFE_INTEGER، أي نحو 9 كوادريليون، وهذا أكثر من كافٍ لمتتبّع مصاريف.
const coffee = 410; // $4.10 in cents\nconst lunch = 1220;\nconst bus = 270;\nconst total = coffee + lunch + bus;\nconsole.log(total); // exact\nconsole.log(total / 100); // convert to dollars only when you display itمن هذا الدرس فصاعدًا، يُخزَّن كل مبلغ في Pocket بالسنتات. وحين يصل مبلغ بالدولار، مثل 4.1، حوّله مرة واحدة باستخدام Math.round(4.1 * 100). لـ Math.round أهمية هنا، لأن 4.1 * 100 تساوي 409.99999999999994، والتقريب يُرجعها إلى 410.
القيم التي تُكتب في صفحة ويب تصل دائمًا نصوصًا، حتى لو بدت أرقامًا. ولـ + وظيفتان: جمع الأرقام ولصق النصوص. فإن كان أحد الطرفين نصًا، فإنها تلصق.
const typed = \"5\";\nconsole.log(typed + 3); // joins: \"53\"\nconsole.log(typed - 3); // only maths makes sense, so 2\nconsole.log(Number(typed) + 3); // convert first: 8\nconsole.log(Number(\"12abc\")); // not a number: NaNأما العوامل الأخرى (- و* و/) فلا تعرف إلا الحساب، لذلك تحوّل النصوص إلى أرقام بصمت، وهذا يجعل الخطأ أصعب اكتشافًا: الطرح يعمل والجمع لا يعمل. حوّل المدخلات صراحةً باستخدام Number() بمجرّد أن تستلمها.
حين يفشل التحويل تحصل على NaN، أي “ليس رقمًا” (not a number)، والمربك أن نوعها number. وNaN معدية: أي عملية حسابية معها تعطي NaN. افحصها باستخدام Number.isNaN(value)، لأن NaN === NaN تساوي false.
وقريبتها هي Infinity. القسمة على صفر لا تُوقف برنامج JavaScript كما تفعل في الآلة الحاسبة: 5 / 0 تساوي Infinity، و-5 / 0 تساوي -Infinity. يبدو هذا غير مؤذٍ حتى يحسب Pocket “متوسط الإنفاق اليومي” في أول الشهر وعدد الأيام المسجّلة صفر. لا NaN ولا Infinity ترمي خطأً، فيستمر برنامجك في العمل ويعرض كلامًا بلا معنى. والوقاية واحدة لكليهما: افحص مدخلاتك قبل أن تحسب.
عوامل المقارنة تُنتج قيمة منطقية (boolean): > و< و>= و<=، ونوعا المساواة.
=== (المساواة الصارمة) تكون true فقط حين تكون للقيمتين النوع نفسه والقيمة نفسها. أما == (المساواة المتساهلة) فتحوّل الطرفين أولًا إلى نوع مشترك، وفق قواعد تفاجئ حتى المطوّرين ذوي الخبرة:
| التعبير | \n== | \n=== | \n
|---|---|---|
"5" و5 | \ntrue | \nfalse | \n
"" و0 | \ntrue | \nfalse | \n
null وundefined | \ntrue | \nfalse | \n
"0" وfalse | \ntrue | \nfalse | \n
استخدم === و!== في كل مكان. وإن كان النوعان قد يختلفان، فحوّل صراحةً أولًا ثم قارن. عندها يقول كودك ما يعنيه بالضبط، ولا يحتاج أحد إلى حفظ جدول تحويلات.
const budgetCents = 2500;\nconst spentCents = 2200;\nconst isOverBudget = spentCents > budgetCents;\nconsole.log(isOverBudget, typeof isOverBudget);\nconsole.log(spentCents === 2200, \"2200\" === 2200);بعد أن صارت المبالغ دقيقة والمقارنات آمنة، الخطوة التالية أن تعرضها بشكل جميل: النصوص، وكيف تبني نصًا مقروءًا مثل “Lunch: $12.20”.
\n","toc":[{"id":"sec-1","text":"العمليات الحسابية بالطريقة المعتادة","level":2},{"id":"sec-2","text":"لماذا لا تساوي 0.1 + 0.2 القيمة 0.3","level":2},{"id":"sec-3","text":"حين تلصق + بدلًا من أن تجمع","level":2},{"id":"sec-4","text":"مقارنة القيم","level":2}],"takeaways":["لدى JavaScript نوع واحد للأرقام الصحيحة والعشرية معًا، والأعداد العشرية تُخزَّن بالنظام الثنائي، لذلك لا تساوي0.1 + 0.2 القيمة 0.3 بالضبط.","خزّن المال سنتاتٍ صحيحة (integers)، ولا تحوّله إلى دولارات إلا عند العرض؛ فالحساب بالأعداد الصحيحة دقيق تمامًا.","+ مع نص تُلصق النصوص بدلًا من أن تجمع، لذلك حوّل المدخلات باستخدام Number() قبل أي عملية حسابية.","قارن دائمًا باستخدام === و!==؛ فـ == تحوّل الأنواع أولًا وتعطي نتائج مثل أن "" == 0 صحيحة."],"further":[{"title":"Expressions and operators (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_operators"},{"title":"Equality comparisons and sameness (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness"},{"title":"Number (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number"}],"quiz":[{"q":"يكتب المستخدم 5 في حقل نصي، فيستلم كودك النص "5". ما ناتج "5" + 3؟
8","why":"هذا ما أردته، لكن + ترى نصًا في أحد الطرفين فتتحوّل إلى لصق النصوص."},{"text":""53"","why":"صحيح. حين يكون أحد طرفي + نصًا، تحوّل JavaScript الطرف الآخر إلى نص وتلصقهما. حوّل أولًا باستخدام Number("5")."},{"text":"NaN","why":"تظهر NaN حين تعجز عملية حسابية عن إنتاج رقم. أما هنا فـ + تلصق النصوص بلا مشكلة، فلا تفشل أي عملية حسابية."},{"text":"خطأ TypeError، لأنه لا يمكنك جمع نص ورقم.","why":"لا ترمي JavaScript أي خطأ هنا؛ إنها تحوّل الأنواع بصمت، ولهذا بالضبط يسهل أن يفوتك هذا الخطأ."}],"answer":1},{"q":"يخزّن Pocket القهوة بقيمة 4.1 دولار والغداء بقيمة 12.2. لماذا يُعدّ تخزين 410 و1220 سنتًا تصميمًا أفضل؟
18.999999999999996 بدلًا من 19."}],"answer":0},{"q":"أيّ مقارنة نتيجتها true؟
"0" === 0","why":"=== لا تحوّل الأنواع أبدًا، والنص لا يساوي الرقم مساواةً صارمة في أي حال."},{"text":"NaN === NaN","why":"NaN هي القيمة الوحيدة التي لا تساوي نفسها. استخدم Number.isNaN(value) لفحصها."},{"text":"10 % 3 === 1","why":"صحيح. % تعطي باقي القسمة، وقسمة 10 على 3 تترك باقيًا قدره 1."},{"text":"2 + 3 * 2 === 10","why":"الضرب يُنفَّذ قبل الجمع، فيصبح الطرف الأيسر 2 + 6، أي 8."}],"answer":2},{"q":"ما القيمة التي يتركها let n = 4; n += 2; n *= 3; في n؟
18","why":"صحيح. n += 2 تجعلها 6، وn *= 3 تجعلها 18. كل اختصار يقرأ القيمة الحالية، ويُجري العملية، ثم يعيد الإسناد."},{"text":"10","why":"هذا ناتج 4 + 2 * 3. لكن التعليمتين تُنفَّذان واحدة بعد الأخرى، فينتهي الجمع قبل أن يبدأ الضرب."},{"text":"14","why":"هذا ناتج 4 * 3 + 2. التعليمات تُنفَّذ بترتيب كتابتها: الجمع أولًا، ثم الضرب."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// Three expenses, still in dollars\nconst coffee = 4.1;\nconst lunch = 12.2;\nconst bus = 2.7;\n// A fourth amount, typed into a text box, so it arrived as a string\nconst typedAmount = \"3\";\n\nconst budgetCents = 2500;\n\n// Fix this: it should be the exact total in whole cents\nconst totalCents = coffee + lunch + bus + typedAmount;\n\n// Declare isOverBudget and leftCents below\n"},"solution":{"js":"const coffee = 4.1;\nconst lunch = 12.2;\nconst bus = 2.7;\nconst typedAmount = \"3\";\n\nconst budgetCents = 2500;\n\nconst totalCents =\n Math.round(coffee * 100) +\n Math.round(lunch * 100) +\n Math.round(bus * 100) +\n Math.round(Number(typedAmount) * 100);\n\nconst isOverBudget = totalCents > budgetCents;\nconst leftCents = budgetCents - totalCents;\nconsole.log(totalCents, isOverBudget, leftCents);\n"},"checks":[{"id":"total-number","test":"return typeof totalCents === 'number';"},{"id":"total-exact","test":"return totalCents === 2200;"},{"id":"over-budget","test":"return isOverBudget === false;"},{"id":"left","test":"return leftCents === 300;"}],"title":"المجموع بالسنتات، بدقة","prompt":"يجمع كود البداية ثلاثة مبالغ بالدولار ونصًا مكتوبًا، فتكون النتيجة فوضى. أصلح totalCents بحيث يكون المجموع الدقيق بالسنتات الصحيحة للمبالغ الأربعة كلها (حوّل كل مبلغ إلى سنتات باستخدام Math.round(amount * 100)، وحوّل typedAmount إلى رقم أولًا). ثم صرّح بـ isOverBudget، وهي قيمة منطقية تساوي true حين يكون totalCents أكبر من budgetCents، وبـ leftCents، أي الميزانية ناقص المجموع.
totalCents في كود البداية لترى المشكلة: إنه نص، لأن + صادفت "3" فبدأت تلصق النصوص.","Number(typedAmount) تحوّل "3" إلى 3. وحوّل كل مبلغ بالدولار باستخدام Math.round(x * 100).","المقارنة قيمة منطقية بحدّ ذاتها: const isOverBudget = totalCents > budgetCents;."],"explanation":"الضرب في 100 ينقل كل مبلغ إلى السنتات، لكن 4.1 * 100 تساوي 409.99999999999994، لذلك تُرجعها Math.round إلى العدد الصحيح الذي يجب أن تكونه. ويجب أن يمرّ typedAmount عبر Number() أولًا؛ وإلا فإن أول + تصادفه ستلصق النصوص بدلًا من أن تجمع. وحين يصبح كل شيء أعدادًا صحيحة، يكون المجموع دقيقًا: 410 + 1220 + 270 + 300 = 2200. والتعبير totalCents > budgetCents ناتجه false، فتخزّن هذه القيمة المنطقية مباشرة بدلًا من كتابة if.
totalCents رقم، وليس نصًا","total-exact":"totalCents يساوي 2200 بالضبط","over-budget":"isOverBudget هي القيمة المنطقية false","left":"leftCents يساوي 300"}},"words":668,"readMinutes":4}