如何使用逗号作为千位分隔符在JavaScript中打印数字

时间:2010-05-24 23:42:31

标签: javascript formatting numbers

我正在尝试使用逗号作为千位分隔符在JavaScript中打印整数。例如,我想将数字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;
}

有更简单或更优雅的方式吗?如果它也适用于浮点数会很好,但这不是必需的。它不需要特定于语言环境来决定句点和逗号。

55 个答案:

答案 0 :(得分:2395)

我使用了克里答案的想法,但简化了它,因为我只是为了我的特定目的而寻找简单的东西。这是我做的:

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

这是你真正需要知道的。

@Neils Bom询问正则表达式的工作原理。我的解释有点长。它不适合评论,我不知道在哪里放,所以我在这里做。如果有人有任何其他建议,请告诉我。

正则表达式使用2个前瞻断言:一个正向查找字符串中的任何一个点,后面有一个3位数的倍数,以及一个否定断言以确保该点只有3的倍数数字。替换表达式在那里添加逗号。

例如,如果你传递它“123456789.01”,肯定断言将匹配7左边的每个点(因为“789”是3位数的倍数,“678”是3位数的倍数,“ 567“等)。否定断言检查3位数的倍数后面没有任何数字。 “789”之后有一段时间,所以它正好是3位数的倍数,所以逗号就在那里。 “678”是3位数的倍数,但它后面有一个“9”,所以这3个数字是一组4的一部分,逗号不会去那里。同样对于“567”。 “456789”是6位数,是3的倍数,所以在此之前使用逗号。 “345678”是3的倍数,但它后面有一个“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(".");
}

答案 1 :(得分:1378)

我很惊讶没人提到Number.prototype.toLocaleString。 它是在JavaScript 1.5(1999年推出)中实现的,因此基本上支持所有主流浏览器。

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

通过包含Intl

,它也适用于v0.12的Node.js

请注意,此函数返回一个字符串,而不是一个数字。

如果你想要不同的东西,Numeral.js可能会很有趣。

答案 2 :(得分:204)

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

⚠请注意,javascript的maximum integer 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"


NumberFormat(不支持 Safari ):

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

根据我的检查(至少是Firefox),他们在性能方面或多或少相同。

答案 3 :(得分:98)

我建议使用phpjs.org的number_format()

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

人们一直在报告这不能按预期工作,所以我做了JS Fiddle,其中包括自动化测试。

更新26/11/2017

这是一个小块,作为一个稍微修改输出的Stack Snippet:

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;
}

答案 4 :(得分:67)

这是@ mikez302的答案的变体,但修改为支持带小数的数字(根据@ neu-rah的反馈,numberWithCommas(12345.6789) - &gt;“12,345.6,789”而不是“12,345.6789”

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

答案 5 :(得分:58)

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

答案 6 :(得分:45)

使用正则表达式

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"

ref Intl.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>

性能

Performance http://jsben.ch/sifRd

答案 7 :(得分:34)

Intl.NumberFormat

原生JS功能。支持IE11,Edge,最新的Safari,Chrome,Firefox,Opera,iOS上的Safari和Android上的Chrome。

var number = 3500;

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

答案 8 :(得分:32)

感谢大家的回复。我已经建立了一些答案,以制定更“一刀切”的解决方案。

第一个代码段添加了一个模拟PHPnumber_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原型中。

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

答案 9 :(得分:21)

我认为这是最短的正则表达式:

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

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

我在一些数字上检查了它并且有效。

答案 10 :(得分:18)

Number.prototype.toLocaleString()如果它是由所有浏览器(Safari)本地提供的话,那就太棒了。

我检查了所有其他答案,但似乎没有人填充它。这是对此的poc,实际上是前两个答案的组合;如果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));

答案 11 :(得分:16)

可以使用浏览器的Intl对象以国际友好的方式插入千位分隔符:

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

有关详细信息,请参阅MDN's article on NumberFormat,您可以指定区域设置行为或默认为用户的行为。这更加万无一失,因为它尊重当地的差异;许多国家使用句点来分隔数字,而逗号表示小数。

Intl.NumberFormat尚未在所有浏览器中提供,但它适用于最新的Chrome,Opera和&amp; IE浏览器。 Firefox的下一个版本应该支持它。 Webkit似乎没有实施的时间表。

答案 12 :(得分:15)

您可以使用此程序格式化您需要的货币。

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/

答案 13 :(得分:13)

如果您正在处理货币值并格式化很多,那么可能需要添加处理大量边缘案例和本地化的小accounting.js

// 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

答案 14 :(得分:12)

这个问题得到的答案让我印象深刻。我喜欢 uKolka 的答案:

n.toLocaleString()

但是不幸的是,在西班牙语等某些语言环境中,对于10,000以下的数字,它无法正常工作(IMHO):

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

授予1000,而不授予1.000

请参阅toLocaleString not working on numbers less than 10000 in all browsers以了解原因。

所以我不得不使用 Elias Zamaria 的答案,选择正确的千位分隔符:

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的表达式来查找小数点的正确字符和当前语言环境的千位分隔符(请记住,这些字符需要更现代的Javascript。)

答案 15 :(得分:12)

以下代码使用char扫描,因此没有正则表达式。

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

2015.4.26:当num&lt; 0时解决问题的次要修复。见https://jsfiddle.net/runsun/p5tqqvs3/

答案 16 :(得分:9)

这是一个简单的函数,可以为千位分隔符插入逗号。它使用数组函数而不是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('');
};

CodeSandbox链接示例:https://codesandbox.io/s/p38k63w0vq

答案 17 :(得分:7)

我在写这篇文章之前写了这篇文章。没有正则表达式,你可以真正理解代码。

&#13;
&#13;
$(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' ) );
  
  
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="theDudeAbides"></div>
&#13;
&#13;
&#13;

答案 18 :(得分:6)

对我来说,最好的答案是像一些成员所说的那样使用toLocaleString。 如果您想要包含'$'符号,只需添加语言和类型选项即可。 以下是将数字格式化为墨西哥比索

的示例

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

快捷

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

答案 19 :(得分:6)

我的答案是唯一用更明智的选择完全替代jQuery的答案:

var datasets = [1, 2, 3];
var ctx = document.getElementById('chart').getContext('2d');
var thresholdValue = 2;
var thresholdHighArray = new Array(datasets.length).fill(thresholdValue);
var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [
                {datasets}, thresholdHighArray]
            },         
            options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                                display: true,
                                labelString: 'Readings'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                                display: true,
                                labelString: 'Reading ( °C )'
                        }
                    }]
                },
                annotation: {
                  annotations: [
                    {
                      type: "line",
                      mode: "vertical",
                      scaleID: "x-axis-0",
                      borderColor: "red",
                      label: {
                        content: "",
                        enabled: true,
                        position: "top"
                      }
                    }
                  ]
                }
        });
    };

此解决方案不仅添加逗号,而且在您输入function $(dollarAmount) { const locale = 'en-US'; const options = { style: 'currency', currency: 'USD' }; return Intl.NumberFormat(locale, options).format(dollarAmount); } 之类的金额时,也会四舍五入到最接近的美分,您会得到$ 1,001.00。此外,您输入的值可以安全地是数字或字符串;例如,没关系。

如果您正在处理货币,但不希望在金额上显示前导美元符号,则还可以添加此函数,该函数使用前一个函数但删除$(1000.9999)

$

如果您处理金钱,并且对十进制格式要求有所不同,则可以使用以下更通用的功能:

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

哦,顺便说一句,此代码在某些旧版本的Internet Explorer中不起作用是完全有意的。我试图在不支持现代标准的任何时候破坏IE。

请记住,在评论部分中,过度赞美被认为是题外话。而是给我上投票。

答案 20 :(得分:5)

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(".");
}

编辑: 该功能仅适用于正数。例如:

var number = -123123231232;
formatNumber(number)

输出:&#34; 123,123,231,232&#34;

但是回答上面的问题toLocaleString()方法只是解决了问题。

var number = 123123231232;
    number.toLocaleString()

输出:&#34; 123,123,231,232&#34;

振作!

答案 21 :(得分:5)

让我尝试改进uKolkaanswer,也许可以帮助别人节省一些时间。

使用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()不是问题时,您才应该使用browser compatibilty

答案 22 :(得分: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;
}

答案 23 :(得分:3)

我添加了 Aki143S 的解决方案。 此解决方案使用数千个分隔符的点和精度的逗号。

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

答案 24 :(得分: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"

答案 25 :(得分:2)

我认为您的解决方案是我见过的较短的解决方案之一。我不认为有任何标准的JavaScript函数可以做这种事情,所以你可能是你自己的。

我检查了CSS 3规范,看看是否可以在CSS中执行此操作,但除非您想要自己的<span>中的每个数字,否则我认为不可能。

我确实在Google Code找到了一个看起来很有希望的项目:flexible-js-formatting。我没有使用它,但它看起来非常灵活,并使用JsUnit进行单元测试。开发人员也有很多关于这个主题的帖子(虽然陈旧)。

请务必考虑国际用户:许多国家/地区使用空格作为分隔符,并使用逗号将小数与数字的整数部分分开。

答案 26 :(得分:2)

我的 true 仅用于正则表达式的解决方案用于那些喜欢单线的人

您看到上面那些热情的球员吗?也许你可以打高尔夫球。这是我的中风。

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

使用 THIN SPACE (U + 2009)来表示千位分隔符,如国际单位制在{ {3}}(请参阅第5.3.4节)。 the eighth edition(2006) of their publication “SI Brochure: The International System of Units (SI)建议为其使用一个空格(请参见第5.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 ")放入“ I”
    • /……/g在每个
      • \B在两个相邻数字之间
        • (?=……) 正面朝圣者,其右侧为
          • (\d{3})+一个或多个三位数字块
          • \b后跟一个非数字,例如句点,字符串的结尾等。
        • (?<!……) 负向隐藏(不包括左侧部分)
          • \.\d+是一个点后跟数字(“有小数点分隔符”)。

对于小数部分

.replace(/(?<=\.(\d{3})+)\B/g, " F ")
  • .replace(……, " F ")放入“ F”
    • /……/g在每个
      • \B在两个相邻数字之间
        • (?<=……) 正向隐藏,其左侧为
          • \.小数点分隔符
          • (\d{3})+后跟一个或多个三位数的块。

The ninth edition(2019)Character classes

  

\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匹配。
  •   

浏览器兼容性

答案 27 :(得分:2)

来自@ user1437663的解决方案很棒。

谁真正了解解决方案正准备理解复杂的正则表达式。

一项小改进,使其更具可读性:

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

模式以 \ B 开头,以避免在单词的开头使用逗号。有趣的是,模式返回为空,因为 \ B 不会使“光标”前进(同样适用于 $ )。

O \ B 之后是不太知名的资源,但它是Perl正则表达式的强大功能。

            Pattern1 (? = (Pattern2) ).

神奇的是括号中的内容( Pattern2 )是一个遵循前一个模式( Pattern1 )的模式,但没有推进光标,也不属于返回的模式。这是一种未来的模式。当有人期待但真的不走路时,这是相似的!

在这种情况下, pattern2

\d{3})+(?=$)

表示3位数字(一次或多次),后跟字符串结尾($)

最后,替换方法会更改所有出现的模式(空字符串)以替换逗号。这仅在剩余部分是3位数的倍数的情况下发生 (未来光标到达原点结束的情况。)

答案 28 :(得分:1)

这是一个带有int&amp;的单行函数小数支持。我留下了一些代码来将数字转换为字符串。

    function numberWithCommas(x) {
        return (x=x+'').replace(new RegExp('\\B(?=(\\d{3})+'+(~x.indexOf('.')?'\\.':'$')+')','g'),',');
    }

答案 29 :(得分:1)

仅适用于将来的Google员工(或不一定是“ Google员工”):

上面提到的所有解决方案都很棒,但是,在这种情况下使用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

这里使用的正则表达式非常简单,循环将精确地完成工作所需的次数。

您可能会对其进行优化,例如“ DRYify”代码等等。

但是

(-1234567.0987).toLocaleString();

(在大多数情况下)将是一个更好的选择。

重点不在于执行速度或跨浏览器兼容性。

在您想要向用户显示结果编号的情况下,.toLocaleString()方法使您能够与网站或应用程序的用户(无论他/他的语言是哪种语言)说相同的语言。 >

根据ECMAScript文档,这种方法是在1999年引入的,我相信这样做的原因是希望互联网能够在某个时候将世界各地的人们连接起来,因此,需要一些“内部化”工具。 / p>

今天,互联网确实将我们所有人连接在一起,因此,重要的是要记住,世界是一种我们可以想象的更复杂的方式,并且(几乎)我们所有人都在这里,在互联网上。

很明显,考虑到人的多样性,因为我们会说不同的语言,重视不同的事物等,所以不可能为每个人都保证完美的UX。正因为如此,尽可能地使事物本地化就显得尤为重要。可能的话。

因此,考虑到有一些特定的日期,时间,数字等表示标准,并且我们拥有一种可以以最终用户偏爱的格式显示这些内容的工具,这种情况并不罕见,而且几乎不负责任地不使用该工具(特别是在我们希望向用户显示此数据的情况下)?

对我来说,在这种情况下使用RegExp而不是.toLocaleString()听起来有点像用JavaScript创建时钟应用并对其进行硬编码,以便仅显示布拉格时间(对于不住在布拉格的人来说是没有用的),即使默认行为是

new Date();

用于根据最终用户的时钟返回数据。

答案 30 :(得分:1)

我发现了一种适用于各种情况的方法。 CodeSandbox example

function commas(n) {
  if (n < 1000) {
    return n + ''
  } else {
    // Convert to string.
    n += ''

    // Skip scientific notation.
    if (n.indexOf('e') !== -1) {
      return n
    }

    // Support fractions.
    let i = n.indexOf('.')
    let f = i == -1 ? '' : n.slice(i)
    if (f) n = n.slice(0, i)

    // Add commas.
    i = n.length
    n = n.split('')
    while (i > 3) n.splice((i -= 3), 0, ',')
    return n.join('') + f
  }
}

这与Noah Freitas' answer类似,但支持分数科学记数法

如果表现不是问题,我认为toLocaleString是最佳选择。

编辑:这是一个包含一些示例的CodeSandbox:https://codesandbox.io/s/zmvxjpj6x

答案 31 :(得分:1)

一般的快速功能,效果会很好:

  • 如果值是数字或字符串
  • 如果该数字不是英文数字
  • 该数字是否为小数
  • [可选]如果不是从后面粘在上面,而是从一端粘在上面:50000Kg
  • 如果几个数字用字符串分隔

最小化的功能,可实现快速,安全且轻便的重量:

function sepNum(r,e){return e=e||",",r=String(r).replace(/[\u0660-\u0669\u06f0-\u06f9]/g,function(r){return 15&r.charCodeAt(0)}).replace(/(?:[^\.]|^)\b(\d+)/g,function(r){return r=r.replace(/\B(?=(\d{3})+\b)/g,e)})}

Text='1000000 and .0002 5000.1234 with 500000Kg but not V10012.231';
console.log(sepNum(Text));

+ 说明:

function thousandSeparatorAllNonDecimal (x,sep) { 
        if(!sep) sep=','; //seprator by defualt is comma but can be changed
    x=String(x) // Making Sure the X is String, because RegEx will work just with strings
  .replace(/[\u0660-\u0669\u06f0-\u06f9]/g, // [Optional] RegEx for Finding all non English Digit (like ["١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩", "٠"]
  function (c) { return c.charCodeAt(0) & 0xf; }) // return of the function of the Regex => Replacing all with the same Englsih Digit (possible some android keyboards just type non english digit)
  .replace(/(?:[^\.]|^)\b(\d+)/g, // Finding all numbers that are not started by dot by the RegEx :
  // 0) (?:) : any that
  // 1) [^\.] : not same to dot
  // 2) |^ or any thing else that
  // 3) \b : not sticked to any word from behind [Optional] (it can have another \b in end to check if not sticked from front to any word too, or no any \b too, but we want it take some numbers like 50000Kg)
  // +5) 
  function(x){ // Process them one by one separated, by this function
  x=x.replace(/\B(?=(\d{3})+\b)/g, // Now by this RegEx replacing any 3 by 3 digit
  sep); // now using separator in the RegEx replace
  return x;} // now return the result to main function
  );return x // and returning the main result out
}

对于非十进制和十进制,最快的正则表达式可以只是:

  

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

但是我仍然像@uKolka所说的那样,对单个值加上一些前缀[可选:parseFloat]和后缀[可选:替换'.00']的正确想法是:

Num=parseFloat(Num).toLocaleString('en-US',{minimumFractionDigits:2,maximumFractionDigits:2,useGrouping:true}).replace('.00','');

作为此处的完整示例: https://jsfiddle.net/PAPIONbit/198xL3te/

答案 32 :(得分:1)

在这里找不到现代和全面的解决方案后,我编写了一个箭头函数(没有正则表达式)来解决格式问题,它允许调用者提供小数位数以及欧洲和世界其他地区的期间和千位分隔符

  

示例:

numberFormatter(1234567890.123456) => 1,234,567,890
numberFormatter(1234567890.123456, 4) => 1,234,567,890.1235
numberFormatter(1234567890.123456, 4, '.', ',') => 1.234.567.890,1235 Europe

以下是用 ES6 (现代语法)编写的函数:

const numberFormatter = (number, fractionDigits = 0, thousandSeperator = ',', fractionSeperator = '.') => {
    if (number!==0 && !number || !Number.isFinite(number)) return number
    const frDigits = Number.isFinite(fractionDigits)? Math.min(Math.max(fractionDigits, 0), 7) : 0
    const num = number.toFixed(frDigits).toString()

    const parts = num.split('.')
    let digits = parts[0].split('').reverse()
    let sign = ''
    if (num < 0) {sign = digits.pop()}
    let final = []
    let pos = 0

    while (digits.length > 1) {
        final.push(digits.shift())
        pos++
        if (pos % 3 === 0) {final.push(thousandSeperator)}
    }
    final.push(digits.shift())
    return `${sign}${final.reverse().join('')}${frDigits > 0 ? fractionSeperator : ''}${frDigits > 0 && parts[1] ? parts[1] : ''}`
}

已经测试了负面,输入错误和NaN情况。如果输入为 NaN ,则只返回它。

答案 33 :(得分:1)

这是我的尝试:

编辑:小数点后添加

&#13;
&#13;
function splitMille(n, separator = ',') {
  // Cast to string
  let num = (n + '')

  // Test for and get any decimals (the later operations won't support them)
  let decimals = ''
  if (/\./.test(num)) {
    // This regex grabs the decimal point as well as the decimal numbers
    decimals = num.replace(/^.*(\..*)$/, '$1')
  }
  
  // Remove decimals from the number string
  num = num.replace(decimals, '')
    // Reverse the number string through Array functions
    .split('').reverse().join('')
    // Split into groups of 1-3 characters (with optional supported character "-" for negative numbers)
    .match(/[0-9]{1,3}-?/g)
    // Add in the mille separator character and reverse back
    .join(separator).split('').reverse().join('')

  // Put the decimals back and output the formatted number
  return `${num}${decimals}`
}

let testA = splitMille(1234)
let testB = splitMille(-1234)
let testC = splitMille(123456.789)
let testD = splitMille(9007199254740991)
let testE = splitMille(1000.0001)

console.log('Results!\n\tA: %s\n\tB: %s\n\tC: %s\n\tD: %s\n\tE: %s', testA, testB, testC, testD, testE)
&#13;
&#13;
&#13;

答案 34 :(得分:1)

对于喜欢1-线性和单个正则表达式但不希望使用split()的任何人,这是正则表达式的增强版本,它包含其他处理(忽略)小数点的答案地点:

    var formatted = (x+'').replace(/(\..*)$|(\d)(?=(\d{3})+(?!\d))/g, (digit, fract) => fract || digit + ',');

正则表达式 first 匹配以文字“。”开头的子字符串。并将其替换为自身(“ fract”),然后 then 匹配任意数字,后跟3个数字的倍数,并在其后加上“,”。

例如, x = 12345678.12345678将给出格式化的 = '12,345,678.12345678'。

答案 35 :(得分:1)

如果您正好使用AngularJS,那么这种货币过滤器肯定有帮助:http://www.w3schools.com/angular/ng_filter_currency.asp

答案 36 :(得分:1)

let formatNumber = (number) => {
    let str = String(number)

    return str.split('').reduce(
        (a, b, i) => a + (i && !((str.length - i) % 3) ? ',' : '') + b,
        ''
    )
}

答案 37 :(得分:1)

如果您正在寻找一种简短而甜美的解决方案:

const number = 12345678.99;

const numberString = String(number).replace(
    /^\d+/,
    number => [...number].map(
        (digit, index, digits) => (
            !index || (digits.length - index) % 3 ? '' : ','
        ) + digit
    ).join('')
);

// numberString: 12,345,678.99

答案 38 :(得分:1)

我已经调整了你的代码在TextBox中工作(输入类型=“文本”),这样我们就可以实时输入和删除数字而不会丢失光标。如果您在删除时选择范围,它也有效。您可以自由使用箭头和主页/结束按钮 谢谢你节省我的时间!

//function controls number format as "1,532,162.3264321"
function numberWithCommas(x) {
    var e = e || window.event;
    if (e.keyCode >= '35' && e.keyCode <= '40') return; //skip arrow-keys
    var selStart = x.selectionStart, selEnd = x.selectionEnd; //save cursor positions
    var parts = x.value.toString().split(".");
    var part0len = parts[0].length; //old length to check if new ',' would be added. Need for correcting new cursor position (+1 to right).

    //if user deleted ',' - remove previous number instead (without selection)
    if (x.selectionLength == 0 && (e.keyCode == 8 || e.keyCode == 46)) {//if pressed 8-backspace or 46-delete button
        var delPos = parts[0].search(/\d{4}/);
        if (delPos != -1) {//if found 4 digits in a row (',' is deleted)
            if (e.keyCode == 8) {//if backspace flag
                parts[0] = parts[0].slice(0, selStart - 1) + parts[0].slice(selEnd, parts[0].length);
                selEnd--;
                if (selStart > selEnd) selStart = selEnd;
            } else {
                parts[0] = parts[0].slice(0, selStart) + parts[0].slice(selEnd + 1, parts[0].length);
                selStart++;
                if (selEnd < selStart) selEnd = selStart;
            }
        }
    }

   var hasMinus = parts[0][0] == '-';
   parts[0] = (hasMinus ? '-' : '') + parts[0].replace(/[^\d]*/g, ""); //I'd like to clear old ',' to avoid things like 1,2,3,5,634.443216
   parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); //sets ',' between each 3 digits
   if (part0len < parts[0].length) { //move cursor to right if added new ','
       selStart++;
       selEnd++;
   } else if (part0len > parts[0].length) { //..or if removed last one ','
       selStart--;
       selEnd--;
   }
   x.value = parts.join(".");
   x.setSelectionRange(selStart, selEnd); //restoring cursor position
}
function saveSelectionLength(x) {
    x.selectionLength = x.selectionEnd - x.selectionStart;
}

要使用它,只需添加两个事件 - onKeyUp和onKeyDown

<asp:TextBox runat="server" ID="val" Width="180px" onKeyUp="numberWithCommas(this);" onKeyDown="saveSelectionLength(this);"/>

答案 39 :(得分:1)

另一种方法,支持小数,不同的分隔符和底片。

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.abs(Math.ceil(number)).toString()

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

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

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

    return f;
}

答案 40 :(得分:0)

<input type="text" onKeyup="CommaWithDecimal(this.value, this.id)" class="form-control" id="number_format" placeholder="0.00" size="8" value="">
<块引用>

此函数用于数字格式以及最多两个值的小数。 在这个函数中处理输入数字的所有场景。

function CommaWithDecimal(x,fid,valuetoAdd = 0) {

x = x.replace(/[^0-9.,]/g, "");
x = x.trim();
var isValueAdded = 0;
if(x == '' && valuetoAdd != 0){
  x = valuetoAdd.toString();
  isValueAdded = 1;
}

if(x != ''){
    if(parseInt(x) <= 0){
        $('input[id$="'+fid+'"]').val(''); //not allow zero
    }else if((x.indexOf(".") != -1 || x.indexOf(",") != -1) && x.length == 1){ //not allowed ,  and .
        $('input[id$="'+fid+'"]').val('');
    }else{

        var isPoint = x.indexOf(".");
        x = x.replace(/^0+/, ''); //remove leading zeros
        x = x.replace(/\,/g,''); //remove comma
        x = x.replace('.00',''); //remove .00 from last
        var pointArr = x.split('.');
        var lastPointValue = 0;

        if(pointArr.length > 1){
            lastPointValue = pointArr[1];
            if(lastPointValue != '' && lastPointValue.length >= 1){
                lastPointValue = lastPointValue.substr(0, 2);

            }
        }

        var x = pointArr[0];
        if(x == ''){
          x = 0;
        }
        if(isValueAdded == 0){
          x = parseInt(x)+valuetoAdd;
        }
        x = x.toString();
        var lastThree = x.substring(x.length-3);
        var otherNumbers = x.substring(0,x.length-3);
        if(otherNumbers != '')
            lastThree = ',' + lastThree;
        var res = otherNumbers.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + lastThree;
        if(isPoint != -1){
            res = res+"."+lastPointValue;
        }
        $('input[id$="'+fid+'"]').val(res);
    }
}else{
    $('input[id$="'+fid+'"]').val('');
 }
}
<块引用>

