الطرق للتعامل مع الارقام JavaScript Number Methods

-

بنحكي في هذا الدرس عن Methods وهي طرق مختلفة للتعامل مع الأرقام، وعرفنا ان الأرقام في JavaScript هي number object يمكن من خلالها تمثيل القيم الرقمية، والي ممكن تكون اعداد صحيحه integer او مع كسور floating-point، وعرفنا ان الأرقام في JavaScript تتبع IEEE standard لتمثيل floating-point numbers. وبنحكي في هذا الدرس بالتفصيل عن الطرق المختلفة للتعامل مع الأرقام.

الطرق الي بنحكي عنها في هذا الدرس هي :

  • ()toString
  • ()toExponential
  • ()toFixed
  • ()toPrecision
  • ()valueOf
  • ()Number
  • ()parseInt
  • ()parseFloat
  • JavaScript MIN_VALUE and MAX_VALUE
  • JavaScript POSITIVE_INFINITY
  • JavaScript NEGATIVE_INFINITY
  • JavaScript NaN - Not a Number
طريقة ()toString
الفكرة هون تحويل الأرقام الى string 
مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 1000 ;
let y = 1000;
let z= NaN;
document.write(x+y);
document.write("<br>");
document.write(x.toString()+y.toString());
</script>
</body>
</html> 

النتيجة: 

لاحظ ان في البداية تم جميع القيم x و y  ك ارقام . لكن مع استخدام toString تم تحويلهم الى ارقام ودمجهم

طريقة ()toExponential
تُرجع ()toExponential متغير من نوع string برقم مُقرَّب (حسب العدد المطلوب التقريب له ويكون هو parameter المستخدم داخل هذا Method) ومكتوب باستخدام التدوين الأسي exponential notation.
مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 8.5233 ;
let y = 1000;
let z= NaN;
document.write(x.toExponential());
document.write("<br>");
document.write(x.toExponential(2));
document.write("<br>");
document.write(x.toExponential(3));
document.write("<br>");
document.write(x.toExponential(4));
</script>
</body>
</html> 
 النتيجة: 

ملاحظة : العدد المطلوب التقريب له يكون هو parameter المستخدم داخل هذا Method وهو اختياري، في حال عدم كتابته بتكون النتيجة: طباعة الرقم كما هو دون تغيير 

طريقة ()toFixed
في هذه الطريقة ()toFixed يتم ارجاع متغير من نوع string برقم محدد بعدد من الكسور العشرية (تشبه التقريب round)
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 8.5233 ;
let y = 1000;
let z= NaN;
document.write(x.toFixed(0));
document.write("<br>");
document.write(x.toFixed(2));
document.write("<br>");
document.write(x.toFixed(3));
document.write("<br>");
document.write(x.toFixed(4));
</script>
</body>
</html> 
النتيجة:  

طريقة ()toPrecision
في هذه الطريقة ()toPrecision يتم ارجاع متغير من نوع string برقم مكتوب بطول محدد:
مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 8.5233 ;
let y = 1000;
let z= NaN;
document.write(x.toPrecision());
document.write("<br>");
document.write(x.toPrecision(2));
document.write("<br>");
document.write(x.toPrecision(3));
document.write("<br>");
document.write(x.toPrecision(4));
</script>
</body>
</html> 
النتيجة: 

لاحظ ان اذا كان المطلوب ارجاع النص كما هو ما ببعث parameter الى method بمعنى اخر لا يجوز ارسال parameter بقيمة 0 

طريقة ()valueOf
تستخدم هذه الأرقام لإرجاع ارقام
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 80 ;
let y = 1000;
let z= NaN;
document.write(x.valueOf());
document.write("<br>");
document.write((80).valueOf());
document.write("<br>");
document.write((50+30).valueOf(3));
</script>
</body>
النتيجة:


تحويل المتغيرات إلى أرقام Converting Variables to Numbers
يحتوي JavaScript على 3 طرق لتحويل المتغيرات الى ارقام وهذه الطرق هي:
  • ()Number
  • ()parseInt
  • ()parseFloat
ومثل ما هو واضح من الأسماء بتم تحوي الأرقام حسب كل method 

طريقة ()Number
تستخدم هذه الطريقة لتحويل المتغيرات variables الى ارقام numbers 
مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 80 ;
let y = 1000;
let z= NaN;
document.write(Number(x));
document.write("<br>");
document.write(Number(y));
document.write("<br>");
document.write(Number(true));
document.write("<br>");
document.write(Number(false));
document.write("<br>");
document.write( Number("100"));
document.write("<br>");
document.write( Number(" 100 "));
document.write("<br>");
document.write( Number("100 "));
document.write("<br>");
document.write( Number(" 100"));
document.write("<br>");
document.write( Number(" 100.1566 "));
document.write("<br>");
document.write( Number(" Hello "));
document.write("<br>");
document.write( Number(" 100,56 "));
</script>
</body>
</html> 
النتيجة:  

