如何在JavaScript中以逗号将数字打印为千位分隔符

2020/09/15 13:01 · javascript ·  · 0评论

我正在尝试在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;
}

有更简单或更优雅的方法吗?如果它也可以与浮点数一起使用,那就太好了,但这不是必须的。在句点和逗号之间进行决定不需要特定于区域设置。

我使用了Kerry的回答中的想法,但是由于我只是为了自己的特定目的寻找简单的东西,所以简化了它。这是我所做的:

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


正则表达式使用2个超前断言:

  • 一个正数,用于查找字符串中连续三位数的倍数的任何点,
  • 否定断言以确保该点仅具有3位数的整数倍。替换表达式在此处放置逗号。

例如,如果传递它123456789.01,则肯定断言将匹配7左边的每个点(因为它789是3位数678的倍数3位数的倍数,依此567类推)。否定断言检查3位数的倍数后是否没有任何数字。789在其后有一个句点,因此它恰好是3位数的倍数,因此逗号在此处。678是3位数的倍数,但是9后面有一个后跟,因此这3位数是4位一组的一部分,并且逗号不在该位置。同样适用于567456789是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(".");
}

@ tjcrowder指出,现在JavaScript已经落后了(支持信息),可以在正则表达式本身中解决它:

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

(?<!\.\d*).后面有一个否定的表示后面不能有零或多个数字的匹配项至少在V8中,负向后看比splitjoin解决方案(比较

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

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

通过包含Intl,它也可以从v0.12版本开始在Node.js中工作。

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

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

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

⚠记住javascript的最大整数值为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),它们在性能上或多或少都相同。

我建议使用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

这是作为堆栈片段的小提琴,其输出略有修改:

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

这是@ mikez302答案的一种变体,但已修改为支持带小数的数字(根据@ neu-rah的反馈,即numberWithCommas(12345.6789)->“ 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] : "");
}
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

使用正则表达式

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

引用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>

性能

性能
http://jsben.ch/sifRd

国际编号格式

原生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

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

第一个片段添加功能模仿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。因此,我创建了自己的float转换函数,并将其添加到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

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

n.toLocaleString()

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

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

给与10001.000

请参阅toLocaleString在所有浏览器中小于10000的数字不起作用,以了解原因。

因此,我不得不使用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。)

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

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

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

我检查了一些数字,它奏效了。

Number.prototype.toLocaleString()如果它是所有浏览器(Safari)本身提供的,那将是很棒的

我检查了所有其他答案,但似乎没有人将其填满。这是一个问题,实际上是前两个答案的结合。如果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));

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

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

有关更多信息,请参见MDN关于NumberFormat的文章,您可以指定区域设置行为或默认使用用户的行为。这一点更加简单,因为它尊重局部差异。许多国家/地区使用句点分隔数字,而逗号则表示小数。

Intl.NumberFormat并非在所有浏览器中都可用,但可以在最新的Chrome,Opera和IE中使用。Firefox的下一个版本应支持它。Webkit似乎没有实施时间表。

您可以使用此过程来格式化您的货币需求。

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/

如果您要处理货币值并进行大量格式化,那么可能值得添加微小的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

以下代码使用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 <0时的问题。参见https://jsfiddle.net/runsun/p5tqqvs3/

这是一个简单的函数,用于为千个分隔符插入逗号。它使用数组函数而不是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

使用此代码可处理印度的货币格式。可以更改国家/地区代码以处理其他国家/地区的货币。

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

// Use it.

formatter.format(amount);

输出:

3,50,256.95

您也可以使用Intl.NumberFormat构造函数。这是您的操作方法。

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

在写这篇文章之前,我写了一篇。没有正则表达式,您实际上可以理解代码。

$(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>
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)

输出:“ 123,123,231,232”

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

var number = 123123231232;
    number.toLocaleString()

输出:“ 123,123,231,232”

欢呼!

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

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

此解决方案不仅添加逗号,而且在您输入的金额$(1000.9999)为$ 1,001.00 的情况下,也会四舍五入至最接近的美分此外,您输入的值可以安全地为数字或字符串;没关系

如果您正在处理货币,但不想在金额上显示前导美元符号,则还可以添加此函数,该函数使用以前的函数,但删除了$

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

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

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

性能

今天(2020.07.10),我在Chrome 83.0,Safari 13.1和Firefox 77.0上对所选解决方案进行了测试。此结果对于海量数字格式化很有用。

结论

  • 基于解决方案H regexp-while最快
  • 基于M的解决方案reduce和基于N的解决方案while都非常快
  • 基于AD的解决方案regexp相当短
  • 基于Intl和toLocaleString的解决方案J,K,L 较慢

在此处输入图片说明

细节

我执行测试解决办法


Ç
d
Ë
˚F
ģ
ħ

Ĵ
ķ
大号
M(我)
ñ
ö
P
下面片段呈现它们(溶液
ö给出错误的结果为负数)。您可以在这里运行

Chrome的结果范例

在此处输入图片说明

function seprator(input) { 
    let nums = input.value.replace(/,/g, '');
    if(!nums || nums.endsWith('.'))  return;
    input.value = parseFloat(nums).toLocaleString(); 
 
}
<input type="text" id="inputSep" oninput="seprator(this)" placeholder="123,456,789"/>

对我来说,最好的答案是使用toLocaleString,就像一些成员所说的那样。如果要包括“ $”符号,只需添加languaje并键入options。这是将数字格式化为墨西哥比索的示例

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

捷径

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

让我尝试改善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()浏览器兼容性不是问题时,应使用

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

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

@Jignesh Sanghani的一些更正,不要忘了赞扬他的评论。

我认为此功能将解决与此问题相关的所有问题。

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

仅针对未来的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

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

您可能会更好地优化它,例如“ DRYify”代码等等。

然而,

(-1234567.0987).toLocaleString();

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

关键不是执行速度或跨浏览器兼容性。

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

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

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

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

因此,考虑到有一些特定的日期,时间,数字等表示标准,并且我们有一个工具可以以最终用户喜欢的格式显示这些内容,这并不是很罕见,而且几乎是不负责任的使用该工具(尤其是当我们想向用户显示数据时)?

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

new Date();

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

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

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

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

例如,x = 12345678.12345678将给出formatted = '12,345,678.12345678'。

本文地址:http://javascript.askforanswer.com/ruhezaijavascriptzhongyidouhaojiangshuzidayinweiqianweifengefu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!