使用此代码并在输入字段中仅传递带有 id 和值的函数名称,然后在屏幕上查看结果。以及您可以仅调用该函数即可以相同的形式应用多个位置。无需为多个输入字段添加额外代码。

<块引用>

输出 - Output -

答案 41 :(得分:0)

也许可以用简单的方法解决:

console.log(parseFloat(parseFloat(n.split(',').join('.')).toFixed(2)))

答案 42 :(得分:0)

尝试使用此代码,

function comma_digit(t, e) {
    if (e.which >= 37 && e.which <= 40) {
        e.preventDefault();
    }
    $(t).val(function (index, value) {
        return value.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
            // .replace(/\D/g, '')
            // .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
        ;
    });
}

答案 43 :(得分:0)

您可以在Number原型上创建一个函数

Number.prototype.format = function (s, d) {
  return (
    this.toString()
      .split(".")
      .map((n, i) =>
        i
          ? n
          : n
              .split("")
              .map((n, i) => (i % 3 || !i ? n : s + n))
              .join("")
      )
      .join(d)
  );
};

console.log((8800.00).format(',', '.'))
// 8,880.00

// French notation
console.log((8800.00).format(' ', ','))
// 8 880,00

答案 44 :(得分:0)

您还可以使用JavaScript NumberFormate 。这是一种方法。

