Javascript千位分隔符/字符串格式[重复]
Posted
技术标签:
【中文标题】Javascript千位分隔符/字符串格式[重复]【英文标题】：Javascript Thousand Separator / string format [duplicate] 【发布时间】：2011-04-14 18:52:51 【问题描述】：javascript 中有没有用于格式化数字和字符串的函数？
我正在寻找一种用于字符串或数字的千位分隔符的方法... （类似于 c# 中的 String.Format）
【问题讨论】：
bytes.com/topic/c-sharp/answers/248039-formatcurrency-equiv 我想你会在那里找到你需要的东西:) ***.com/questions/610406/…How to print a number with commas as thousands separators in JavaScript: ***.com/questions/2901102/…
【参考方案1】：
更新（7 年后）
下面原始答案中引用的参考是错误的。 有一个内置函数，这正是kaiser 在下面建议的：toLocaleString
所以你可以这样做：
(1234567.89).toLocaleString('en') // for numeric input
parseFloat("1234567.89").toLocaleString('en') // for string input
下面实现的功能也可以，但根本不是必需的。
（我想也许我会很幸运，发现它在 2010 年 是必要的，但没有。根据more reliable reference，toLocaleString 自 ECMAScript 3rd 以来一直是标准的一部分版本 [1999]，我相信这意味着它早在 IE 5.5 就已得到支持。）
原答案
根据this reference，没有用于将逗号添加到数字的内置函数。但是该页面包含一个如何自己编写代码的示例：
function addCommas(nStr)
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d3)/;
while (rgx.test(x1))
x1 = x1.replace(rgx, '$1' + ',' + '$2');
return x1 + x2;
编辑： 换一种方式（将带逗号的字符串转换为数字），您可以执行以下操作：
parseFloat("1,234,567.89".replace(/,/g,''))
【讨论】：
真的真的很欣赏它 // 但是我怎样才能将该字符串（带逗号）转换为数字？ 这个函数对于大于 100,000 的数字会中断 @DevZer0 不，它没有 使用纯 javascript + 单个正则表达式替换 ***.com/a/44324879/681830 使用(1234567).toLocaleString().replace(/,/g," ",) 表示千位之间的空格【参考方案2】：
如果是关于本地化千位分隔符、定界符和小数分隔符，请使用以下内容：
// --> 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 info page 的详细信息。
编辑：评论者@I like Serena添加以下内容：
要支持具有非英语语言环境的浏览器，我们仍需要英文格式，请使用
value.toLocaleString('en')。也适用于浮点数。
【讨论】：
这不包括浮点数。你可以将 parseInt 更改为 parseFloat，但如果 yourInt = "100,12"（逗号作为小数分隔符）这将失败。这可以用 replace(",",".").. 来修复，但会再次用 "1.000,12" 失败。所以...有时你必须重新发明***。 ***.com/a/2901298/1028304 这样更合适：Number(yourNumberOrString).toLocaleString()
要支持具有非英语语言环境的浏览器，我们仍然需要英文格式，请使用value.toLocaleString('en')。也适用于浮点数。
@Serhiog.Lazin 究竟是什么在 Safari 上不起作用（以及在哪个操作系统和哪个版本上）？
仅供参考，对于像 7,77,77,777 这样的印度数字格式，请使用 value.toLocaleString('en-IN')【参考方案3】：
根据 ECMAScript2018 更改使用后视支持进行了更新。 为了向后兼容，请进一步向下滚动以查看原始解决方案。
可以使用正则表达式——在处理存储为字符串的大数字时特别有用。
const format = num =>
String(num).replace(/(?<!\..*)(\d)(?=(?:\d3)+(?:\.|$))/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 explanation (regex101.com)
这个原始答案可能不是必需的，但可用于向后兼容。
尝试使用单个正则表达式处理此问题（无回调） 我目前的能力因 Javascript 中缺乏负面的后视而失败......不过，这里有另一个简洁的替代方案在大多数一般情况下 - 通过忽略匹配索引出现在句点索引之后的匹配来计算任何小数点。
const format = num =>
const n = String(num),
p = n.indexOf('.')
return n.replace(
/\d(?=(?:\d3)+(?:\.|$))/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 explanation (regex101.com)
【讨论】：
这个语法图是在regex101.com上创建的吗？ 带小数的数字会怎样？ 我收到“无效的正则表达式：无效的组说明符名称”。在 React Native 0.59 上这样做，但这不应该影响 RegEx。 @JoshuaPinter 这将是使用look-behind，在撰写本文时，所有平台尚不支持。我猜你是专门指 ios - 因为 Safari 对我来说仍然失败。现在最好坚持使用向后兼容的版本。我只是想在未来证明我的答案。 caniuse.com/#search=lookbehind @Emissary 感谢您的提示。是的，它在 React Native 0.59 / android 上，它使用相对较旧版本的 JavaScriptCore (JSC)。我会在我们更新到 React Native 0.60+ 后重试，其中包括对 JSC 的更新。【参考方案4】：有一个不错的 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);
或者您可以使用选择器应用于一整套 DOM 元素：
$('span.number').number(true, 2);
【讨论】：
最佳解决方案恕我直言 我不这么认为，添加一个将近800行的新文件要求，就像用手榴弹杀死一只蚂蚁【参考方案5】：我用这个：
function numberWithCommas(number)
return number.toString().replace(/\B(?=(\d3)+(?!\d))/g, ",");
来源：link
【讨论】：
'123452343267.0505'.replace(/\B(?=(\d3)+(?!\d))/g, ","); "123,452,343,267.0,505" - 注意小数点后的最后一个逗号。【参考方案6】：
var number = 35002343;
console.log(number.toLocaleString());
您可以在这里查看参考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
【讨论】：
哈哈哈试试这个 var n = 4720 console.log(n.toLocaleString()) 它不会工作【参考方案7】：// 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;
【讨论】：
【参考方案8】：php.js 有一个名为number_format 的函数来执行此操作。如果您熟悉 PHP，则可以使用 exactly the same way。
【讨论】：
第一个链接是 PHP 版本的 JS 实现。很有用。【参考方案9】：您可以使用 javascript。下面是代码，它只会accept 数字和一个dot
这里是javascript
<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+)(\d3)/;
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>
HTML
<input type="text" onkeypress="return CheckNumeric()" onkeyup="FormatCurrency(this)" />
DEMO JSFIDDLE
【讨论】：
【参考方案10】：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>
【讨论】：
能否请您也添加一些描述，以便 op 和其他人能够理解这段代码实际上是如何解决问题的。谢谢 尝试使用介于 1000 和 9999 之间的数字【参考方案11】：你需要做的只是真的this：
123000.9123.toLocaleString()
//result will be "123,000.912"
【讨论】：
不幸的是，这取决于您的平台。有些有toLocaleString()，它不添加逗号，或者缺少标准中的其他功能。检查toLocaleString 的存在很容易，但检查其合规性并不容易。
尝试使用 1000 到 9999 之间的数字【参考方案12】：
react 解决方案的组合
let converter = Intl.NumberFormat();
let salary = monthlySalary.replace(/,/g,'')
console.log(converter.format(salary))
this.setState(
monthlySalary: converter.format(salary)
)
handleOnChangeMonthlySalary(1000)```
【讨论】：
【参考方案13】：您可以使用以下功能：
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)(?=(\d3)+(?!\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/… @sajadsaderi 我也使用 toLocaleString() 朋友，但是这个函数并没有给我太大的灵活性，所以我不必处理区域缩写，其他人可以使用它，因为它的定义这个函数和php的number_format()函数是一样的。【参考方案14】：我不喜欢这里的任何答案，所以我创建了一个对我有用的函数。只是想分享一下，以防其他人发现它有用。
function getFormattedCurrency(num)
num = num.toFixed(2)
var cents = (num - Math.floor(num)).toFixed(2);
return Math.floor(num).toLocaleString() + '.' + cents.split('.')[1];
【讨论】：
【参考方案15】：您可以使用 ngx-format-field。这是一个用于格式化将出现在视图中的输入值的指令。它不会操纵将保存在后端的输入值。见链接here！
例子：
component.html:
<input type="text" formControlName="currency" [appFormatFields]="CURRENCY"
(change)="onChangeCurrency()">
component.ts
onChangeCurrency()
this.currency.patchValue(this.currency.value);
观看演示：here!
【讨论】：
以上是关于Javascript千位分隔符/字符串格式[重复]的主要内容，如果未能解决你的问题，请参考以下文章