تطبيق وصل wassll لمتابعة مخصصات المحروقات

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

تحويل النصوص إلى أرقام parseInt في لغة الجافاسكربت, في العادة يكون مثلاً لدينا متغير يملك رقم لكن عبارة عن نص 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 نغير القيم حسبما نريد.

كما لاحظنا عند كتابة أي قيمة في الفراغ تظهر قيمة في 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);
}