var data = {
  "Meta Data": {
    "1. Information": "Intraday (5min) open, high, low, close prices and volume",
    "2. Symbol": "MSFT",
    "3. Last Refreshed": "2019-07-26 16:00:00", // use this value as key
    "4. Interval": "5min",
    "5. Output Size": "Full size",
    "6. Time Zone": "US/Eastern"
  },
  "Time Series (5min)": {
    "2019-07-26 16:00:00": {
      "1. open": "141.6000",
      "2. high": "141.6500",
      "3. low": "141.3000",
      "4. close": "141.3300",
      "5. volume": "854096"
    },
    "2019-07-26 15:55:00": {
      "1. open": "141.5900",
      "2. high": "141.6750",
      "3. low": "141.5750",
      "4. close": "141.5950",
      "5. volume": "400982"
    }
  }
}

var last = data["Meta Data"]["3. Last Refreshed"]

console.log( last, data["Time Series (5min)"][last] )

答案 45 :(得分:0)

我以为我会分享一些我用于大量格式化的小技巧。 我没有插入逗号或空格,而是在“千”之间插入一个空但可见的跨度。这使数千个容易看到,但它允许以原始格式复制/粘贴输入,没有逗号/空格。

// This function accepts an integer, and produces a piece of HTML that shows it nicely with 
// some empty space at "thousand" markers. 
// Note, these space are not spaces, if you copy paste, they will not be visible.
function valPrettyPrint(orgVal) {
  // Save after-comma text, if present
  var period = orgVal.indexOf(".");
  var frac = period >= 0 ? orgVal.substr(period) : "";
  // Work on input as an integer
  var val = "" + Math.trunc(orgVal);
  var res = "";
  while (val.length > 0) {
    res = val.substr(Math.max(0, val.length - 3), 3) + res;
    val = val.substr(0, val.length - 3);
    if (val.length > 0) {
        res = "<span class='thousandsSeparator'></span>" + res;
    }
  }
  // Add the saved after-period information
  res += frac;
  return res;
}

使用这个CSS:

.thousandsSeparator {
  display : inline;
  padding-left : 4px;
}

查看示例JSFiddle.

答案 46 :(得分:0)

印度数字系统

var number = "323483.85"
var decimal = number.split(".");
var res = (decimal[0].length>3? numberWithCommas(decimal[0].substring(0,decimal[0].length-3))+ ',' :decimal[0]) + (decimal[0].length>3?decimal[0].substring(decimal[0].length-3,decimal[0].length):'') + '.' + decimal[1];

产出:3,23,483.85

答案 47 :(得分:0)

这是一个很好的解决方案,编码较少......

var y = "";
var arr = x.toString().split("");
for(var i=0; i<arr.length; i++)
{
    y += arr[i];
    if((arr.length-i-1)%3==0 && i<arr.length-1) y += ",";
}

答案 48 :(得分:0)

对于整数,我使用了一种非常简单的方法:

var myNumber = 99999,
    myString = myNumber + "";

myString.length > 3 ? return myString.substring(0, myString.length - 3) + "," + 
    myString.substring(myString.length - 3) : return myString;

答案 49 :(得分:-1)

您可以使用for循环将逗号添加到数字

function convertNumber(){
    var _cash = cash.toString()
    var _formattedCash = ''
    var count = 0

    for (let i = _cash.length; i >= 0; i--) {
        _formattedCash += _cash.substring(i,i+1)

        if(count == 3 && i > 0){
            _formattedCash += ','
            count = 0
        }
        count++
    }

    var _format = ''

    for (let i = _formattedCash.length; i >= 0; i--) {
        _format += _formattedCash.substring(i, i + 1)
    }

    return 'Ksh ' + _format;
}

