JavaScript千位分隔符/字符串格式


Javascript Thousand Separator / string format

本问题已经有最佳答案，请猛点这里访问。

Javascript中是否有用于格式化数字和字符串的函数？

我正在寻找一种用于字符串或数字的千位分隔符的方法...
(类似于C＃中的String.Format)

相关讨论

更新(7年后)

以下原始答案中引用的参考文献有误。为此有一个内置函数，这正是kaiser所建议的：toLocaleString

因此，您可以执行以下操作：

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

下面实现的功能也可以使用，但是根本没有必要。

(我想也许我会很幸运，发现有必要追溯到2010年，但不是。根据这个更可靠的参考，自ECMAScript 3rd Edition [1999]以来，toLocaleString一直是该标准的一部分，我相信这意味着早在IE 5.5上就可以支持。)

原始答案

根据此参考资料，没有内置函数可将逗号添加到数字中。但是该页面包含了一个如何自己编写代码的示例：

1
2
3
4
5
6
7
8
9
10
11
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;
}

编辑：
换种方式(将带逗号的字符串转换为数字)，您可以执行以下操作：

1
parseFloat("1,234,567.89".replace(/,/g,''))
相关讨论

如果要本地化数千个分隔符，定界符和十进制分隔符，请执行以下操作：

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

您可以使用多个选项(甚至可以使用具有备用功能的语言环境)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
number = 123456.7089;

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

var el = document.getElementById( 'result' );
el.innerHTML = result;
1
 

MDN信息页面上的详细信息。

编辑：评论者@我喜欢Serena添加以下内容：

To support browsers with a non-English locale where we still want English formatting, use value.toLocaleString('en'). Also works for floating point.

相关讨论

Updated using look-behind support in line with ECMAScript2018 changes.
For backwards compatibility, scroll further down to see the original solution.

可以使用正则表达式-在处理以字符串形式存储的大数字时特别有用。

1
2
3
4
5
6
7
8
9
10
11
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))

详细正则表达式说明(regex101.com)
flow diagram

This original answer may not be required but can be used for backwards compatibility.

尝试使用单个正则表达式(不带回调)来处理此问题，我目前的能力使我无法在Javascript中缺少负向后缀……不过，这是在大多数情况下都可以使用的另一个简洁选择-占小数点通过忽略匹配的索引，该匹配的索引出现在句点索引之后。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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))

详细正则表达式说明(regex101.com)

flow diagram

相关讨论

有一个不错的jQuery数字插件：https://github.com/teamdf/jquery-number

它允许您以自己喜欢的格式更改任何数字，并选择十进制数字和分隔符(十进制和一千)：

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

您可以使用与上述相同的选项直接在输入字段中使用它，这更好，它更好：

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

或者您可以使用选择器将其应用于整套DOM元素：

1
$('span.number').number(true, 2);
相关讨论

我用这个：

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

来源：链接

相关讨论

1
2
3
var number = 35002343;

console.log(number.toLocaleString());

供参考，您可以在这里查看
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 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;
}

您可以使用javascript。以下是代码，它将仅accept数字和一个dot

here is the javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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;
            }

HTML

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

演示JSFIDDLE

1
2
3
4
5
6
number = 123456.7089;
result = parseInt( number ).toLocaleString() +"";
result = number.toLocaleString( 'pt-BR' ) +"";

var el = document.getElementById( 'result' );
el.innerHTML = result;
1
 
相关讨论

PHP.js具有执行此功能的功能，称为number_format。如果您熟悉PHP，则其工作方式完全相同。

相关讨论

您所需要做的就是：

1
2
123000.9123.toLocaleString()
//result will be"123,000.912"
相关讨论

您可以使用以下功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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');

相关讨论

您可以使用ngx-format-field。这是用于格式化将出现在视图中的输入值的指令。它不会操纵将保存在后端的Input值。在这里查看链接！

例：

1
2
3
4
5
6
7
8
9
10
component.html:

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

component.ts

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

观看演示：在这里！

反应溶液的组合

1
2
3
4
5
6
7
8
9
10
  let converter = Intl.NumberFormat();
  let salary =  monthlySalary.replace(/,/g,'')
  console.log(converter.format(salary))

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

handleOnChangeMonthlySalary(1000)```

我不喜欢这里的任何答案，因此我创建了一个对我有用的函数。只想分享，以防其他人发现它有用。

1
2
3
4
5
function getFormattedCurrency(num) {
    num = num.toFixed(2)
    var cents = (num - Math.floor(num)).toFixed(2);
    return Math.floor(num).toLocaleString() + '.' + cents.split('.')[1];
}