जावास्क्रिप्ट हजार विभाजक / स्ट्रिंग प्रारूप [डुप्लिकेट]


96

क्या संख्या और तार को स्वरूपित करने के लिए जावास्क्रिप्ट में कोई कार्य है?

मैं स्ट्रिंग या संख्याओं के लिए हजार विभाजक का रास्ता खोज रहा हूं ... (जैसे String.Format In c #)



मुझे लगता है कि आपको वहां पर जो चाहिए वह आपको मिल जाएगा :) stackoverflow.com/questions/610406/…
Jad

How to print a number with commas as thousands separators in JavaScript: stackoverflow.com/questions/2901102/…
एड्रिएन

जवाबों:


159

अपडेट (7 साल बाद)

नीचे मूल उत्तर में उद्धृत संदर्भ गलत था। इसके लिए एक बिल्ट इन फंक्शन है, जो कि वास्तव में कैसर है नीचे चलता है:toLocaleString

तो आप कर सकते हैं:

(1234567.89).toLocaleString('en')              // for numeric input
parseFloat("1234567.89").toLocaleString('en')  // for string input

कार्य के नीचे लागू किया गया फ़ंक्शन भी, लेकिन केवल आवश्यक नहीं है।

(मुझे लगा कि शायद मैं भाग्यशाली होऊंगा और यह पता लगाऊंगा कि यह 2010 में वापस आवश्यक था , लेकिन नहीं। इस अधिक विश्वसनीय संदर्भ के अनुसार , टोकोलेस्ट्रिंग मानक का हिस्सा रहा है क्योंकि ECMAScript 3 जी संस्करण [1999], जो मुझे लगता है कि इसका मतलब है IE 5.5 के रूप में वापस समर्थित होगा।)


मूल उत्तर

इस संदर्भ के अनुसार किसी संख्या में अल्पविराम जोड़ने के लिए कोई अंतर्निहित कार्य नहीं है। लेकिन उस पेज में खुद को कोड करने का एक उदाहरण शामिल है:

