数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中打印带逗号作为千位分隔符的数字？
在本教程中，我们将了解一些在 JavaScript 中打印带逗号作为千位分隔符的数字的方法，并对它们进行比较以了解哪种方法在给定上下文中更合适。
为什么要进行数字格式化？在英语中，逗号用于分隔大于 999 的数字。德国使用点作为千位分隔符。瑞典使用空格。分隔符在从右起每三位数字后添加。
让我们简要介绍一下这些方法。
使用 toLocaleString() 方法
在这里，内置的区域设置字符串方法根据国家/地区本地化数字格式。
语法
用户可以按照以下语法操作。
number.toLocaleString(locale)
这里，number 是我们将用逗号分隔的数字。
参数
locale − 国家/地区的区域设置代码。对于美国，它是“en-US”。“en”是英语，“US”是美国。其他示例包括 en-GB、hi-EN 和 ar-EG。hi-EN 在每两位数字后使用逗号。
示例
在此程序中，toLocaleString() 返回输入的带逗号分隔的数字。
<html> <body> <p id="inp"></p> <p id="out"></p> <script> const num = 1234567890; document.getElementById("inp").innerHTML = "Input : " + num; const result = num.toLocaleString('en-US'); document.getElementById("out").innerHTML = "Output: " + result; </script> </body> </html>
使用 Intl.NumberFormatter() 对象
Intl 是 JavaScript 中的国际化命名空间。语言敏感的数字格式化是此方法的用途之一。
语法
用户可以按照以下语法操作。
new Intl.NumberFormat() new Intl.NumberFormat(locale) new Intl.NumberFormat(locale, options)
这里，Intl 指的是国际化。
参数
locale − 区域设置代码。例如，“en-IN”、“de-DE”、“ja-JP”。
options − 有许多可用的选项，例如 style、currency 等。
示例
当用户点击按钮时，Intl 对象将格式化数字并显示输出。
<html> <body> <p>Print a number with a commas separator using Intl.NumberFormat</p> <p id="inp"></p> <p id="out"></p> <script> const num = 1234567890; document.getElementById("inp").innerHTML = "Input : " + num; const result = Intl.NumberFormat('en-US').format(num); document.getElementById("out").innerHTML = "Output: " + result; </script> </body> </html>
使用正则表达式
我们可以使用正则表达式编写代码来格式化数字。
语法
用户可以按照以下语法操作。
number.toString().split(".");
number.replace(replace, ",");
这里给出了示例中使用的字符串分割和替换语法。
算法
步骤 1 − 将数字转换为字符串。
步骤 2 − 分割成数字和可能的十进制部分。
步骤 3 − 使用正则表达式查找并在数字中添加千位分隔符（3 位数字组）。
步骤 4 − 用点分隔数字和小数部分。
示例
在此示例中，输入使用自定义正则表达式分组为三位数字。
<html> <body> <h3>Print a number with a commas separator using regex</h3> <p id="regxInp"></p> <div id="regxWrap"> <p>Click the below button</p> <button onclick="regxDoFormat()">Click Me</button> </div> <p id="regxOut"></p> <script> const regxNum = 192837.4650; var regxInpEl = document.getElementById("regxInp"); var regxOutEl = document.getElementById("regxOut"); var regxBtnWrapEl = document.getElementById("regxWrap"); regxInpEl.innerHTML = "Input = " + regxNum; function regxDoFormat() { function formatNum(n) { var splits = n.toString().split("."); const numSplit = splits[0]; const decimalSplit = splits[1]; const thousands = /\B(?=(\d{3})+(?!\d))/g; return numSplit.replace(thousands, ",") + (decimalSplit ?"." + decimalSplit : ""); } const regxFormt = formatNum(regxNum); regxOutEl.innerHTML = "Output = " + regxFormt; regxBtnWrapEl.style.display = "none"; } </script> </body> </html>
通过创建自定义函数
这里我们编写了自定义代码，通过检查小数位数和符号来对数字进行逗号分隔。
语法
number.toString().includes('.); number.toString().split('.')[0];
for (initialize; condition; loop control)
{}
这里给出了示例中使用的字符串操作和循环的语法。
算法
检查小数点和数字符号。
移除符号，循环遍历，并相应地将逗号添加到 3 位数字组中。
添加回符号并显示输出。
示例
这里，负浮点数输入根据上述算法由自定义代码处理，并获得所需的输出。
<html> <body> <h3>Print a number with a commas separator using custom code</h3> <p id="custInp"></p> <div id="custWrap"> <p>Click this button</p> <button onclick="custDoFormat()">Click Me</button> </div> <p id="custOut"></p> <script> let custNum = -987654.4650; var custInpEl = document.getElementById("custInp"); var custOutEl = document.getElementById("custOut"); var custBtnWrapEl = document.getElementById("custWrap"); custInpEl.innerHTML = "Input = " + custNum; function custDoFormat() { function addComma(numVal) { // remove numSign var numSign = 1; if (numVal < 0) { numSign = -1; numVal = -numVal; } // trim the decimal point let num = numVal.toString().includes('.') ? numVal.toString().split('.')[0] : numVal.toString(); let len = num.toString().length; let numResult = ''; let numCount = 1; for (let i = len - 1; i >= 0; i--) { numResult = num.toString()[i] + numResult; if (numCount % 3 === 0 && numCount !== 0 && i !== 0) { numResult = ',' + numResult; } numCount++; } // include number after decimal point if (numVal.toString().includes('.')) { numResult = numResult + '.' + numVal.toString().split('.')[1]; } // return numResult with numSign return numSign < 0 ? '-' + numResult : numResult; } let custFormt = addComma(custNum); custOutEl.innerHTML = "Output = " + custFormt; custBtnWrapEl.style.display = "none"; } </script> </body> </html>
本文讨论了三种在 JavaScript 中打印带逗号作为千位分隔符的数字的方法。
locale 字符串和 Intl 数字格式化方法必须首先查找 JavaScript 引擎选择的本地化。然后才会进行格式化。
正则表达式和字符串替换方法比 toLocaleString() 方法更快。当有大量格式化请求时，您可以选择此方法。
7K+ 次浏览
