जावास्क्रिप्ट में हजारों विभाजकों के रूप में अल्पविराम के साथ एक संख्या कैसे प्रिंट करें


1779

मैं हजारों विभाजकों के रूप में अल्पविराम के साथ जावास्क्रिप्ट में एक पूर्णांक मुद्रित करने का प्रयास कर रहा हूं । उदाहरण के लिए, मैं संख्या 1234567 को "1,234,567" के रूप में दिखाना चाहता हूं। मैं ऐसा कैसे कर पाऊंगा?

यहाँ मैं यह कैसे कर रहा हूँ:

function numberWithCommas(x) {
    x = x.toString();
    var pattern = /(-?\d+)(\d{3})/;
    while (pattern.test(x))
        x = x.replace(pattern, "$1,$2");
    return x;
}

वहाँ यह करने के लिए एक सरल या अधिक सुंदर तरीका है? यह अच्छा होगा यदि यह फ्लोट्स के साथ भी काम करता है, लेकिन यह आवश्यक नहीं है। अवधि और अल्पविराम के बीच निर्णय लेने के लिए इसे स्थानीय-विशिष्ट होने की आवश्यकता नहीं है।


156
संख्या (x) .toLocaleString ()
बोफिन

@Boffin यह इनपुट प्रकार संख्या (अल्पविराम के कारण) के लिए काम नहीं कर रहा है - स्वीकृत उत्तर में हम अल्पविराम को डॉट में बदल सकते हैं और इनपुट प्रकार संख्या काम करेगी
विटाली ज़ेडेनविच

48
2016 में सफारी में काम करने वाले वर्थ ने Number.prototype.toLocaleString अभी भी काम नहीं किया है । वास्तव में संख्या को प्रारूपित करने के बजाय, यह सिर्फ इसे लौटाता है, कोई त्रुटि नहीं है। उसी के परिणामस्वरूप आज सबसे बड़ा चेहरा है ... #goodworkApple
aendrew

हालाँकि, यह iOS सफारी में काम करने के लिए प्रकट होता है।
टिम

.LocaleString असंगत है और इसका उपयोग नहीं किया जाना चाहिए। उदाहरण के लिए - फ़ायरफ़ॉक्स पर यह 1,234 वापस आ जाएगा, लेकिन IE पर यह दशमलव में जोड़ देगा: 1,234.00
Bort

जवाबों:


2830

मैंने केरी के उत्तर से विचार का उपयोग किया, लेकिन इसे सरल कर दिया क्योंकि मैं अपने विशिष्ट उद्देश्य के लिए कुछ सरल तलाश रहा था। मैंने जो किया था यह रहा:

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}


रेगेक्स 2 लुकहेड अभिकथन का उपयोग करता है:

  • स्ट्रिंग में किसी भी बिंदु को देखने के लिए एक सकारात्मक एक जिसके बाद एक पंक्ति में कई 3 अंक हैं,
  • यह सुनिश्चित करने के लिए कि केवल 3 अंकों का एक गुणक है, एक नकारात्मक अभिकथन। प्रतिस्थापन अभिव्यक्ति वहाँ एक अल्पविराम लगाती है।

उदाहरण के लिए, यदि आप इसे पास करते हैं 123456789.01, तो सकारात्मक अभिकथन 7 के बाईं ओर के प्रत्येक स्थान से मेल खाएगा (क्योंकि 7893 अंकों का गुणक है, 3 अंकों 678का एक से अधिक है 567, आदि)। ऋणात्मक अभिकथन यह जाँचता है कि 3 अंकों में से कई के बाद कोई अंक नहीं है। 789इसके बाद एक अवधि होती है, इसलिए यह 3 अंकों की एक बहु है, इसलिए एक अल्पविराम वहां जाता है। 6783 अंकों की एक बहु है, लेकिन इसके 9बाद एक है, इसलिए उन 3 अंक 4 के एक समूह का हिस्सा हैं, और एक अल्पविराम वहाँ नहीं जाता है। इसी तरह के लिए 5674567896 अंक है, जो 3 का गुणक है, इसलिए इससे पहले एक अल्पविराम चला जाता है। 3456783 के एक से अधिक है, लेकिन यह इसके 9बाद है, इसलिए कोई अल्पविराम वहाँ नहीं जाता है। और इसी तरह। \B स्ट्रिंग की शुरुआत में अल्पविराम लगाने से रेगेक्स रहता है।

@ neu-rah ने उल्लेख किया कि यह फ़ंक्शन दशमलव स्थानों के बाद 3 अंकों से अधिक होने पर अवांछनीय स्थानों में कॉमा जोड़ता है। यदि यह एक समस्या है, तो आप इस फ़ंक्शन का उपयोग कर सकते हैं:

function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}

@ tjcrowder ने बताया कि अब जावास्क्रिप्ट के पास लुकअप ( समर्थन जानकारी ) है, इसे नियमित अभिव्यक्ति में ही हल किया जा सकता है:

function numberWithCommas(x) {
    return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

(?<!\.\d*)एक नकारात्मक खोज है जो कहता है कि मैच .शून्य या अधिक अंकों के बाद नहीं हो सकता है । नकारात्मक lookbehind तुलना में तेजी से है splitऔर joinसमाधान ( तुलना में कम से कम वी 8 में,)।


21
बहुत अच्छा, ध्यान दिया कि यह उन अंकों की समस्या है जो दशमलव बिंदु के बाद 3 से अधिक स्थानों पर हैं।
एरिक पेट्रोएलजे

60
नंबर नंबर का प्रयास करें (12345.6789) -> "12,345.6,789" मुझे यह पसंद नहीं है
neu-rah

4
यह भिन्नों के साथ अच्छी तरह से काम नहीं करता है, हम दशमलव बिंदु के बाद कॉमा नहीं करना चाहेंगे
मगें

30
छोटा सुधार जो 'के बाद ठीक हो।' समस्या '123456789.01234'.replace (/ \ B (?; (? = \ d * \ _)। (\ _ d {3}) + (?! (d)) / g,' _ ')
सॉलिट गोलबून

8
@DmitrijGolubev पूर्णांक के लिए काम नहीं करता है। शायद दशमलव बिंदु के लिए मजबूर करना समाधान होगा।
व्लाद

1807

मुझे आश्चर्य है कि किसी ने भी Number.prototype.toLocaleString का उल्लेख नहीं किया । यह जावास्क्रिप्ट 1.5 में लागू किया गया है (जो 1999 में पेश किया गया था) इसलिए यह मूल रूप से सभी प्रमुख ब्राउज़रों में समर्थित है।

var n = 34523453.345
n.toLocaleString()
"34,523,453.345"

यह भी के शामिल किए जाने के माध्यम से v0.12 के रूप में काम करता है Node.js Intl

बस ध्यान दें कि यह फ़ंक्शन एक स्ट्रिंग देता है, एक संख्या नहीं।

यदि आप कुछ अलग चाहते हैं, तो Numeral.js दिलचस्प हो सकता है।


17
@csigrist अच्छे अंक देता है, लेकिन यह उतना बुरा नहीं है जितना लगता है। स्पीड ब्राउज़र पर निर्भर है। एफएफ या ओपेरा में यह अच्छा प्रदर्शन करता है। मैं हालांकि क्रोम में बेकार है। शून्य के रूप में: var number = 123456.000; number.toLocaleString('en-US', {minimumFractionDigits: 2}); "123,456.00"वे विकल्प हालांकि एफएफ या सफारी में काम नहीं करते हैं।
uKolka

22
संदर्भ के आधार पर प्रदर्शन अंतर एक मुद्दा हो सकता है या नहीं भी हो सकता है। यदि 1000 परिणामों की विशाल तालिका के लिए उपयोग किया जाता है तो यह अधिक महत्वपूर्ण होगा लेकिन यदि केवल एक ही मूल्य के लिए उपयोग किया जाता है, तो अंतर नगण्य है। लेकिन इसका फायदा यह है कि यह स्थानीय है, इसलिए यूरोप में कोई व्यक्ति 34.523.453,345 या 34 523 453,345 देखेगा । यह कई देशों के आगंतुकों के साथ एक साइट पर अधिक महत्वपूर्ण होगा।
टी गुयेन

6
बहुत बढ़िया। अंत में देशी समारोह के साथ एक जवाब। और क्या अधिक है, यह अलग-अलग देशों में अलग-अलग विभाजकों के साथ ठीक से प्रदर्शित होता है (चेक गणराज्य में हम लिखते हैं X XXX XXX,YYY)।
टॉम ज़ातो -

22
गोगलर्स के लिए अपडेट: IntltoLocaleString के समावेश के माध्यम से v0.12 के रूप में Node.js में काम करता है ।
srobinson

8
@MSC आपको parseInt("1234567", 10).toLocaleString('en-US', {minimumFractionDigits: 2})या new Number("1234567").toLocaleString('en-US', {minimumFractionDigits: 2})इसके बजाय प्रयास करना चाहिए । यह काम नहीं करता है क्योंकि आप इसे एक स्ट्रिंग पर उपयोग करते हैं, एक संख्या पर नहीं।
uKolka

244
var number = 1234567890; // Example number to be converted

⚠ मन कि जावास्क्रिप्ट का अधिकतम पूर्णांक मान 9007199254740991 है


toLocaleString :

number.toLocaleString(); // "1,234,567,890"

// A more complex example: 
var number2 = 1234.56789; // floating point example
number2.toLocaleString(undefined, {maximumFractionDigits:2}) // "1,234.57"


नंबरफॉर्म ( सफारी समर्थित नहीं):

var nf = new Intl.NumberFormat();
nf.format(number); // "1,234,567,890"

मैंने जो देखा (कम से कम फ़ायरफ़ॉक्स) वे प्रदर्शन के संबंध में कमोबेश एक जैसे हैं।


6
नंबरफार्मेट सफारी पर समर्थित नहीं है, जो भी वहां लागू हो रहा है।
1

6
toLocaleString भी सफारी पर समर्थित नहीं है
दीपक बांका

3
ब्राउज़र समर्थन हमेशा प्रत्येक एमडीएन पृष्ठ के नीचे उल्लेखित है, जिसे मैंने लिंक किया है।
vsync

5
toLocaleStringसफारी पर बुनियादी काम करता है, विकल्प नहीं
dandavis

3
toLocaleStringसमाधान शायद भी वांछित स्थान है, तो शामिल होना चाहिए toLocaleString("en"), क्योंकि अंग्रेजी पद्धति का उपयोग करता है के लिए अल्पविराम। हालांकि, अगर toLocaleString()फ्रांस में लोकेल इंडिकेटर के बिना चलाया जाता है, तो यह कॉमा के बजाय पीरियड्स देगा, क्योंकि स्थानीय स्तर पर हजारों को अलग करने के लिए इसका उपयोग किया जाता है।
माइक 'पोमैक्स' कमेरमन्स

112

मैं phpjs.org के नंबर_फॉर्मैट () का उपयोग करने का सुझाव देता हूं

function number_format(number, decimals, dec_point, thousands_sep) {
    // http://kevin.vanzonneveld.net
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +     bugfix by: Michael White (http://getsprink.com)
    // +     bugfix by: Benjamin Lupton
    // +     bugfix by: Allan Jensen (http://www.winternet.no)
    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +     bugfix by: Howard Yeend
    // +    revised by: Luke Smith (http://lucassmith.name)
    // +     bugfix by: Diogo Resende
    // +     bugfix by: Rival
    // +      input by: Kheang Hok Chin (http://www.distantia.ca/)
    // +   improved by: davook
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Jay Klehr
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Amir Habibi (http://www.residence-mixte.com/)
    // +     bugfix by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Theriault
    // +   improved by: Drew Noakes
    // *     example 1: number_format(1234.56);
    // *     returns 1: '1,235'
    // *     example 2: number_format(1234.56, 2, ',', ' ');
    // *     returns 2: '1 234,56'
    // *     example 3: number_format(1234.5678, 2, '.', '');
    // *     returns 3: '1234.57'
    // *     example 4: number_format(67, 2, ',', '.');
    // *     returns 4: '67,00'
    // *     example 5: number_format(1000);
    // *     returns 5: '1,000'
    // *     example 6: number_format(67.311, 2);
    // *     returns 6: '67.31'
    // *     example 7: number_format(1000.55, 1);
    // *     returns 7: '1,000.6'
    // *     example 8: number_format(67000, 5, ',', '.');
    // *     returns 8: '67.000,00000'
    // *     example 9: number_format(0.9, 0);
    // *     returns 9: '1'
    // *    example 10: number_format('1.20', 2);
    // *    returns 10: '1.20'
    // *    example 11: number_format('1.20', 4);
    // *    returns 11: '1.2000'
    // *    example 12: number_format('1.2000', 3);
    // *    returns 12: '1.200'
    var n = !isFinite(+number) ? 0 : +number, 
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        toFixedFix = function (n, prec) {
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            var k = Math.pow(10, prec);
            return Math.round(n * k) / k;
        },
        s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

अद्यतन 02/13/14

लोग रिपोर्ट करते हैं कि यह उम्मीद के मुताबिक काम नहीं करता है, इसलिए मैंने एक जेएस फिडेल किया जिसमें स्वचालित परीक्षण शामिल हैं।

अपडेट 26/11/2017

यहाँ थोड़ा संशोधित उत्पादन के साथ एक ढेर स्निपेट के रूप में है:

function number_format(number, decimals, dec_point, thousands_sep) {
    // http://kevin.vanzonneveld.net
    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +     bugfix by: Michael White (http://getsprink.com)
    // +     bugfix by: Benjamin Lupton
    // +     bugfix by: Allan Jensen (http://www.winternet.no)
    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
    // +     bugfix by: Howard Yeend
    // +    revised by: Luke Smith (http://lucassmith.name)
    // +     bugfix by: Diogo Resende
    // +     bugfix by: Rival
    // +      input by: Kheang Hok Chin (http://www.distantia.ca/)
    // +   improved by: davook
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Jay Klehr
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Amir Habibi (http://www.residence-mixte.com/)
    // +     bugfix by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Theriault
    // +   improved by: Drew Noakes
    // *     example 1: number_format(1234.56);
    // *     returns 1: '1,235'
    // *     example 2: number_format(1234.56, 2, ',', ' ');
    // *     returns 2: '1 234,56'
    // *     example 3: number_format(1234.5678, 2, '.', '');
    // *     returns 3: '1234.57'
    // *     example 4: number_format(67, 2, ',', '.');
    // *     returns 4: '67,00'
    // *     example 5: number_format(1000);
    // *     returns 5: '1,000'
    // *     example 6: number_format(67.311, 2);
    // *     returns 6: '67.31'
    // *     example 7: number_format(1000.55, 1);
    // *     returns 7: '1,000.6'
    // *     example 8: number_format(67000, 5, ',', '.');
    // *     returns 8: '67.000,00000'
    // *     example 9: number_format(0.9, 0);
    // *     returns 9: '1'
    // *    example 10: number_format('1.20', 2);
    // *    returns 10: '1.20'
    // *    example 11: number_format('1.20', 4);
    // *    returns 11: '1.2000'
    // *    example 12: number_format('1.2000', 3);
    // *    returns 12: '1.200'
    var n = !isFinite(+number) ? 0 : +number, 
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        toFixedFix = function (n, prec) {
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            var k = Math.pow(10, prec);
            return Math.round(n * k) / k;
        },
        s = (prec ? toFixedFix(n, prec) : Math.round(n)).toString().split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

var exampleNumber = 1;
function test(expected, number, decimals, dec_point, thousands_sep)
{
    var actual = number_format(number, decimals, dec_point, thousands_sep);
    console.log(
        'Test case ' + exampleNumber + ': ' +
        '(decimals: ' + (typeof decimals === 'undefined' ? '(default)' : decimals) +
        ', dec_point: "' + (typeof dec_point === 'undefined' ? '(default)' : dec_point) + '"' +
        ', thousands_sep: "' + (typeof thousands_sep === 'undefined' ? '(default)' : thousands_sep) + '")'
    );
    console.log('  => ' + (actual === expected ? 'Passed' : 'FAILED') + ', got "' + actual + '", expected "' + expected + '".');
    exampleNumber++;
}

test('1,235',    1234.56);
test('1 234,56', 1234.56, 2, ',', ' ');
test('1234.57',  1234.5678, 2, '.', '');
test('67,00',    67, 2, ',', '.');
test('1,000',    1000);
test('67.31',    67.311, 2);
test('1,000.6',  1000.55, 1);
test('67.000,00000', 67000, 5, ',', '.');
test('1',        0.9, 0);
test('1.20',     '1.20', 2);
test('1.2000',   '1.20', 4);
test('1.200',    '1.2000', 3);
.as-console-wrapper {
  max-height: 100% !important;
}


ऐसा नहीं है कि मैंने इसे नीचे चिह्नित किया है, लेकिन मेरा मानना ​​है कि लोगों ने ऐसा किया क्योंकि यह काम नहीं करता है। जैसा कि यह खड़ा है मैं भी काम नहीं करने के लिए अपने कुछ परीक्षण मिल।
एंड्रयू एस

3
@Andrew S - केवल 1 व्यक्ति ने इसे चिह्नित किया है। यह काम करता है, मैंने कई बार अपने कोड में इसका इस्तेमाल किया है। यह मेरा कोड भी नहीं है (न ही मेरे परीक्षण), मैंने उस साइट का संदर्भ दिया है जो इससे आती है, जो एक प्रसिद्ध साइट है। शायद उनके पास इसका अपडेटेड वर्जन है) जिस कोड को आप देख रहे हैं वह 3 साल पुराना है।
केरी जोन्स

13
@ernix - ऑपरेटर ने जावास्क्रिप्ट के लिए कहा, मैंने जो जवाब दिया वह जावास्क्रिप्ट है। यह एक PHP फ़ंक्शन की जावास्क्रिप्ट व्याख्या है।
केरी जोन्स

2
@ernix - यह ओपी द्वारा दिए गए उदाहरण के साथ अपेक्षा के अनुरूप काम करता है। मैं एक बेला डाल देता हूं ताकि आप देख सकें।
केरी जोन्स

4
@ हरिक्स - ठीक है, लेकिन मुद्दा यह है कि यह वही करता है जो ओपी ने पूछा था। यह किसी अन्य साइट से है (मेरे द्वारा अनुरक्षित नहीं है, और मैंने इसे पहले कहा है), और जब इसे उचित चर देते हैं, तो यह ठीक उसी तरह से काम करता है जैसा कि कहा गया है। यदि आप मानते हैं कि बग होना है, तो phpjs.org से संपर्क करें या देखें कि क्या उनके पास एक अद्यतन संस्करण है।
केरी जोन्स

75

यह @ mikez302 के उत्तर का एक भिन्नता है, लेकिन दशमलव के साथ संख्याओं का समर्थन करने के लिए संशोधित किया गया है (प्रति @ neu-rah की प्रतिक्रिया जो कि नंबरवाइटोमस (12345.6789) -> "12,345.6789" के बजाय "12,345.6789"

function numberWithCommas(n) {
    var parts=n.toString().split(".");
    return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");
}


67
function formatNumber (num) {
    return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

print(formatNumber(2665));      // 2,665
print(formatNumber(102665));    // 102,665
print(formatNumber(111102665)); // 111,102,665

यह क्या करता है कि मेरा जवाब नहीं है? रेगेक्स थोड़ा अलग दिखता है लेकिन ऐसा लगता है कि इसे भी ऐसा ही करना चाहिए।
इलायस ज़मरिया

8
यह छोटा है :)
तुतनखामेन

4
यह सुरुचिपूर्ण है। ठीक वही जो मेरे द्वारा खोजा जा रहा था।
पारंपरिक

4
से blog.tompawlak.org/number-currency-formatting-javascript ? ज्ञात समस्या: formatNumber (0.123456) = 0.123,456 JS में लुकअप की अनुपस्थिति एक सुरुचिपूर्ण रेगेक्स के साथ इसे ठीक करना मुश्किल बनाती है।
व्लाद

1
123456789.123456789.toString ()। प्रतिस्थापित करें (/ (\ d) (? (\ _ D {3}) + \।) / जी, '$ 1,') => 123,456,789.1237679
kenberkeley

53

नियमित अभिव्यक्ति का उपयोग करना

function toCommas(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
console.log(toCommas(123456789)); // 123,456,789

console.log(toCommas(1234567890)); // 1,234,567,890
console.log(toCommas(1234)); // 1,234

ToLocaleString () का उपयोग करना

var number = 123456.789;

// request a currency format
console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
// → 123.456,79 €

// the Japanese yen doesn't use a minor unit
console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
// → ¥123,457

// limit to three significant digits
console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
// → 1,23,000

Ref MDN: Number.prototype.toLocaleString ()

Intl.NumberFormat () का उपयोग करना

var number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// expected output: "¥123,457"

// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number));

// expected output: "1,23,000"

रेफरी Int.NumberFormat

यहाँ पर डेमो

<script type="text/javascript">
  // Using Regular expression
  function toCommas(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }

  function commas() {
    var num1 = document.myform.number1.value;

    // Using Regular expression
    document.getElementById('result1').value = toCommas(parseInt(num1));
    // Using toLocaleString()

    document.getElementById('result2').value = parseInt(num1).toLocaleString('ja-JP', {
      style: 'currency',
      currency: 'JPY'
    });

    // Using Intl.NumberFormat()
    document.getElementById('result3').value = new Intl.NumberFormat('ja-JP', {
      style: 'currency',
      currency: 'JPY'
    }).format(num1);
  }
</script>
<FORM NAME="myform">
  <INPUT TYPE="text" NAME="number1" VALUE="123456789">
  <br>
  <INPUT TYPE="button" NAME="button" Value="=>" onClick="commas()">
  <br>Using Regular expression
  <br>
  <INPUT TYPE="text" ID="result1" NAME="result1" VALUE="">
  <br>Using toLocaleString()
  <br>
  <INPUT TYPE="text" ID="result2" NAME="result2" VALUE="">
  <br>Using Intl.NumberFormat()
  <br>
  <INPUT TYPE="text" ID="result3" NAME="result3" VALUE="">

</FORM>

प्रदर्शन

प्रदर्शन http://jsben.ch/sifRd


यदि आप गतिशील रूप से टाइप कर रहे हैं तो यह काम नहीं करता है। यदि आप इसे केवल एक मान देते हैं तो यह काम करता है, लेकिन यदि आप एक मूल्य लगातार गतिशील रूप से खिला रहे हैं तो अल्पविराम गलत जगह पर जुड़ जाते हैं।
एडगर क्विंटो

मैंने अपने उत्तर के नीचे डेमो अपडेट किया है। पाठ बॉक्स में एक गतिशील मूल्य दर्ज करते समय। आप परीक्षण की कोशिश करें @EdgarQuintero
Ngô Quang

39

Intl.NumberFormat

मूल निवासी जेएस समारोह। IE11 द्वारा समर्थित, एज, नवीनतम सफारी, क्रोम, फ़ायरफ़ॉक्स, ओपेरा, आईओएस पर सफारी और एंड्रॉइड पर क्रोम।

var number = 3500;

console.log(new Intl.NumberFormat().format(number));
// → '3,500' if in US English locale

आपकी टिप्पणियों के जवाब में मेरा उत्तर अपडेट किया गया था। धन्यवाद!
डस्टिन सन

35

उनके जवाब के लिए सभी को धन्यवाद। मैंने अधिक "एक-आकार-फिट-सभी" समाधान बनाने के लिए कुछ उत्तरों का निर्माण किया है।

पहले टुकड़ा एक समारोह है कि नकल करता है कहते हैं पीएचपी 's number_format()संख्या प्रोटोटाइप करने के लिए। यदि मैं एक संख्या को प्रारूपित कर रहा हूं, तो मैं आमतौर पर दशमलव स्थानों को चाहता हूं ताकि फ़ंक्शन को दिखाने के लिए दशमलव स्थानों की संख्या में ले जाए। कुछ देश कॉमा का उपयोग दशमलव के रूप में करते हैं और हजारों विभाजक के रूप में दशमलव करते हैं इसलिए फ़ंक्शन इन विभाजकों को सेट करने की अनुमति देता है।

Number.prototype.numberFormat = function(decimals, dec_point, thousands_sep) {
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';

    var parts = this.toFixed(decimals).split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_sep);

    return parts.join(dec_point);
}

आप इसका उपयोग इस प्रकार करेंगे:

var foo = 5000;
console.log(foo.numberFormat(2)); // us format: 5,000.00
console.log(foo.numberFormat(2, ',', '.')); // european format: 5.000,00

मैंने पाया कि मुझे अक्सर गणित के संचालन के लिए नंबर वापस लेने की आवश्यकता होती है, लेकिन parseFloat 5,000 से 5 में कनवर्ट करता है, बस पूर्णांक मानों का पहला अनुक्रम लेता है। इसलिए मैंने अपना फ्लोट रूपांतरण फ़ंक्शन बनाया और इसे स्ट्रिंग प्रोटोटाइप में जोड़ा।

String.prototype.getFloat = function(dec_point, thousands_sep) {
    dec_point = typeof dec_point !== 'undefined' ? dec_point : '.';
    thousands_sep = typeof thousands_sep !== 'undefined' ? thousands_sep : ',';

    var parts = this.split(dec_point);
    var re = new RegExp("[" + thousands_sep + "]");
    parts[0] = parts[0].replace(re, '');

    return parseFloat(parts.join(dec_point));
}

अब आप निम्न प्रकार से दोनों कार्यों का उपयोग कर सकते हैं:

var foo = 5000;
var fooString = foo.numberFormat(2); // The string 5,000.00
var fooFloat = fooString.getFloat(); // The number 5000;

console.log((fooString.getFloat() + 1).numberFormat(2)); // The string 5,001.00

2
बहुत अच्छा, मैंने पहली विधि उधार ली;) लेकिन यह एक सही परिणाम नहीं देता है जब आप एक यूरोपीय प्रारूप का उपयोग करना चाहते हैं और संख्या आंशिक है। पंक्ति 5 होनी चाहिए:var parts = this.toFixed(decimals).toString().split('.');
vbwx

तुम सही हो! toFixed () अल्पविराम को एक अवधि में बदल देता है और इसलिए '।' के बजाय का उपयोग किया जाना चाहिए var dec_point। यह बात बताने के लिए धन्यवाद।
कोई नहीं

क्या आप इसके लिए एक npm मॉड्यूल बना सकते हैं?
चॉवि

3
@ J.Money .toString अनावश्यक है, पहले से ही एक स्ट्रिंग लौटा देता है।
एरियल

मुझे नहीं पता कि आपने यहाँ PHP का उल्लेख क्यों किया है, या एक प्रोटोटिपिकल फ़ंक्शन दिया है जो पहले से मौजूद है
vsync

27

इस सवाल के जवाबों की संख्या से मैं काफी प्रभावित हूं। मुझे uKolka का उत्तर पसंद है :

n.toLocaleString()

लेकिन दुर्भाग्य से, स्पेनिश जैसे कुछ स्थानों में, यह 10,000 से नीचे की संख्या के लिए उम्मीद के मुताबिक काम नहीं करता है (IMHO):

Number(1000).toLocaleString('ES-es')

देता है 1000और नहीं 1.000

क्यों पता करने के लिए सभी ब्राउज़रों में 10000 से कम संख्या पर काम नहीं करते toLocaleString देखें ।

इसलिए मुझे एलियास ज़मरिया द्वारा सही हजारों विभाजक चरित्र चुनने के उत्तर का उपयोग करना पड़ा :

n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))

यह उन दोनों स्थानों के लिए एक-लाइनर के रूप में अच्छी तरह से काम करता है जो हजारों विभाजक के रूप में उपयोग करते हैं ,या .सभी मामलों में 1,000 से काम करना शुरू करते हैं।

Number(1000).toString().replace(/\B(?=(\d{3})+(?!\d))/g, Number(10000).toLocaleString().substring(2, 3))

1.000एक स्पेनिश स्थानीय संदर्भ के साथ देता है।

क्या आप किसी संख्या को स्वरूपित करने के तरीके पर पूर्ण नियंत्रण रखना चाहते हैं, तो आप निम्नलिखित प्रयास भी कर सकते हैं:

let number   = 1234.567
let decimals = 2
let decpoint = '.' // Or Number(0.1).toLocaleString().substring(1, 2)
let thousand = ',' // Or Number(10000).toLocaleString().substring(2, 3)

let n = Math.abs(number).toFixed(decimals).split('.')
n[0] = n[0].split('').reverse().map((c, i, a) =>
  i > 0 && i < a.length && i % 3 == 0 ? c + thousand : c
).reverse().join('')
let final = (Math.sign(number) < 0 ? '-' : '') + n.join(decpoint)

console.log(final)

देता है 1,234.57

यह एक नियमित अभिव्यक्ति की जरूरत नहीं है। यह संख्या को toFixedपहले के साथ दशमलव की वांछित मात्रा में समायोजित करके काम करता है , फिर दशमलव बिंदु के आसपास विभाजित करता है .यदि कोई है। फिर बाईं ओर को अंकों के एक सरणी में बदल दिया जाता है, जो उलटा होता है। फिर शुरू से हर तीन अंकों में एक हजारों विभाजक जोड़ा जाता है और परिणाम फिर से उलट हो जाता है। अंतिम परिणाम दो भागों का मिलन है। इनपुट नंबर का संकेत Math.absपहले हटा दिया जाता है और फिर यदि आवश्यक हो तो वापस डाल दिया जाता है।

यह वन-लाइनर नहीं है, लेकिन ज्यादा लंबा नहीं है और आसानी से एक फ़ंक्शन में बदल जाता है। चर स्पष्टता के लिए जोड़े गए हैं, लेकिन यदि वे पहले से ज्ञात हों, तो उन्हें उनके इच्छित मूल्यों द्वारा प्रतिस्थापित किया जा सकता है। आप उन अभिव्यक्तियों का उपयोग कर सकते हैं जो toLocaleStringदशमलव बिंदु के लिए सही वर्ण और वर्तमान लोकेल के लिए हजारों विभाजक का पता लगाने के लिए उपयोग करते हैं (ध्यान रखें कि उन लोगों को एक और आधुनिक जावास्क्रिप्ट की आवश्यकता होती है।)


23

मुझे लगता है कि यह सबसे छोटी नियमित अभिव्यक्ति है जो इसे करती है:

/\B(?=(\d{3})+\b)/g

"123456".replace(/\B(?=(\d{3})+\b)/g, ",")

मैंने इसे कुछ नंबरों पर चेक किया और यह काम कर गया।


केवल तभी अच्छी तरह से काम करता है जब आपके पास इस मामले में विभाजक के बाद 3 से अधिक संख्याओं के साथ फ्लोट संख्या न हो। अन्यथा यह एक अल्पविराम भी जोड़ता है। "1234567890.1234567890" .replace (/ \ B (? = (\ D {3}) + \ b) / g, ",") यह उदाहरण के लिए काम नहीं करेगा। रिटर्न "1,234,567,890.1,234,567,890"
Marcio

1
हालांकि मुद्रा के लिए अच्छी तरह से काम करता है! अल्पविराम जोड़ने से पहले बस अपने अंकों को गोल करें।
काइल चड्ढा

1
इसे जोड़ता है, दशमलव के बाद: 12.3456 ".replace (/ \ B (=? ((D d {3}) + \ b) / g,", "== 12.3,456
श्री तिवारी

21

Number.prototype.toLocaleString()भयानक होता अगर यह सभी ब्राउज़रों (सफारी) द्वारा मूल रूप से प्रदान किया जाता ।

मैंने अन्य सभी उत्तरों की जाँच की, लेकिन कोई भी इसे पॉलीफ़िल नहीं करता था। यहाँ उस ओर एक पोक है, जो वास्तव में पहले दो उत्तरों का संयोजन है; यदि toLocaleStringयह काम करता है तो इसका उपयोग करता है, अगर यह कस्टम फ़ंक्शन का उपयोग नहीं करता है।

var putThousandsSeparators;

putThousandsSeparators = function(value, sep) {
  if (sep == null) {
    sep = ',';
  }
  // check if it needs formatting
  if (value.toString() === value.toLocaleString()) {
    // split decimals
    var parts = value.toString().split('.')
    // format whole numbers
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, sep);
    // put them back together
    value = parts[1] ? parts.join('.') : parts[0];
  } else {
    value = value.toLocaleString();
  }
  return value;
};

alert(putThousandsSeparators(1234567.890));


1
विदित हो कि पॉलीफ़िल केवल उन संख्याओं के साथ काम करता है जिनमें अधिकतम 3 दशमलव होते हैं। : उदाहरण के लिए 0.12345इच्छा उत्पादन 0.12,345। इसके लिए एक अच्छा कार्यान्वयन अंडरस्कोर.स्ट्रिंग
एंडी

यदि आप सही हैं, value > 1000तो यदि कोई शर्त लगाता है, तो यह मामला ठीक हो जाता है, हालांकि यह एक प्रकार का और निश्चित रूप से बेहतर परीक्षण किए गए संस्करण कहीं और पाए जा सकते हैं, जो इंगित करने के लिए धन्यवाद।
सिनान

1
इसे लगाना पर्याप्त नहीं है value > 1000, क्योंकि यह किसी भी संख्या और 3 दशमलव से अधिक के लिए समान होगा। जैसे 1000.12345रिटर्न 1,000.12,345। आपका जवाब बहुत अच्छा है और सही रास्ते पर है, लेकिन अभी पूरा नहीं हुआ है। मैं केवल अन्य लोगों के लिए इंगित करने की कोशिश कर रहा था जो आपके उत्तर पर ठोकर खा सकते हैं और विभिन्न इनपुट डेटा के साथ परीक्षण किए बिना इसे कॉपी / पास्ता कर सकते हैं।
एंडी

1
ठीक है, इसके लिए एक और संपादन की आवश्यकता है :) मैं सहमत हूं, लेकिन अब कम से कम इसे अधिकांश मामलों के लिए काम करना चाहिए।
सिनान

18

हजारों विभाजक को ब्राउज़र के Intlऑब्जेक्ट का उपयोग करके अंतर्राष्ट्रीय-अनुकूल तरीके से डाला जा सकता है :

Intl.NumberFormat().format(1234);
// returns "1,234" if the user's locale is en_US, for example

अधिक के लिए नंबरफ़ॉर्मैट पर एमडीएन का लेख देखें , आप उपयोगकर्ता के लिए स्थानीय व्यवहार या डिफ़ॉल्ट निर्दिष्ट कर सकते हैं। यह थोड़ा अधिक मूर्खतापूर्ण है क्योंकि यह स्थानीय मतभेदों का सम्मान करता है; कई देश अलग-अलग अंकों का उपयोग करते हैं, जबकि अल्पविराम दशमलव को दर्शाता है।

Intl.NumberFormat अभी तक सभी ब्राउज़रों में उपलब्ध नहीं है, लेकिन यह नवीनतम Chrome, Opera, और IE में काम करता है। फ़ायरफ़ॉक्स की अगली रिलीज़ को इसका समर्थन करना चाहिए। वेबकिट के कार्यान्वयन के लिए कोई समय-सीमा नहीं है।


2
हालांकि यह भयानक होगा अगर हम एक साधारण अंतर्निहित फ़ंक्शन का उपयोग कर सकते हैं, तो इसमें भयानक ब्राउज़र कार्यान्वयन है। उदाहरण के लिए, IE 8-10 और सभी सफारी इस पर समर्थन नहीं करते
ब्लेन कास्टेन

@BineineKasten यहां उपलब्ध पुराने ब्राउज़रों के लिए पूरी तरह से संगत पॉलीफ़िल है: github.com/andyearnshaw/Intl.js यह बहुत बड़ा है, लेकिन यह काम करता है।
महन

1
एक पॉलीफ़िल CDN (केवल उपयोगकर्ता के आधार पर जो आवश्यक हो) लौटाता है
केविन

थीलेस्ट्रीमिंग के साथ बड़ी संख्याओं को प्रारूपित करने के मुद्दों को, इसने महान काम किया (
पॉलीफ़िल के

18

आप या तो इस प्रक्रिया का उपयोग अपनी मुद्रा की जरूरत को स्वरूपित करने के लिए कर सकते हैं।

var nf = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
nf.format(123456.789); // ‘$123,456.79’

अधिक जानकारी के लिए आप इस लिंक पर पहुँच सकते हैं।

https://www.justinmccandless.com/post/formatting-currency-in-javascript/


यह सही, पोर्टेबल, देशी उत्तर है। काश मैं एक से अधिक बार उत्थान कर पाता।
जारेड स्मिथ

14

यदि आप मुद्रा मूल्यों के साथ काम कर रहे हैं और बहुत प्रारूपण कर रहे हैं, तो छोटे लेखांकन को जोड़ने के लायक हो सकता है। जेएस जो बहुत सारे किनारे के मामलों और स्थानीयकरण को संभालता है:

// Default usage:
accounting.formatMoney(12345678); // $12,345,678.00

// European formatting (custom symbol and separators), could also use options object as second param:
accounting.formatMoney(4999.99, "€", 2, ".", ","); // €4.999,99

// Negative values are formatted nicely, too:
accounting.formatMoney(-500000, "£ ", 0); // £ -500,000

// Simple `format` string allows control of symbol position [%v = value, %s = symbol]:
accounting.formatMoney(5318008, { symbol: "GBP",  format: "%v %s" }); // 5,318,008.00 GBP

1
लिंक अब काम नहीं करता है। लेकिन यह एक जैसा दिखता है: openexchangerates.github.io/accounting.js
ush189

13

निम्न कोड चार स्कैन का उपयोग करता है, इसलिए कोई रेगेक्स नहीं है।

function commafy( num){
  var parts = (''+(num<0?-num:num)).split("."), s=parts[0], L, i=L= s.length, o='';
  while(i--){ o = (i===0?'':((L-i)%3?'':',')) 
                  +s.charAt(i) +o }
  return (num<0?'-':'') + o + (parts[1] ? '.' + parts[1] : ''); 
}

यह आशाजनक प्रदर्शन दिखाता है: http://jsperf.com/number-formatting-with-commas/5

२०१५.४.२६: अंक ० जब अंक को हल करने के लिए लघु निर्धारण। Https://jsfiddle.net/runsun/p5tqqvs3/ देखें


यह commafy(-123456)इसके साथ काम नहीं करता है-,123,456
wbrmck

यह भी खूब रही! Jsperf
fregante

यह स्निपेट एक अचूक राक्षस है, हर चीज का प्रदर्शन करता है।
NiCk न्यूमैन

13

यहाँ एक साधारण कार्य है जो हजार विभाजकों के लिए अल्पविराम सम्मिलित करता है। यह एक RegEx के बजाय सरणी फ़ंक्शन का उपयोग करता है।

/**
 * Format a number as a string with commas separating the thousands.
 * @param num - The number to be formatted (e.g. 10000)
 * @return A string representing the formatted number (e.g. "10,000")
 */
var formatNumber = function(num) {
    var array = num.toString().split('');
    var index = -3;
    while (array.length + index > 0) {
        array.splice(index, 0, ',');
        // Decrement by 4 since we just added another unit to the array.
        index -= 4;
    }
    return array.join('');
};

कोडसैंडबॉक्स लिंक उदाहरण के साथ: https://codesandbox.io/s/p38k63w0vq


1
हाय .. यह उदाहरण महान है। लेकिन यह दशमलव भाग के लिए भी अल्पविराम लगाएगा। बस एक संपादन: फ़ंक्शन स्वरूपनंबर (संख्या) {var दशमलवपार्ट = ''; num = num.toString (); if (num.indexOf ('।') =! -1) {दशमलवपार्ट = '।' + num.split ('' ') [1]; num = parseInt (num.split ('।') [0]); } var array = num.toString ()। विभाजन (''); var इंडेक्स = -3; जबकि (array.length + index> 0) {array.splice (इंडेक्स, 0, ','); // 4 से कमी क्योंकि हमने सरणी में एक और इकाई जोड़ दी है। सूचकांक - = 4; } return array.join ('') + दशमलवपार्ट; };
अकी 143S

धन्यवाद महोदय। मुझे ठीक इसी की आवश्यकता थी।
अमीर होसैन अहमदी

11

भारत के लिए मुद्रा प्रारूप को संभालने के लिए इस कोड का उपयोग करें। देश कोड को अन्य देश मुद्रा को संभालने के लिए बदला जा सकता है।

let amount =350256.95
var formatter = new Intl.NumberFormat('en-IN', {
  minimumFractionDigits: 2,
});

// Use it.

formatter.format(amount);

उत्पादन:

3,50,256.95

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन यह समस्या का हल कैसे और / या इसके बारे में अतिरिक्त संदर्भ प्रदान करता है, इससे उत्तर के दीर्घकालिक मूल्य में सुधार होगा। इसे पढ़ें
शांतेश्वर इंडे

@ शांतेश्वरइंडे मैं जवाब में सुधार करने के लिए अतिरिक्त संदर्भ
जोड़ूंगा

11

आप Intl.NumberFormat कंस्ट्रक्टर का भी उपयोग कर सकते हैं । यहाँ आप इसे कैसे कर सकते हैं।

 resultNumber = new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(yourNumber); 

यह नोड js काम नहीं कर रहा है। यह भारतीय प्रारूप में प्रतिक्रिया नहीं दे रहा है
सूरज दलवी

7

मैंने इस पोस्ट पर ठोकर खाने से पहले इसे लिखा था। कोई रेगेक्स और आप वास्तव में कोड को समझ सकते हैं।

$(function(){
  
  function insertCommas(s) {

    // get stuff before the dot
    var d = s.indexOf('.');
    var s2 = d === -1 ? s : s.slice(0, d);

    // insert commas every 3 digits from the right
    for (var i = s2.length - 3; i > 0; i -= 3)
      s2 = s2.slice(0, i) + ',' + s2.slice(i);

    // append fractional part
    if (d !== -1)
      s2 += s.slice(d);

    return s2;

  }
  
  
  $('#theDudeAbides').text( insertCommas('1234567.89012' ) );
  
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="theDudeAbides"></div>


1
मैंने फ़ंक्शन की शुरुआत में s.toString () को जोड़ा ताकि यह संख्याओं को भी स्वीकार कर सके, न कि केवल तार। यह मेरा पसंदीदा उत्तर है क्योंकि यह पठनीय, संक्षिप्त है, और इसमें से कोई भी बग नहीं है जो रेगेक्स उत्तर लगता है।
FeFiFoFu

7
var formatNumber = function (number) {
  var splitNum;
  number = Math.abs(number);
  number = number.toFixed(2);
  splitNum = number.split('.');
  splitNum[0] = splitNum[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return splitNum.join(".");
}

EDIT: फ़ंक्शन केवल सकारात्मक संख्या के साथ काम करता है। निर्वासन के लिए:

var number = -123123231232;
formatNumber(number)

आउटपुट: "123,123,231,232"

लेकिन इस toLocaleString()विधि के ऊपर दिए गए प्रश्न का उत्तर देने में समस्या हल हो जाती है।

var number = 123123231232;
    number.toLocaleString()

आउटपुट: "123,123,231,232"

चीयर!


1
हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन यह समस्या का हल कैसे और / या इसके बारे में अतिरिक्त संदर्भ प्रदान करता है, इससे उत्तर के दीर्घकालिक मूल्य में सुधार होगा।
डोनाल्ड डक

1
अच्छी स्क्रिप्ट है, लेकिन यह नकारात्मक संख्या के साथ काम नहीं करता है।
राल्फ डेविड एबरनेथी

7

मेरा उत्तर एकमात्र ऐसा उत्तर है जो पूरी तरह से अधिक समझदार विकल्प के साथ jQuery की जगह लेता है:

function $(dollarAmount)
{
    const locale = 'en-US';
    const options = { style: 'currency', currency: 'USD' };
    return Intl.NumberFormat(locale, options).format(dollarAmount);
}

यह समाधान न केवल अल्पविराम जोड़ता है, लेकिन यह उस घटना में निकटतम पेनी के लिए भी चक्कर लगाता है, जैसे कि आप एक राशि का निवेश करते हैं जैसे $(1000.9999)कि आपको $001.001 मिलेगा। इसके अतिरिक्त, आपके द्वारा इनपुट किया जाने वाला मान सुरक्षित रूप से एक संख्या या एक स्ट्रिंग हो सकता है; इससे कोई फर्क नहीं पड़ता।

यदि आप पैसे के साथ काम कर रहे हैं, लेकिन राशि पर दिखाया गया एक प्रमुख डॉलर का चिह्न नहीं चाहते हैं, तो आप इस फ़ंक्शन को भी जोड़ सकते हैं, जो पिछले फ़ंक्शन का उपयोग करता है, लेकिन इसे निकालता है $:

function no$(dollarAmount)
{
    return $(dollarAmount).replace('$','');
}

यदि आप पैसे से काम नहीं कर रहे हैं , और दशमलव स्वरूपण आवश्यकताओं में भिन्नता है, तो यहाँ एक और बहुमुखी कार्य है:

function addCommas(number, minDecimalPlaces = 0, maxDecimalPlaces = Math.max(3,minDecimalPlaces))
{
    const options = {};
    options.maximumFractionDigits = maxDecimalPlaces;
    options.minimumFractionDigits = minDecimalPlaces;
    return Intl.NumberFormat('en-US',options).format(number);
}

ओह, और वैसे, यह तथ्य कि यह कोड इंटरनेट एक्सप्लोरर के कुछ पुराने संस्करण में काम नहीं करता है, पूरी तरह से जानबूझकर है। मैं कभी भी IE को तोड़ने की कोशिश करता हूं कि मैं इसे पकड़ सकता हूं आधुनिक मानकों का समर्थन नहीं करता।

कृपया याद रखें कि टिप्पणी अनुभाग में अत्यधिक प्रशंसा, ऑफ-टॉपिक माना जाता है। इसके बजाय, बस मुझे अप-वोटों से नहलाएं।


1
नंबर (n) .toLocaleString () सबसे अच्छा जवाब लगता है, लेकिन आप शायद नए Intl.NumberFormat ('en-US') जैसे कुछ का उपयोग करना चाहते हैं। सभी डॉलर के संकेतों और दशमलवों को अलग करने के बजाय प्रारूप (n)। उपयोगकर्ता चाहता है कि उनकी संख्या में अल्पविराम हो।
bmacnaughton

@bmacnaughton: जब आप पैसे का लेन-देन नहीं कर रहे हैं तो यह एक अच्छी बात है। हालाँकि, यदि आप पैसे का लेन-देन कर रहे हैं, और सिर्फ "अग्रणी डॉलर का संकेत नहीं चाहते हैं", नंबर (1000.50) .toLocaleString () '1,000.5' का उत्पादन करता है, जो धन मूल्यों को प्रदर्शित करते समय आमतौर पर रखे जाने वाले तुच्छ शून्य को हटा देता है। हालांकि अच्छी टिप्पणी: सभी को पता होना चाहिए कि आपने क्या कहा है।
लोनी बेस्ट

6

मेरे लिए, सबसे अच्छा जवाब कुछ सदस्यों ने कहा, जैसे टोकालेस्ट्रिंग का उपयोग कर रहा है। यदि आप '$' प्रतीक को शामिल करना चाहते हैं, तो बस अपग्रेड और प्रकार के विकल्प जोड़ें। यहाँ और मैक्सिकन पेसो के लिए एक संख्या को प्रारूपित करने के लिए उदाहरण दिया गया है

var n = 1234567.22
alert(n.toLocaleString("es-MX",{style:"currency", currency:"MXN"}))

छोटा रास्ता

1234567.22.toLocaleString("es-MX",{style:"currency", currency:"MXN"})

5

मुझे uKolka के उत्तर को बेहतर बनाने की कोशिश करें और शायद दूसरों को कुछ समय बचाने में मदद करें।

Numeral.js का उपयोग करें ।

document.body.textContent = numeral(1234567).format('0,0');
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>

आपको Number.prototype.toLocaleString () के साथ तभी जाना चाहिए जब उसका ब्राउज़र कंपेटिबिलिटी कोई समस्या न हो।


इससे मुझे
npm

5

एक वैकल्पिक तरीका, दशमलव का समर्थन, विभिन्न विभाजक और नकारात्मक।

var number_format = function(number, decimal_pos, decimal_sep, thousand_sep) {
    var ts      = ( thousand_sep == null ? ',' : thousand_sep )
        , ds    = ( decimal_sep  == null ? '.' : decimal_sep )
        , dp    = ( decimal_pos  == null ? 2   : decimal_pos )

        , n     = Math.floor(Math.abs(number)).toString()

        , i     = n.length % 3 
        , f     = ((number < 0) ? '-' : '') + n.substr(0, i)
    ;

    for(;i<n.length;i+=3) {
        if(i!=0) f+=ts;
        f+=n.substr(i,3);
    }

    if(dp > 0) 
        f += ds + parseFloat(number).toFixed(dp).split('.')[1]

    return f;
}

@ जिग्नेश संघानी द्वारा कुछ सुधार, उनकी टिप्पणी को उभारना नहीं भूलते।


मेरे लिए बिल्कुल सही, प्रसंस्करण से पहले स्वरूपण को हटाने के लिए बस एक नई लाइन जोड़ी गई।
डेनिस हीडेन

2
fn.substr(0, i)के साथ बदलें n.substr(0, i)और के साथ भी number.toFixed(dp).split('.')[1]बदलें parseFloat(number).toFixed(dp).split('.')[1]। क्योंकि जब मैं सीधे उपयोग करता हूँ तो यह मुझे त्रुटि देता है। कृपया अपना कोड
जिग्नेश संघानी

त्रुटिपूर्ण। संख्या बढ़ती है। एक परीक्षा कॉल बहुत अच्छा होता!
mmm

छत को फर्श पर बदलना तय है लेकिन यह सुनिश्चित करें कि अन्य मुद्दे क्या पैदा होंगे।
एमएमएम

1
Math.floor (-75.1);) को आज़माएँ
mmm

4

मुझे लगता है कि यह समारोह इस समस्या से संबंधित सभी मुद्दों का ध्यान रखेगा।

function commaFormat(inputString) {
    inputString = inputString.toString();
    var decimalPart = "";
    if (inputString.indexOf('.') != -1) {
        //alert("decimal number");
        inputString = inputString.split(".");
        decimalPart = "." + inputString[1];
        inputString = inputString[0];
        //alert(inputString);
        //alert(decimalPart);

    }
    var outputString = "";
    var count = 0;
    for (var i = inputString.length - 1; i >= 0 && inputString.charAt(i) != '-'; i--) {
        //alert("inside for" + inputString.charAt(i) + "and count=" + count + " and outputString=" + outputString);
        if (count == 3) {
            outputString += ",";
            count = 0;
        }
        outputString += inputString.charAt(i);
        count++;
    }
    if (inputString.charAt(0) == '-') {
        outputString += "-";
    }
    //alert(outputString);
    //alert(outputString.split("").reverse().join(""));
    return outputString.split("").reverse().join("") + decimalPart;
}

4

बस भविष्य के Googlers के लिए (या जरूरी नहीं कि 'Googlers'):

उपरोक्त वर्णित सभी समाधान अद्भुत हैं, हालांकि, RegExp जैसी स्थिति में उपयोग करने के लिए भयानक रूप से खराब हो सकता है।

तो, हाँ, आप प्रस्तावित कुछ विकल्पों का उपयोग कर सकते हैं या यहाँ तक कि कुछ आदिम लिख सकते हैं जैसे कि उपयोगी:

const strToNum = str => {

   //Find 1-3 digits followed by exactly 3 digits & a comma or end of string
   let regx = /(\d{1,3})(\d{3}(?:,|$))/;
   let currStr;

   do {
       currStr = (currStr || str.split(`.`)[0])
           .replace( regx, `$1,$2`)
   } while (currStr.match(regx)) //Stop when there's no match & null's returned

   return ( str.split(`.`)[1] ) ?
           currStr.concat(`.`, str.split(`.`)[1]) :
           currStr;

};

strToNum(`123`) // => 123
strToNum(`123456`) // => 123,456
strToNum(`-1234567.0987`) // => -1,234,567.0987

यहां उपयोग किया जाने वाला रेगेक्सपीप काफी सरल है और लूप ठीक उसी समय तक जाएगा, जितना काम करने में लगता है।

और आप इसे बेहतर "अनुकूलन" कोड और इतने पर अनुकूलित कर सकते हैं।

फिर भी,

(-1234567.0987).toLocaleString();

(ज्यादातर स्थितियों में) एक बेहतर विकल्प होगा।

बिंदु निष्पादन की गति या क्रॉस-ब्राउज़र संगतता में नहीं है।

ऐसी स्थितियों में जब आप उपयोगकर्ता को परिणामी संख्या दिखाना चाहते हैं, .toLocaleString () विधि आपको अपनी वेबसाइट या ऐप के उपयोगकर्ता के साथ एक ही भाषा बोलने के लिए महाशक्ति प्रदान करती है (जो भी उसकी / उसकी भाषा है)।

ECMAScript डॉक्यूमेंट के अनुसार यह तरीका 1999 में पेश किया गया था, और मेरा मानना ​​है कि इसका कारण यह आशा थी कि किसी बिंदु पर इंटरनेट दुनिया भर के लोगों को जोड़ेगा, इसलिए, कुछ "आंतरिककरण" टूल की आवश्यकता थी।

आज इंटरनेट हम सभी को जोड़ता है, इसलिए, यह याद रखना महत्वपूर्ण है कि दुनिया एक अधिक जटिल तरीका है जिसकी हम कल्पना कर सकते हैं और वह (/ लगभग) हम सभी यहाँ हैं , इंटरनेट में हैं।

जाहिर है, लोगों की विविधता को देखते हुए, हर किसी के लिए एकदम सही UX की गारंटी देना असंभव है क्योंकि हम अलग-अलग भाषाएं बोलते हैं, विभिन्न चीजों को महत्व देते हैं, आदि और ठीक इसी वजह से, चीजों को स्थानीय बनाने की कोशिश करना और भी अधिक महत्वपूर्ण है जितना संभव है। ।

इसलिए, यह देखते हुए कि दिनांक, समय, संख्याओं आदि के प्रतिनिधित्व के लिए कुछ विशेष मानक हैं और हमारे पास अंतिम उपयोगकर्ता द्वारा पसंद किए गए प्रारूप में उन चीजों को प्रदर्शित करने के लिए एक उपकरण है, यह दुर्लभ और लगभग गैर-जिम्मेदाराना नहीं है उस टूल का उपयोग करें (विशेषकर उन स्थितियों में जब हम उपयोगकर्ता को यह डेटा प्रदर्शित करना चाहते हैं)?

मेरे लिए, .toLocaleString () जैसी स्थिति में RegExp का उपयोग करना थोड़ा सा लगता है जैसे कि जावास्क्रिप्ट के साथ एक घड़ी ऐप बनाना और इसे इस तरह से हार्ड-कोड करना ताकि यह प्राग समय को ही प्रदर्शित करे (जो कि बहुत बेकार होगा लोग जो प्राग में नहीं रहते हैं) भले ही डिफ़ॉल्ट व्यवहार के

new Date();

अंतिम उपयोगकर्ता की घड़ी के अनुसार डेटा वापस करना है।


आपने फंक्शन को कास्ट और => के साथ क्यों लिखा?
ओग शॉन

@OGSean मैं हमेशा से करता हूं क्योंकि यह चर और कार्यों को घोषित करने का सबसे सुविधाजनक तरीका है। इसके अलावा, मुझे लगता है कि यह कोड को साफ और छोटा रखने में मदद करता है।
इगोर बयकोव

4

मेरा " सच " नियमित-अभिव्यक्ति-केवल समाधान उन प्यार-लाइनर्स के लिए

आप उन उत्साही खिलाड़ियों को ऊपर देखते हैं? हो सकता है कि आप इसमें से बाहर निकल सकें। यहाँ मेरा स्ट्रोक है।

n => `${n}`.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " ").replace(/(?<=\.(\d{3})+)\B/g, " ")

हजारों विभाजक के लिए THIN SPACE (U + 2009) का उपयोग करता है , जैसा कि अंतर्राष्ट्रीय प्रणाली इकाइयों ने अपने प्रकाशन के आठवें संस्करण (2006) में कहा था " SI विवरणिका: अंतर्राष्ट्रीय प्रणाली (SI) " (देखें §.2.3) .4।)। नौवां संस्करण (2019) इसके लिए एक स्थान का उपयोग करने का सुझाव देता है (देखें .45.4.4।)। आप जो चाहें, कॉमा सहित उपयोग कर सकते हैं।


देख।

const integer_part_only = n => `${n}`.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " I ");
const fractional_part_only = n => `${n}`.replace(/(?<=\.(\d{3})+)\B/g, " F ");
const both = n => fractional_part_only(integer_part_only(n));

function demo(number) { // I’m using Chrome 74.
	console.log(`${number}
		 "${integer_part_only(number)}" (integer part only)
		 "${fractional_part_only(number)}" (fractional part only)
		 "${both(number)}" (both)
	`);
}
demo(Math.random() * 10e5);
demo(123456789.01234567);
demo(123456789);
demo(0.0123456789);


यह कैसे काम करता है?

पूर्णांक भाग के लिए

.replace(/(?<!\.\d+)\B(?=(\d{3})+\b)/g, " I ")
  • .replace(……, " I ") मैं डाला "
    • /……/g प्रत्येक पर
      • \B दो आसन्न अंकों के बीच में
        • (?=……)पॉज़िटिव LOOKAHEAD जिसका राइट पार्ट है
          • (\d{3})+ एक या एक से अधिक तीन अंक वाले विखंडू
          • \b एक गैर-अंक के बाद, जैसे कि, एक अवधि, स्ट्रिंग का अंत, एट वगैरह,
        • (?<!……)NEGATIVE LOOKBEHIND को छोड़कर लोगों जिसका बाएं हिस्से
          • \.\d+ अंकों के बाद एक डॉट है ("एक दशमलव विभाजक है")।

एक दशमलव भाग के लिए

.replace(/(?<=\.(\d{3})+)\B/g, " F ")
  • .replace(……, " F ") "एफ" रखो
    • /……/g प्रत्येक पर
      • \B दो आसन्न अंकों के बीच में
        • (?<=……)पॉजिटिव LOOKBEHIND जिसका बायां हिस्सा है
          • \. एक दशमलव विभाजक
          • (\d{3})+ एक या एक से अधिक तीन अंकों के बाद।

चरित्र वर्ग और सीमाएँ

\d

किसी भी अंक (अरबी अंक) से मेल खाता है। के बराबर है [0-9]

उदाहरण के लिए,

  • /\d/या में /[0-9]/मेल खाता 2है B2 is the suite number

\b

एक शब्द सीमा से मेल खाता है । यह वह स्थिति है जहां किसी शब्द के चरित्र का अनुसरण या अन्य शब्द-चरित्र से पहले नहीं किया जाता है, जैसे कि पत्र और अंतरिक्ष के बीच। ध्यान दें कि एक मिलान शब्द सीमा मैच में शामिल नहीं है। दूसरे शब्दों में, एक मिलान शब्द सीमा की लंबाई शून्य है।

उदाहरण:

  • /\bm/में मेल खाता mहै moon;
  • /oo\b/मेल नहीं खाता ooमें moon, क्योंकि ooपीछा किया जाता है द्वारा nजो एक शब्द भी चरित्र है,
  • /oon\b/में मेल खाता oonहै moon, क्योंकि oonस्ट्रिंग का अंत है, इस प्रकार एक शब्द चरित्र के बाद नहीं;
  • /\w\b\w/ कभी भी कुछ भी मेल नहीं खाएगा, क्योंकि एक शब्द चरित्र का पालन कभी भी गैर-शब्द और शब्द चरित्र दोनों के द्वारा नहीं किया जा सकता है।

\B

एक गैर-शब्द सीमा से मेल खाता है । यह एक ऐसी स्थिति है जहां पिछला और अगला चरित्र एक ही प्रकार के होते हैं: या तो दोनों शब्द होने चाहिए, या दोनों गैर-शब्द होने चाहिए। जैसे कि दो अक्षर के बीच या दो रिक्त स्थान के बीच। एक स्ट्रिंग की शुरुआत और अंत को गैर-शब्द माना जाता है। मिलान शब्द सीमा के रूप में भी, मिलान शब्द गैर-शब्द सीमा भी मैच में शामिल नहीं है।

उदाहरण के लिए,

  • /\Bon/में मेल खाता onहै at noon;
  • /ye\B/में मेल खाता yeहै possibly yesterday

ब्राउज़र संगतता


3

मैंने Aki143S के समाधान में tofixed जोड़ा । यह समाधान हजारों विभाजक के लिए डॉट्स का उपयोग करता है और सटीक के लिए अल्पविराम।

function formatNumber( num, fixed ) { 
    var decimalPart;

    var array = Math.floor(num).toString().split('');
    var index = -3; 
    while ( array.length + index > 0 ) { 
        array.splice( index, 0, '.' );              
        index -= 4;
    }

    if(fixed > 0){
        decimalPart = num.toFixed(fixed).split(".")[1];
        return array.join('') + "," + decimalPart; 
    }
    return array.join(''); 
};

उदाहरण;

formatNumber(17347, 0)  = 17.347
formatNumber(17347, 3)  = 17.347,000
formatNumber(1234563.4545, 3)  = 1.234.563,454

3

पहले से ही बहुत अच्छे जवाब। यहाँ एक और है, बस मज़े के लिए:

function format(num, fix) {
    var p = num.toFixed(fix).split(".");
    return p[0].split("").reduceRight(function(acc, num, i, orig) {
        if ("-" === num && 0 === i) {
            return num + acc;
        }
        var pos = orig.length - i - 1
        return  num + (pos && !(pos % 3) ? "," : "") + acc;
    }, "") + (p[1] ? "." + p[1] : "");
}

कुछ उदाहरण:

format(77.03453, 2); // "77.03"
format(78436589374); // "78,436,589,374"
format(784, 4);      // "784.0000"
format(-123456);     // "-123,456"

यह format(-123456)इसके साथ काम नहीं करता है-,123,456
wbrmck

1
फिक्स्ड (हालांकि हर बार साइन की जांच किए बिना इसे करने का एक और अधिक सुरुचिपूर्ण तरीका है)। किसी भी घटना में, यह काम नकारात्मक संख्याओं के साथ करता है।
वेन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.