function addCommas(nStr) {
    nStr += '';
    var x = nStr.split('.');
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

संपादित करें: दूसरे तरीके से जाने के लिए (स्ट्रिंग को कॉमा के साथ संख्या में बदलें), आप ऐसा कुछ कर सकते हैं:

parseFloat("1,234,567.89".replace(/,/g,''))

वास्तव में वास्तव में इसकी सराहना करते हैं // लेकिन मैं उस स्ट्रिंग (कॉमा के साथ) को एक संख्या में कैसे बदल सकता हूं?
लॉस्टऑर्ड

यह फ़ंक्शन 100,000 से अधिक संख्या के लिए टूटता है
DevZer0

1
@ DevZer0 नहीं यह नहीं है
Tallboy

शुद्ध जावास्क्रिप्ट के साथ काम करता है + एकल रेगेक्स, stackoverflow.com/a/44324879/681830
Val

4
(1234567).toLocaleString().replace(/,/g," ",)हजारों के बीच रिक्त स्थान के लिए उपयोग करें
Fanky

122

यदि हजारों विभाजक, सीमांकक और दशमलव विभाजकों को स्थानीय बनाने के बारे में है , तो निम्न के साथ जाएं:

// --> numObj.toLocaleString( [locales [, options] ] )
parseInt( number ).toLocaleString();

ऐसे कई विकल्प हैं जिनका आप उपयोग कर सकते हैं (और यहां तक ​​कि कमियां वाले स्थान भी):

number = 123456.7089;

result  = parseInt( number ).toLocaleString() + "<br>";
result += number.toLocaleString( 'de-DE' ) + "<br>";
result += number.toLocaleString( 'ar-EG' ) + "<br>";
result += number.toLocaleString( 'ja-JP', { 
  style           : 'currency',
  currency        : 'JPY',
  currencyDisplay : 'symbol',
  useGrouping     : true
} ) + "<br>";
result += number.toLocaleString( [ 'jav', 'en' ], { 
  localeMatcher            : 'lookup',
  style                    : 'decimal',
  minimumIntegerDigits     : 2,
  minimumFractionDigits    : 2,
  maximumFractionDigits    : 3,
  minimumSignificantDigits : 2,
  maximumSignificantDigits : 3
} ) + "<br>";

var el = document.getElementById( 'result' );
el.innerHTML = result;
<div id="result"></div>

MDN जानकारी पृष्ठ पर विवरण ।

संपादित करें: commentor सेरेना की तरह @I निम्नलिखित कहते हैं:

एक गैर-अंग्रेजी स्थान के साथ ब्राउज़रों का समर्थन करने के लिए जहां हम अभी भी अंग्रेजी प्रारूपण, उपयोग चाहते हैं value.toLocaleString('en')। फ्लोटिंग पॉइंट के लिए भी काम करता है।


यह फ्लोट नंबरों को कवर नहीं करता है .. आप parseInt को parseFloat में बदल सकते हैं, लेकिन यदि आपकाInt = "100,12" (अल्पविराम दशमलव विभाजक के रूप में) यह विफल हो जाएगा। यह एक प्रतिस्थापन (",", "") के साथ तय किया जा सकता है .. लेकिन "1.000,12" के साथ फिर से विफल हो जाएगा। इसलिए ... आप कभी-कभी पहिया को फिर से मजबूत करें। stackoverflow.com/a/2901298/1028304
नीकर

अच्छा काम नहीं करता है। हमारे विभाजक स्थान पर कॉमा का उपयोग हजारों विभाजक के लिए आम है।
जोसेफ साब्ले

1
यह अधिक उपयुक्त होगा:Number(yourNumberOrString).toLocaleString()
जोनाथन

2
एक गैर-अंग्रेजी स्थान के साथ ब्राउज़रों का समर्थन करने के लिए जहां हम अभी भी अंग्रेजी प्रारूपण, उपयोग चाहते हैं value.toLocaleString('en')। फ्लोटिंग पॉइंट के लिए भी काम करता है।
कलस वैन आरसेन

1
@ Serhiog.Lazin क्या वास्तव में सफारी पर काम नहीं करता है (और किस ओएस पर और किस संस्करण में)?
केसर

34

ECMAScript2018 परिवर्तनों के अनुरूप लुक-बैक सपोर्ट का उपयोग करके अपडेट किया गया।
पीछे की संगतता के लिए, मूल समाधान को देखने के लिए नीचे स्क्रॉल करें।

एक नियमित अभिव्यक्ति का उपयोग किया जा सकता है - स्ट्रिंग के रूप में संग्रहीत बड़ी संख्या से निपटने में विशेष रूप से उपयोगी है।

const format = num => 
    String(num).replace(/(?<!\..*)(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')

;[
    format(100),                           // "100"
    format(1000),                          // "1,000"
    format(1e10),                          // "10,000,000,000"  
    format(1000.001001),                   // "1,000.001001"
    format('100000000000000.001001001001') // "100,000,000,000,000.001001001001
]
    .forEach(n => console.log(n))

»Verbose regex स्पष्टीकरण (regex101.com) प्रवाह आरेख


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

इसे एक एकल नियमित अभिव्यक्ति (कॉलबैक के बिना) के साथ संभालने की कोशिश करना, मेरी वर्तमान क्षमता मुझे जावास्क्रिप्ट में नकारात्मक रूप से पीछे देखने की कमी के लिए विफल करती है ... यहां कभी भी कम नहीं एक और संक्षिप्त विकल्प है जो अधिकांश सामान्य मामलों में काम करता है - किसी भी दशमलव बिंदु के लिए लेखांकन मैचों की अनदेखी से जहां एक अवधि के सूचकांक के बाद मैच का सूचकांक दिखाई देता है।

const format = num => {
    const n = String(num),
          p = n.indexOf('.')
    return n.replace(
        /\d(?=(?:\d{3})+(?:\.|$))/g,
        (m, i) => p < 0 || i < p ? `${m},` : m
    )
}

;[
    format(100),                           // "100"
    format(1000),                          // "1,000"
    format(1e10),                          // "10,000,000,000"  
    format(1000.001001),                   // "1,000.001001"
    format('100000000000000.001001001001') // "100,000,000,000,000.001001001001
]
    .forEach(n => console.log(n))

»Verbose regex स्पष्टीकरण (regex101.com)

प्रवाह आरेख


क्या यह सिंटैक्स आरेख regex101.com पर बनाया गया है?
गेरोल्ड ब्रॉसर

दशमलव के साथ संख्याओं के साथ क्या होता है?
एमिलियानो 14

मुझे "अमान्य नियमित अभिव्यक्ति: अमान्य समूह निर्दिष्ट नाम" मिल रहा है। रिएक्ट नेटिव 0.59 पर ऐसा कर रहा है लेकिन वास्तव में RegEx को प्रभावित नहीं करना चाहिए।
जोशुआ पिंटर

@JoshuaPinter यह लुक-पीछे का उपयोग होगा जिसके लेखन के समय अभी तक सभी प्लेटफार्मों पर समर्थित नहीं है। मैं अनुमान लगा रहा हूँ कि आप विशेष रूप से iOS का उल्लेख कर रहे हैं - क्योंकि सफारी अभी भी मेरे लिए विफल है। अब के लिए पिछड़े संगत संस्करण के साथ रहना सबसे अच्छा हो सकता है। मैं बस अपने जवाब को भविष्य में प्रूफ करने की कोशिश कर रहा था। caniuse.com/#search=lookbehind
दूत

1
@Emissary टिप के लिए धन्यवाद। हाँ, यह रिएक्ट नेटिव 0.59 / Android पर है, जो जावास्क्रिप्टकोर (JSC) के अपेक्षाकृत पुराने संस्करण का उपयोग करता है। रिएक्टिव नेटिव 0.60+ पर अपडेट करने के बाद मैं फिर से कोशिश करूंगा, जिसमें JSC का अपडेट भी शामिल है।
जोशुआ पिंटर

10

एक अच्छा jQuery नंबर प्लगइन है: https://github.com/teamdf/jquery-number

यह आपको दशमलव प्रारूप और हजार के लिए दशमलव अंकों और विभाजक पात्रों के विकल्प के साथ अपने पसंद के किसी भी नंबर को बदलने की अनुमति देता है:

$.number(12345.4556, 2);          // -> 12,345.46
$.number(12345.4556, 3, ',', ' ') // -> 12 345,456

आप इसे सीधे इनपुट फ़ील्ड के अंदर उपयोग कर सकते हैं, जो ऊपर के समान विकल्पों का उपयोग करते हुए, अच्छा है:

$("input").number(true, 2);

या आप चयनकर्ता का उपयोग कर डोम तत्वों के एक पूरे सेट पर आवेदन कर सकते हैं:

$('span.number').number(true, 2);

सबसे अच्छा समाधान imho
Michal

मुझे ऐसा नहीं लगता, लगभग 800 लाइनों के साथ एक नई फ़ाइल की आवश्यकता को जोड़ना, यह एक चींटी को ग्रैनेड के साथ मारने जैसा है
एमिलियानो

6

मैं इसका उपयोग करता हूं:

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

स्रोत: लिंक


'123452343267.0505'.replace(/\B(?=(\d{3})+(?!\d))/g, ","); "123,452,343,267.0,505"- ध्यान दें कि दशमलव बिंदु के बाद अंतिम अल्पविराम।
हिप्पिएट्रेल

5
// thousand separates a digit-only string using commas
// by element:  onkeyup = "ThousandSeparate(this)"
// by ID:       onkeyup = "ThousandSeparate('txt1','lbl1')"
function ThousandSeparate()
{
    if (arguments.length == 1)
    {
        var V = arguments[0].value;
        V = V.replace(/,/g,'');
        var R = new RegExp('(-?[0-9]+)([0-9]{3})'); 
        while(R.test(V))
        {
            V = V.replace(R, '$1,$2');
        }
        arguments[0].value = V;
    }
    else  if ( arguments.length == 2)
    {
        var V = document.getElementById(arguments[0]).value;
        var R = new RegExp('(-?[0-9]+)([0-9]{3})'); 
        while(R.test(V))
        {
            V = V.replace(R, '$1,$2');
        }
        document.getElementById(arguments[1]).innerHTML = V;
    }
    else return false;
}   


3

आप जावास्क्रिप्ट का उपयोग कर सकते हैं। नीचे दिए गए कोड हैं, यह केवल acceptसंख्यात्मक और एक होगाdot

यहाँ जावास्क्रिप्ट है

<script >

            function FormatCurrency(ctrl) {
                //Check if arrow keys are pressed - we want to allow navigation around textbox using arrow keys
                if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
                    return;
                }

                var val = ctrl.value;

                val = val.replace(/,/g, "")
                ctrl.value = "";
                val += '';
                x = val.split('.');
                x1 = x[0];
                x2 = x.length > 1 ? '.' + x[1] : '';

                var rgx = /(\d+)(\d{3})/;

                while (rgx.test(x1)) {
                    x1 = x1.replace(rgx, '$1' + ',' + '$2');
                }

                ctrl.value = x1 + x2;
            }

            function CheckNumeric() {
                return event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 46;
            }

  </script>

एचटीएमएल

<input type="text" onkeypress="return CheckNumeric()" onkeyup="FormatCurrency(this)" />

DEMO JSFIDDLE


2
number = 123456.7089;
result = parseInt( number ).toLocaleString() + "<br>";
result = number.toLocaleString( 'pt-BR' ) + "<br>";

var el = document.getElementById( 'result' );
el.innerHTML = result;
<div id="result"></div>

6
क्या आप कृपया कुछ विवरण जोड़ सकते हैं ताकि ऑप और अन्य लोग यह समझ सकें कि यह कोड वास्तव में समस्या को कैसे हल करता है। धन्यवाद
पुनीत गज्जर

एक सट्टेबाज के साथ प्रयास करें 1000 और 9999
एमिलियानो

1

PHP.js के पास ऐसा करने के लिए एक फ़ंक्शन होता है, जिसे number_format कहा जाता है । यदि आप PHP से परिचित हैं तो यह ठीक उसी तरह काम करता है


पहला लिंक PHP के संस्करण के जेएस कार्यान्वयन का अनुसरण करता है। येह काम का है।
o_nix

1

तुम सब करने की ज़रूरत है सिर्फ सच है यह :

123000.9123.toLocaleString()
//result will be "123,000.912"

दुर्भाग्य से यह आपके प्लेटफॉर्म पर निर्भर करता है। कुछ के पास toLocaleString()कॉमा नहीं है, या मानक में अन्य सुविधाओं का अभाव है। toLocaleStringउपस्थिति की जाँच करना आसान है, लेकिन इसके अनुपालन की जाँच नहीं करना।
हिप्पिट्रैसिल

1000 और 9999 के बीच एक संख्या के साथ प्रयास करें
एमिलियानो

0

प्रतिक्रिया के लिए समाधान का संयोजन

  let converter = Intl.NumberFormat();
  let salary =  monthlySalary.replace(/,/g,'')
  console.log(converter.format(salary))

  this.setState({
    monthlySalary: converter.format(salary)
  })
}

handleOnChangeMonthlySalary(1000)```

0

आप ngx-format-field का उपयोग कर सकते हैं। यह इनपुट मूल्य को प्रारूपित करने का एक निर्देश है जो दृश्य में दिखाई देगा। यह इनपुट मूल्य में हेरफेर नहीं करेगा जो बैकएंड में सहेजा जाएगा। लिंक यहां देखें !

उदाहरण:

component.html:

<input type="text" formControlName="currency" [appFormatFields]="CURRENCY"
(change)="onChangeCurrency()">

component.ts

onChangeCurrency() {
this.currency.patchValue(this.currency.value);
}

डेमो देखने के लिए: यहाँ !


0

आप निम्न फ़ंक्शन का उपयोग कर सकते हैं:

function format(number, decimals = 2, decimalSeparator = '.', thousandsSeparator = ',') {
  const roundedNumber = number.toFixed(decimals);
  let integerPart = '',
    fractionalPart = '';
  if (decimals == 0) {
    integerPart = roundedNumber;
    decimalSeparator = '';
  } else {
    let numberParts = roundedNumber.split('.');
    integerPart = numberParts[0];
    fractionalPart = numberParts[1];
  }
  integerPart = integerPart.replace(/(\d)(?=(\d{3})+(?!\d))/g, `$1${thousandsSeparator}`);
  return `${integerPart}${decimalSeparator}${fractionalPart}`;
}

// Use Example

let min = 1556454.0001;
let max = 15556982.9999;

console.time('number format');
for (let i = 0; i < 15; i++) {
  let randomNumber = Math.random() * (max - min) + min;
  let formated = format(randomNumber, 4, ',', '.'); // formated number

  console.log('number: ', randomNumber, '; formated: ', formated);
}
console.timeEnd('number format');


इतना भ्रमित मत करो। बस toLocaleString () का उपयोग करें। Developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Sajad Saderi

@sajadsaderi मैं toLocaleString () मित्र का भी उपयोग करता हूं, लेकिन यह फ़ंक्शन मुझे अधिक लचीलापन नहीं देता है, इसलिए मुझे क्षेत्रीय संक्षिप्तताओं से निपटने की आवश्यकता नहीं है और कोई और इसका उपयोग कर सकता है क्योंकि इस फ़ंक्शन की परिभाषा संख्या_सेलेट के समान है () php का कार्य।
jin_maxtor

-1

मुझे यहां कोई भी जवाब पसंद नहीं आया, इसलिए मैंने एक समारोह बनाया जो मेरे लिए काम कर रहा था। यदि कोई अन्य इसे उपयोगी पाता है तो बस साझा करना चाहते हैं।

function getFormattedCurrency(num) {
    num = num.toFixed(2)
    var cents = (num - Math.floor(num)).toFixed(2);
    return Math.floor(num).toLocaleString() + '.' + cents.split('.')[1];
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.