Currency Number Formatting using ECMAScript in 2 Steps
Welcome to Imagination! In this JavaScript tutorial, learn how to change currency number format using ECMAScript. This step-by-step guide will help you understand how to convert and format currency values efficiently in your web projects. Follow along to master currency formatting in JavaScript and enhance your frontend development skills.
जब भी हम किसी भी नंबर को पढ़ते हैं तो यदि वह नंबर कुछ ज्यादा ही बड़ा हैं तो हमे उसकी इकाई समझने मे थोड़ा सा समय लगता हैं , वही यदि हमे हजार, लाख, करोड़ आदि के बीच मे Comma मिल जाए तो हम बहुत ही जल्दी Number या Amount को Read कर सकते हैं ।
Table of Contents
Problem : How to set Currency Number Format
अब सवाल उठता है की हमारी Web App मे हम किस तरह से Number Format का उपयोग करे तब हमारे मन मे कुछ Idea आते है की हम किस किस तरह से Number Format Set कर सकते हैं ।
- सबसे पहले हम सोचते है की HTML से ही Number Format सेट कर दे परंतु HTML मे number format मे Comma देने का कोई option नहीं होता हैं ।
- दूसरा हम सोचते है की CSS के द्वारा हो जाए तो अच्छा रहेगा की हम एक बार कोई CSS लिखेंगे ओर वह पूरे Project मे Applicable हो जाएगी, परंतु आप CSS के माध्यम से Number Format नहीं लगा सकते हैं ।
- फिर तीसरा हमारे पास ऑप्शन आता हैं की JavaScript से Number Format चेंज करे , जी हा आप Javascript का उपयोग कर Number Format को Change कर सकते हैं । और आज के इस Article मे मे आपको Step by Step समझूँगा की कैसे आप एक साथ आपके पूरे Project मे Number Format set कर सकते हैं ।
Solution : Currency Number Format
जब भी आपको Amount को Comma से Separated करना हो तब हम Number Format का उपयोग करते है । javascript मे Number Format को change करने के लिए हमे ECMAScript का Intl Object यानि की Internationalization Api का उपयोग करना होता हैं।
let FormatValue = Intl.NumberFormat('en-IN').format(OrgValue);ऐसा करने से आप साधारण Value को Indian Number Format मे बदल सकते हैं ।
आइए अब मे आपको इसे अपने द्वारा लिए गए Example से कैसे एक साथ बहुत से input पर बदलना हो तो बदल सकते है उसके बारे मे समझता हु।
यदि आप Number Format को JavaScript का उपयोग कर HTML पर change कर देते हैं तो दिखने मे तो आप जैसा छह रहे हैं वैसा हो जाएगा लेकिन यदि उस data को आप Database मे Store करे या उस पर कोई Operation Perform करना हो तब आपको कुछ Issue आ सकते हैं ।
- इसके लिए हमे दो JavaScript के function बनाने होंगे। एक Function printing के पहले सभी Number के format को change करेगा ओर साधारण number से Comma Separated Number बनाएगा।
- ओर दूसरा फंगक्शन फिर से साधारण value मे बदल देगा।
Changes in HTML For Currency Number Format
आपको एक साथ एक से अधिक Input पर Number Format बदलना हैं इसके लिए आप जीतने भी Input type number हैं उन पर या जिन पर आप Format apply करना चाहते है उन पर एक कोई भी Class बना कर Apply कर दीजिए जैसा की मैं एक Class ClsNumber बनाई हैं ओर मे input पर उस Class को Apply कर रहा हु ।
<td><input type="number" class="form-control text-end ClsNumber" name="amt" value="0" readonly=""></td>Changes in JavaScript For Currency Number Format
इसके बाद हम JavaScript मे do function AddNumberFormat(), और RemoveNumberFormat() बना लेंगे। इन function मे हमने jQuery का भी उपयोग किया हैं।
function AddNumberFormat() {
$( ".ClsNumber" ).each(function( index )
{
let OrgValue = $( this ).val();
$( this ).prop("OrgValue", OrgValue);
$( this ).prop("type", "text" );
let FormatValue = Intl.NumberFormat('en-IN').format(OrgValue);
$( this ).val(FormatValue);
});
}
function RemoveNumberFormat() {
$( ".ClsNumber" ).each(function( index )
{
let OrgValue = $( this ).prop("OrgValue");
$( this ).prop("type", "number" );
$( this ).val(OrgValue);
});
}
function GetPrint()
{
/*For Print*/
AddNumberFormat();
window.print();
RemoveNumberFormat();
}- AddNumberFormat() : यह Function जीतने भी इनपुट हैं उन पर उनकी Value को Get कर उसे एक Temporary property OrgValue मे Store कर रहा हैं , और Intl.NumberFormat का उपयोग कर साधारण नंबर को comma Separated number मे बदल कर फिर से उसी इनपुट की वैल्यू पर सेट कर रहा है
- RemoveNumberFormat() : यह Function Number Format को हटाने का कार्य करता हैं , यानि की जो हमने OrgValue मे Temporary Value सेट की थी उस वैल्यू को फिर से value पर store कर देता हैं। ताकि स्क्रीन पर हमने जो भी Operation लिखे हो वह Perform हो सके।
- GetPrint() : मुझे Print format मे Number format को बदलना था इसलिए मैं print देने के पहले Format को Set किया हैं और जैसे ही Print complete होती है उसके बाद फिर से format को un set कर दिया हैं । आप भी इस logic का उपयोग कर अपने हिसाब से इस Concept का उपयोग कर सकते हैं।
Live Example
इस Video के माध्यम से आप currency Number Format का live example देख सकते हैं ।
Output
इसका output कुछ इस प्रकार से आएगा , यह मेरा पहले से बना एक Invoice का Project था इसमे मैंने Example के लिए यह Logic add किया हैं यदि आप इस तरह की Invoice बनाना चाहते हैं तो निम्न Article Read कर सकते हैं।
BOOTSTRAP INVOICE VALIDATION: HOW TO VALIDATE INVOICES USING BOOTSTRAP
आशा हैं मुझे आपको Currency Number Format Concept बहुत ही अच्छे से समझ मे आ गया हैं, इस Article से related कोई भी Query हो तो आप मुझे निःसंकोच comment कर सकते हैं । यह Article कैसा लगा Comment करना न भूले । अपना कीमती समय देने के लिए धन्यवाद ।
हमारे अन्य आर्टिकल
- MySQL Function
- MySQL Stored Procedure
- PHP Get /Post Method के बारे में जाने
- PHP Math Function के बारे में जाने
- C से C ++ सीखे सरल शब्दों में
- PHP Variable के बारे में जाने
- Arduino Control Structure
- Union in C
- Declaration of Pointer in C
- jQuery Search Filter
- MySQL Create Table | Alter Table | Drop Table
- API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)
- CPANEL In Hindi