طريقة ()parseInt
تستخدم هذه الطريقة لإعادة عدد صحيح. مع ملاحظة ان المسافات والاحرف مسموح بها، ورغم ذلك يتم إرجاع القيمة الأولى فقط:
اذا كان القيمة الأولى ليست ارقام بتكون النتيجة NaN والسبب عدم القدرة على التحويل الى ارقام
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 80 ;
let y = 1000;
let z= NaN;
document.write(parseInt(x));
document.write("<br>");
document.write(parseInt(y));
document.write("<br>");
document.write(parseInt(true));
document.write("<br>");
document.write(parseInt(false));
document.write("<br>");
document.write( parseInt("100 xx"));
document.write("<br>");
document.write( parseInt("xx 100 "));
document.write("<br>");
document.write( parseInt("100.63 "));
document.write("<br>");
document.write( parseInt(" 0.2100"));
document.write("<br>");
document.write( parseInt(" 100.1566 "));
document.write("<br>");
document.write( parseInt(" Hello "));
document.write("<br>");
document.write( parseInt(" 100,56 "));
</script>
</body>
</html> 
النتيجة:

طريقة ()parseFloat
تستخدم هذه الطريقة لإعادة ارقام مع كسور، مع ملاحظة ان المسافات والاحرف مسموح بها، ورغم ذلك يتم إرجاع القيمة الأولى فقط:
اذا كان القيمة الأولى ليست ارقام بتكون النتيجة NaN والسبب عدم القدرة على التحويل الى ارقام
 مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 80 ;
let y = 1000;
let z= NaN;
document.write(parseFloat(x));
document.write("<br>");
document.write(parseFloat(y));
document.write("<br>");
document.write(parseFloat(true));
document.write("<br>");
document.write(parseFloat(false));
document.write("<br>");
document.write( parseFloat("100 xx"));
document.write("<br>");
document.write( parseFloat("xx 100 "));
document.write("<br>");
document.write( parseFloat("100.63 "));
document.write("<br>");
document.write( parseFloat(" 0.2100"));
document.write("<br>");
document.write( parseFloat(" 100.1566 "));
document.write("<br>");
document.write( parseFloat(" Hello "));
document.write("<br>");
document.write( parseFloat(" 100,56 "));
</script>
</body>
</html> 
النتيجة

خصائص الأرقام Number Properties
يحتوي JavaScript على مجموعه من الخصائص الي تتعامل مع الأرقام وهذه الخصائص هي:
MAX_VALUE
تُرجع أكبر رقم ممكن في لغة JavaScript 
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 80 ;
let y = 1000;
let z= NaN;
document.write(Number.MAX_VALUE);
document.write("<br>");
</script>
</body>
</html> 
النتيجة 

MIN_VALUE
تُرجع أصغر رقم ممكن في لغة JavaScript
مثال :
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 80 ;
let y = 1000;
let z= NaN;
document.write(Number.MIN_VALUE);
document.write("<br>");
</script>
</body>
</html> 
النتيجة 

POSITIVE_INFINITY 
يمثل اللانهاية infinity (يتم إرجاعه عند overflow)
مثال:
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 80 ;
let y = 1000;
let z= NaN;
document.write(Number.POSITIVE_INFINITY);
document.write("<br>");
</script>
</body>
</html> 
النتيجة: 

NEGATIVE_INFINITY
يمثل اللانهاية السلبية negative infinity (يتم إرجاعها عند overflow).
مثال 
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 80 ;
let y = 1000;
let z= NaN;
document.write(Number.NEGATIVE_INFINITY);
document.write("<br>");
</script>
</body>
</html> 
النتيجة 

مثال 2
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 80 ;
let y = 1000;
let z= NaN;
document.write(-1/0);
document.write("<br>");
</script>
</body>
</html> 
النتيجة 

لا يمكن استخدام Number Properties مع المتغيرات Variables، حيث ان جميع هذه الخصائص لا يمكن الوصول لها الا باستخدام الكلمة المحجوزة Number 
مثال استخدام متغير مع MAX_VALUE
<!DOCTYPE html>
<html>
<body onunload="">
<h3>JavaScript Numbers</h3>
<p id="Date"></p>
<script>
let x = 80 ;
let y = 1000;
let z= NaN;
document.write(x.MAX_VALUE);
document.write("<br>");
</script>
</body>
</html> 
النتيجة: