欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)給數(shù)字添加千位分隔符

 更新時(shí)間：2023年11月09日 16:56:13   作者：老電影故事  
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)給數(shù)字添加千位分隔符,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

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)文章

最新評(píng)論