recent
أخبار ساخنة

التعامل مع الأعداد في لغة جافاسكربت 10

الصفحة الرئيسية
التعامل مع الأعداد في لغة جافاسكربت 10

تحويل النصوص إلى الأرقام

سوف نشرح عن تحويل النصوص إلى أرقام في لغة الجافاسكربت, في العادة يكون مثلاً لدينا متغير يملك رقم لكن عبارة عن نص String و لا يمكن جمعهُ مع رقم int.

var number = 20;
var number2 = "30";
number+=number2;
console.log(number);

عند تشغيل الكود سوف تكون النتيجة في المتصفح في console هي 2030 سيدمج النص مع الرقم.

 

وظيفة الأمر parseInt() جافاسكربت

إذا نريد جمعها كأرقام و تحويل هذا النص str إلى رقم سوف نستخدم الأمر parseInt وضمن الأقواس نضع المتغير النصي الذي نريد تحويله.

var number = 20;
var number2 = "30";
number+= parseInt(number2);
console.log(number);

هنا عند عرض النتيجة سوف يعرضها 50 لأننا حولنا النص لرقم.

 

وظيفة الأمر parseFloat في جافاسكربت

إذا كانت موجودة فواصل ضمن الرقم الذي في المتغير النصي لن يتم إحتساب ما بعد الفاصلة, فقط يأخذ الرقم الصحيح.

في حال أردنا أن يظهر لنا ما بعد الفاصلة سوف نستخدم parseFloat بدل parseInt لكي يظهر لنا ما بعد الفاصلة و حرف F يجب أن يكون حرف كابتل.

var number = 20;
var number2 = "30.5";
number+= parseFloat(number2);
console.log(number);

سيعطي النتيجة 50.5.

غالبية عناصر html عندما نريد الحصول على القيمة منها تكون القيمة نوع نص String و بالتالي إذا كنا نريد الحصول. على قيمة من نوع أرقام Int لا يتم هذا إلا بإستخدام هذه الطريقة parseFloat.

سوف ننشئ عنصر Input من نوع ارقام Int.

  • في ملف html يكون.
<input type="number" id="input" onkeydown="getValue()">
  • في ملف الجافاسكربت يكون.
function getValue(){
var number1 = document.getElementById("input").value;
var number2 = 30;
var result = number1 + number2;
console.log(result);
}

في المثال السابق في ملف html وضعنا عنصر الإدخال input و وضعنا أن العنصر من نوع بيانات أرقام و أعطيناه id بإسم input.

و وضعنا الخاصية onkeydown و كانت مهمتها عند إدخال في الكيبورد تعمل, و وضعنا له الفنكشن التي أنشأناها في ملف الجافاسكربت.

وفي ملف الجافاسكربت انشأنا دالة بالإسم getValue و أنشأنا أول متغير بإسم number1 وربطناه بـ id الذي انشأناه في ملف html.

و المتغير الثاني بإسم number2 و قيمته 30 و المتغير الثاني بإسم result و قيمته حاصل جمع المتغير الأول و الثاني و عرضنا البيانات عبر console.

عند الفتح في المتصفح سوف يظهر لنا زر input الذي أنشأناه و نشغّل الـ console و نكتب أعداد في مكان الـ input و نلاحظ التغير في console.

مثلاً لو كتبنا في المستطيل  الرقم 45 سوف نلاحظ في الكونسل يظهر الرقم 430 نغير القيم حسبما نريد.

تحويل النص إلى ارقام parseFloat

كما لاحظنا عند كتابة أي قيمة في الفراغ تظهر قيمة في console.

لكن عندما نغير محتوى المتغير الأول number1 للأرقام بالطريقة التالية سوف يعمل بشكل طبيعي.

function getValue(){
var number1 = document.getElementById("input").value;
var number2 = 30;
var result = parseInt(number1) + number2;
console.log(result);
}

عند إدخال أي قيمة سوف يجمعها بشكل طبيعي فوق القيمة 30 .

و توجد طريقة أخرى و هي وضع Number بدل parseInt كالتالي

function getValue(){
var number1 = document.getElementById("input").value;
var number2 = 30;
var result = Number(number1) + number2;
console.log(result);
}
google-playkhamsatmostaqltradent