تحويل النص إلى ارقام عبر parseInt and parseFloat في جافاسكربت JavaScript الدرس|20|

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

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

var number = 20;

var number2 = "30";

number+=number2;

console.log(number);

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

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

var number = 20;

var number2 = "30";

number+= parseInt(number2);

console.log(number);

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

اذا كانت موجودة فواصل ضمن الرقم الذي في المتغير النصي لن يتم احتساب ما بعد الفاصلة, فقط يأخذ الرقم الصحيح, في حال اردنا ان يظهر لنا ما بعد الفاصلة سوف نستخدم 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);

}

قناتنا التلغرام
https://t.me/Programmer_Tech
المدونة
https://www.programmer-tech.com
صفحة الفيسبوك
https://www.facebook.com/ProgrammerTech.net
قناة اليوتيوب 1:
https://www.youtube.com/ahmadkaissar
قناة اليوتيوب 2:
https://www.youtube.com/MuhammadAlush0997