当前位置:首页 > JavaScript

js实现千位符

2026-03-01 07:04:14JavaScript

使用 toLocaleString 方法

toLocaleString 是 JavaScript 内置的方法,可以直接将数字格式化为带有千位分隔符的字符串。

const number = 1234567.89;
const formattedNumber = number.toLocaleString();
console.log(formattedNumber); // 输出: "1,234,567.89"(根据地区可能不同)

如果需要指定地区(如强制使用英文格式):

const formattedNumber = number.toLocaleString('en-US');

使用正则表达式替换

通过正则表达式在数字字符串中插入千位分隔符。

js实现千位符

function formatNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
console.log(formatNumber(1234567)); // 输出: "1,234,567"

处理小数部分

如果需要支持小数,可以稍作调整:

function formatNumberWithDecimal(num) {
  const parts = num.toString().split('.');
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return parts.join('.');
}
console.log(formatNumberWithDecimal(1234567.89)); // 输出: "1,234,567.89"

使用 Intl.NumberFormat

Intl.NumberFormat 提供了更灵活的格式化选项,支持多语言和自定义格式。

js实现千位符

const formatter = new Intl.NumberFormat('en-US');
console.log(formatter.format(1234567.89)); // 输出: "1,234,567.89"

自定义选项

可以指定小数位数、货币符号等:

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2
});
console.log(formatter.format(1234567.89)); // 输出: "$1,234,567.89"

手动实现(循环插入分隔符)

通过循环从右到左每三位插入逗号:

function manualFormat(num) {
  const str = num.toString();
  let result = '';
  let count = 0;
  for (let i = str.length - 1; i >= 0; i--) {
    result = str[i] + result;
    count++;
    if (count % 3 === 0 && i !== 0 && str[i - 1] !== '-') {
      result = ',' + result;
    }
  }
  return result;
}
console.log(manualFormat(1234567)); // 输出: "1,234,567"

注意事项

  • 负数和小数需要特殊处理,正则表达式和手动方法需额外逻辑。
  • toLocaleStringIntl.NumberFormat 的结果可能因浏览器或地区设置不同。
  • 性能敏感场景建议测试正则表达式与内置方法的效率差异。

标签: js千位符
分享给朋友:

相关文章

js实现动画

js实现动画

使用 CSS 动画与 JavaScript 控制 通过 JavaScript 动态添加或移除 CSS 类来触发动画。CSS 定义关键帧(@keyframes),JavaScript 通过 classL…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div c…

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…