JavaScript实现给数字添加千位分隔符
作者:组件花园时间:2026-10-31 07:59:30浏览:597
本文详细介绍在JavaScript中为数字添加千位分隔符的多种实现方式,包括手动遍历字符串、使用正则表达式、toLocaleString及Intl.NumberFormat方法。同时提供在Vue项目中创建并全局挂载数字格式化过滤器的完整步骤,便于在页面中直接复用。
第一种方法是将数字转换为字符串,从低位到高位遍历整数部分。
function format(number) {
// 转为字符串,按照.拆分
let arr = (number + '').split['.]
// 整数部分再拆分
let int = arr[0].split['']
// 小数部分
const fraction = arr[1] || ''
// 返回的结果
let r = ''
let len = int.length
// 倒叙遍历
int.reverse().forEach((v, i) => {
// 非第一位且位值是3的倍数,添加','
if(i !== 0 && i % 3 === 0) {
r = v + ',' + r
} else {
r = v + r
}
})
// 整数部分 + 小数部分
return r + (!!fraction ? '.' + fraction : '')
}
第二种方法是利用正则表达式进行匹配替换。
对应的正则表达式为:const reg = /(\d)(?=(\d{3})+$)/g
let num = "12345678";
console.log(num.replace(/(\d)(?=(?:\d{3})+$)/g,'$1,'))//"12,345,678"
// ⚠❗❗❗ 使用String()把数字转换为字符串的优点在于null等情况不会报错
console.log(String(123456789).replace(reg, "$1,")); // 123,456,789
// ⚠❗❗❗ 支持整数,不支持小数
console.log(String(123456789.1315454).replace(reg, "$1,")); // 123456789.1,315,454
console.log(String(1000).replace(reg, "$1,")); // 1,000
console.log(String(null).replace(reg, "$1,")); // null
console.log(String(undefined).replace(reg, "$1,")); // undefined
console.log(String(NaN).replace(reg, "$1,")); // NaN
console.log('😁😁😁😁😁😁');
format (value) {
const reg = /\d{1,3}(?=(\d{3})+$)/g
return `${value}`.replace(reg, '$&,')
}
function addThousandSeparator(number) {
// 先将数字转为字符串,并判断是否有小数部分
let [integerPart, decimalPart] = number.toString().split('.');
// 对整数部分添加千分位分隔符
integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// 如果有小数部分,则拼接整数部分和小数部分
if (decimalPart) {
return integerPart + '.' + decimalPart;
} else {
return integerPart;
}
}
console.log(addThousandSeparator(1234567)); // 输出:1,234,567
console.log(addThousandSeparator(9876543.21)); // 输出:9,876,543.21
console.log(addThousandSeparator(123)); // 输出:123
第三种方法是直接调用数字对象的toLocaleString()内置方法。
// ⚠❗❗❗ 必须是数字,如果是null或者undefined的话,会报错
console.log((123456789).toLocaleString('en-US')); // 123,456,789
// ⚠❗❗❗ 最多保留三位小数
console.log((123456789.1315454).toLocaleString('en-US')); // 123,456,789.132
console.log('😁😁😁😁😁😁');
第四种方法是使用Intl.NumberFormat构造函数进行格式化。
console.log(new Intl.NumberFormat('en-US', {}).format(123456789.1315454)); // 123,456,789.132
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(123456789.1315454)); // ¥123,456,789
第五种方法是在Vue框架中封装全局方法以实现千位分隔符功能。
当涉及的数据量较大时,可以编写一个过滤器对所有数据进行统一处理,并将其挂载到全局,从而避免在每个页面中单独引用。
首先创建一个独立的JS文件,用于实现数字千位分隔符的逻辑。
export function numberToCurrencyNo(value) {
if(!value) return 0
// 获取整数部分
const intPart = Math.trunc(value)
// 整数部分处理,增加,
const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
// 预定义小数部分
let floatPart = ''
// 将数值截取为小数部分和整数部分
const valueArray = value.toString().split('.')
if (valueArray.length === 2) { // 有小数部分
floatPart = valueArray[1].toString() // 取得小数部分
return intPartFormat + '.' + floatPart
}
return intPartFormat + floatPart
}
接着将该模块引用并挂载到Vue的全局实例中。
最后在项目的main.js文件中进行引入操作。
import { numberToCurrencyNo } from '@/utils/numberToCurrency'
// 配置全局过滤器,实现数字千分位格式
Vue.filter('numberToCurrency', numberToCurrencyNo)
配置完成后,即可直接在Vue页面模板中使用该格式化功能。
<div class="total-num">{{totalNum | numberToCurrency}}</div>至此,关于JavaScript实现数字千位分隔符的介绍已完成,更多相关内容可参考本站过往文章或继续浏览后续内容,感谢支持。
作者最新文章
electron-builder打包与发布Electron应用
2026-11-01 05:18:32
Vue结合el-table实现表格行拖拽排序(基于sortablejs)
2026-11-01 01:30:37
详解如何在Vue中进行表单自定义验证
2026-11-01 01:17:28
UniApp 项目中 vue.config.js 配置指南
2026-11-01 00:21:50
uni-app全局变量的四种实现方式总结
2026-11-01 00:15:49