答案 50 :(得分:-1)

  

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;
}

addCommas(parseFloat("1099920.23232").toFixed(2)); //Output  1,099,920.23

答案 51 :(得分:-1)

现在应该可以...编辑,如果数字是小数,则添加小数位。

<script>
  function makedollars(mynumber)
      {
       mynumber = mynumber.toString();
    var numberend="";

  if(mynumber.split('.').length>1){
       var mynumbersplit = mynumber.split('.');
     mynumber = mynumbersplit[0];
   numberend= mynumbersplit[1];

  }

      var  mn = mynumber.length;

      if (mn <= 3) { return mynumber + numberend; }
      var grps = [];

        while (mn > 3)
        {  
            grps.push(mynumber.substring(mn,mn - 3));
            mn = mn - 3;
        }
        grps.push(mynumber.substring(mn,mn - 3));
      grps.reverse();

        grps.join(",");
        if(numberend!=""){ grps =  grps +"."+numberend;}

        return grps; 
              }


 </script>

答案 52 :(得分:-1)

将此用于以点为千位分隔符和逗号为小数点分隔符的德语布局:

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

完整用法示例:

function show()
{
  var val = jQuery("#number").val();
  jQuery("#output").htmlNumber(val);
}

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

jQuery.fn.extend({
    htmlNumber: function(value) {
        this.html(numberWithCommas(value));
        return this;
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Enter value: <input id="number" type="number">
<p id="output">{{x}}</p>
<button onclick="show()" id="calc">Show</button>

答案 53 :(得分:-1)

又一个......(对于问题的问题而言)

function insertCommas(str)
{
    var a = str.split("");
    a.reverse();

    var t, i = 0, arr = Array();

    while (t = a.shift())
    {
       if (((i++ % 3) == 0) && arr.length > 0)
           arr.unshift(",");
       arr.unshift(t);
    }

    return arr.join("");
}

答案 54 :(得分:-7)

您可以使用printf - 方式,例如:

double number = 1234567;
System.out.printf("%,.2f" , number);