JavaScript實(shí)現(xiàn)給數(shù)字添加千位分隔符
1、數(shù)字轉(zhuǎn)為字符串,整數(shù)部分低位往高位遍歷
function format(number) {
// 轉(zhuǎn)為字符串,按照.拆分
let arr = (number + '').split['.]
// 整數(shù)部分再拆分
let int = arr[0].split['']
// 小數(shù)部分
const fraction = arr[1] || ''
// 返回的結(jié)果
let r = ''
let len = int.length
// 倒敘遍歷
int.reverse().forEach((v, i) => {
// 非第一位且位值是3的倍數(shù),添加','
if(i !== 0 && i % 3 === 0) {
r = v + ',' + r
} else {
r = v + r
}
})
// 整數(shù)部分 + 小數(shù)部分
return r + (!!fraction ? '.' + fraction : '')
}
2、使用正則表達(dá)式
const reg = /(\d)(?=(\d{3})+$)/g
let num = "12345678";
console.log(num.replace(/(\d)(?=(?:\d{3})+$)/g,'$1,'))//"12,345,678"
// ???? 使用String()把數(shù)字轉(zhuǎn)換為字符串的優(yōu)點(diǎn)在于null等情況不會(huì)報(bào)錯(cuò)
console.log(String(123456789).replace(reg, "$1,")); // 123,456,789
// ???? 支持整數(shù),不支持小數(shù)
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) {
// 先將數(shù)字轉(zhuǎn)為字符串,并判斷是否有小數(shù)部分
let [integerPart, decimalPart] = number.toString().split('.');
// 對(duì)整數(shù)部分添加千分位分隔符
integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// 如果有小數(shù)部分,則拼接整數(shù)部分和小數(shù)部分
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
3、使用toLocaleString()方法
// ???? 必須是數(shù)字,如果是null或者undefined的話,會(huì)報(bào)錯(cuò)
console.log((123456789).toLocaleString('en-US')); // 123,456,789
// ???? 最多保留三位小數(shù)
console.log((123456789.1315454).toLocaleString('en-US')); // 123,456,789.132
console.log('????????????');
4、使用new 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
5、在vue中添加全局方法添加千位分隔符
涉及的數(shù)據(jù)比較多,寫一個(gè)過(guò)濾器,將所有的數(shù)據(jù)都過(guò)濾一下,掛載到全局,不需要每個(gè)頁(yè)面引用了。
創(chuàng)建一個(gè)js文件,實(shí)現(xiàn)數(shù)字千位分隔符
export function numberToCurrencyNo(value) {
if(!value) return 0
// 獲取整數(shù)部分
const intPart = Math.trunc(value)
// 整數(shù)部分處理,增加,
const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
// 預(yù)定義小數(shù)部分
let floatPart = ''
// 將數(shù)值截取為小數(shù)部分和整數(shù)部分
const valueArray = value.toString().split('.')
if (valueArray.length === 2) { // 有小數(shù)部分
floatPart = valueArray[1].toString() // 取得小數(shù)部分
return intPartFormat + '.' + floatPart
}
return intPartFormat + floatPart
}
引用掛載到全局
在 main.js 文件中引入
import { numberToCurrencyNo } from '@/utils/numberToCurrency'
// 配置全局過(guò)濾器,實(shí)現(xiàn)數(shù)字千分位格式
Vue.filter('numberToCurrency', numberToCurrencyNo)
直接在頁(yè)面使用
<div class="total-num">{{totalNum | numberToCurrency}}</div>到此這篇關(guān)于JavaScript實(shí)現(xiàn)給數(shù)字添加千位分隔符的文章就介紹到這了,更多相關(guān)JavaScript千位分隔符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap實(shí)現(xiàn)帶暫停功能的輪播組件(推薦)
最近小編在項(xiàng)目中用到了一款帶輪播組件,功能非常齊全,可以設(shè)置各種標(biāo)題樣式、動(dòng)畫效果、輪播時(shí)間、開(kāi)始暫停等功能,下面小編通過(guò)本文給大家詳細(xì)介紹下實(shí)現(xiàn)過(guò)程,需要的朋友參考下吧2016-11-11
IE8下關(guān)于querySelectorAll()的問(wèn)題
在IE8的新特性里,提到了會(huì)支持querySelector()和querySelectorAll()方法,如何使用這里就不說(shuō)了,只是記錄下我在使用時(shí)遇到一個(gè)問(wèn)題。2010-05-05
取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法
今天小編就為大家分享一篇取消Bootstrap的dropdown-menu點(diǎn)擊默認(rèn)關(guān)閉事件方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Cropper.js進(jìn)階實(shí)現(xiàn)圖片旋轉(zhuǎn)裁剪處理功能示例
這篇文章主要為大家介紹了Cropper.js進(jìn)階實(shí)現(xiàn)圖片旋轉(zhuǎn)裁剪功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05
JavaScript設(shè)計(jì)模式中的橋接和中介者模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式中的橋接和中介者模式,橋接設(shè)計(jì)模式是一種偏向于組合的設(shè)計(jì)模式,而非繼承的設(shè)計(jì)模式,實(shí)現(xiàn)的細(xì)節(jié)從一個(gè)模塊推送給另一個(gè)具有單獨(dú)模塊的對(duì)象,而中介者設(shè)計(jì)模式是指通過(guò)一個(gè)中介者對(duì)象封裝一系列的對(duì)象交互2022-06-06
JS動(dòng)態(tài)的把左邊列表添加到右邊的實(shí)現(xiàn)代碼(可上下移動(dòng))
在javascript前端開(kāi)發(fā)過(guò)程中經(jīng)常見(jiàn)到動(dòng)態(tài)的把左邊列表添加到右邊,基于js代碼怎么實(shí)現(xiàn)的呢?今天小編通過(guò)本文給大家介紹下js 左邊列表添加到右邊的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2016-11-11
微信小程序如何設(shè)置基本的頁(yè)面樣式,做出用戶界面UI
這篇文章主要介紹了微信小程序如何設(shè)置基本的頁(yè)面樣式,做出用戶界面UI。如何為這個(gè)頁(yè)面添加樣式,使它看上去更美觀,教大家寫出實(shí)際可以使用的頁(yè)面。2022-12-12
textarea 控制輸入字符字節(jié)數(shù)(示例代碼)
本篇文章主要是對(duì)textarea 控制輸入字符字節(jié)數(shù)的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12

