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

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الاثنين، 6 أبريل 2020

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

تحويل النصوص لأرقام parseInt parseFloat Number في جافاسكربت الدرس |20|

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

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

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

سوف تكون النتيجة هذه في المتصفح في console هي 2030 سيدمج النص مع الرقم.
تحويل النصوص لأرقام parseInt parseFloat Number في جافاسكربت الدرس |20|

 اذا نريد جمعها كأرقام و تحويل هذا النص str إلى رقم سوف نستخدم الأمر parseInt وضمن الأقواس نضع المتغير النصي الذي نريد تحويله.
var number = 20;
var number2 = "30";
number+= parseInt(number2);
console.log(number);
هنا عند عرض النتيجة سوف يعرضها 50 لأننا حولنا النص لرقم.
تحويل النصوص لأرقام parseInt parseFloat Number في جافاسكربت الدرس |20|

اذا كانت موجودة فواصل ضمن الرقم الذي في المتغير النصي لن يتم احتساب ما بعد الفاصلة, فقط يأخذ الرقم الصحيح, في حال اردنا ان يظهر لنا ما بعد الفاصلة سوف نستخدم parseFloat بدل parseInt لكي يظهر لنا ما بعد الفاصلة و حرف F يجب ان يكون حرف كابتل.
var number = 20;
var number2 = "30.5";
number+= parseFloat(number2);
console.log(number);
سيعطي النتيجة 50.5
تحويل النصوص لأرقام parseInt parseFloat Number في جافاسكربت الدرس |20|

غالبية عناصر 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);
}

تحويل النصوص لأرقام parseInt parseFloat Number في جافاسكربت الدرس |20|

شرح المثال

في المثال السابق بملف html وضعنا عنصر الادخال input ووضعنا ان العنصر من نوع بيانات ارقام و اعطيناه id بإسم input ووضعنا الخاصية onkeydown الذي شرحناها في الدرس السابق كانت مهمتها عند ادخال في الكيبورد تعمل, ووضعنا له الفنكشن الذي انشأناها بملف الجافاسكربت.

وفي ملف الجافاسكربت انشأنا فنكشن بالأسم getValue و انشأنا أول متغير بأسم number1 وربطناه ب id الذي انشأناه في ملف html و المتغير الثاني بأسم number2 و قيمته 30 و المتغير الثاني بأسم result و قيمته حاصل جمع المتغير الاول والثاني وعرضنا البيانات عبر console.

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

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

تحويل النصوص لأرقام parseInt parseFloat Number في جافاسكربت الدرس |20|

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

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام