JavaScript 格式化金額常見方法

更新時(shí)間：2023年05月29日 09:47:17 作者：飛仔FeiZai

這篇文章主要介紹了JavaScript 格式化金額最常見方法，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

JavaScript 格式化金額

一、使用 Intl.NumberFormat 構(gòu)造函數(shù)

這是 JavaScript 中格式化金額的最常見方法。Intl.NumberFormat()構(gòu)造函數(shù)接受兩個(gè)參數(shù)：語言環(huán)境和選項(xiàng)。語言環(huán)境是為其格式化金額的語言和地區(qū)。選項(xiàng)是一組控制金額格式的屬性。例如，可以使用樣式屬性來指定貨幣的格式，使用貨幣屬性來指定要將金額格式化為的貨幣。

const amount = 1234567.89;
const locale = "en-US";
const options = {
  style: "currency",
  currency: "USD",
};
const formattedAmount = new Intl.NumberFormat(locale, options).format(amount);
console.log(formattedAmount); //$1,234,567.89

二、使用 Number.prototype.toLocaleString 方法

要格式化金額，可以使用 JavaScript 的 toLocaleString() 方法。該方法可以將數(shù)字轉(zhuǎn)換為本地化的字符串表示形式，并可以指定貨幣符號(hào)、小數(shù)點(diǎn)和千位分隔符等格式。

代碼如下：

美元

const amount = 1234567.89;
const formattedAmount = amount.toLocaleString("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
console.log(formattedAmount); //$1,234,567.89

人民幣

const amount = 1234567.89;
const formattedAmount = amount.toLocaleString("zh-CN", {
  style: "currency",
  currency: "CNY",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
console.log(formattedAmount);

在這個(gè)示例中，將數(shù)字變量 amount 使用 toLocaleString() 方法轉(zhuǎn)換為本地化的字符串表示形式，并指定了以下格式：

style: 'currency' 表示使用貨幣格式顯示金額。
currency: 'USD' 表示使用美元符號(hào)作為貨幣符號(hào)。
minimumFractionDigits: 2 表示最少保留兩位小數(shù)。
maximumFractionDigits: 2 表示最多保留兩位小數(shù)。

通過這種方式，可以使用 JavaScript 快速簡(jiǎn)單地實(shí)現(xiàn)金額格式化效果。需要注意的是，toLocaleString() 方法在不同的瀏覽器和操作系統(tǒng)中可能存在差異，需要進(jìn)行兼容性測(cè)試和兼容性處理。

三、使用模板字符串 + Number.prototype.toFixed + 正則替換

const amount = 1234567.89;
const formattedAmount = `￥${amount
  .toFixed(2)
  .replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`;
console.log(formattedAmount);

在這個(gè)示例中，通過 toFixed 使金額保留兩位小數(shù)，使用正則替換的方式增加千位分隔符，再使用模板字符串進(jìn)行拼接。

js金額數(shù)字格式化

一.使用字符串操作方法格式化

①整數(shù)金額格式化：

function moneyFormat (num) {
      const len = num.length
      return len <= 3 ? num : this.moneyFormat(num.substr(0, len - 3)) + ',' + num.substr(len - 3, 3)
}
var num = 12345000
var res = moneyFormat(String(num))
console.log('result:', res) // '12,345,000'

②自定義保留decimal位小數(shù)，并使用split分隔符的數(shù)字格式化：

function moneyFormat (num, decimal = 2, split = ',') {
  /*
    parameter：
    num：格式化目標(biāo)數(shù)字
    decimal：保留幾位小數(shù)，默認(rèn)2位
    split：千分位分隔符，默認(rèn)為,
    moneyFormat(123456789.87654321, 2, ',') // 123,456,789.88
  */
  function thousandFormat (num) {
    const len = num.length
    return len <= 3 ? num : thousandFormat(num.substr(0, len - 3)) + split + num.substr(len - 3, 3)
  }
  if (isFinite(num)) { // num是數(shù)字
    if (num === 0) { // 為0
      return num.toFixed(decimal)
    } else { // 非0
      var res = ''
      var dotIndex = String(num).indexOf('.')
      if (dotIndex === -1) { // 整數(shù)
        res = thousandFormat(String(num)) + '.' + '0'.repeat(decimal)
      } else { // 非整數(shù)
        // js四舍五入 Math.round()：正數(shù)時(shí)4舍5入，負(fù)數(shù)時(shí)5舍6入
        // Math.round(1.5) = 2
        // Math.round(-1.5) = -1
        // Math.round(-1.6) = -2
        // 保留decimals位小數(shù)
        const numStr = String((Math.round(num * Math.pow(10, decimal)) / Math.pow(10, decimal)).toFixed(decimal)) // 四舍五入，然后固定保留2位小數(shù)
        const decimals = numStr.slice(dotIndex, dotIndex + decimal + 1) // 截取小數(shù)位
        res = thousandFormat(numStr.slice(0, dotIndex)) + decimals
      }
      return res
    }
  } else {
    return '--'
  }
}
console.log('result:', moneyFormat(123456789.87654321)) // '123,456,789.88'

二.使用正則表達(dá)式格式化

①整數(shù)金額格式化：

function moneyFormat (num) {
      return String(num).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
}
var num = 12345000
var res = moneyFormat(num)
console.log('result:', res) // '12,345,000'

②自定義保留decimal位小數(shù)，并使用split分隔符的數(shù)字格式化：

function moneyFormat (num, decimal = 2, split = ',') {
  /*
    parameter：
    num：格式化目標(biāo)數(shù)字
    decimal：保留幾位小數(shù)，默認(rèn)2位
    split：千分位分隔符，默認(rèn)為,
    moneyFormat(123456789.87654321, 2, ',') // 123,456,789.88
  */
  if (isFinite(num)) { // num是數(shù)字
    if (num === 0) { // 為0
      return num.toFixed(decimal)
    } else { // 非0
      var res = ''
      var dotIndex = String(num).indexOf('.')
      if (dotIndex === -1) { // 整數(shù)
        res = String(num).replace(/(\d)(?=(?:\d{3})+$)/g, `$1${split}`) + '.' + '0'.repeat(decimal)
      } else { // 非整數(shù)
        // js四舍五入 Math.round()：正數(shù)時(shí)4舍5入，負(fù)數(shù)時(shí)5舍6入
        // Math.round(1.5) = 2
        // Math.round(-1.5) = -1
        // Math.round(-1.6) = -2
        // 保留decimals位小數(shù)
        const numStr = String((Math.round(num * Math.pow(10, decimal)) / Math.pow(10, decimal)).toFixed(decimal)) // 四舍五入，然后固定保留2位小數(shù)
        const decimals = numStr.slice(dotIndex, dotIndex + decimal + 1) // 截取小數(shù)位
        res = String(numStr.slice(0, dotIndex)).replace(/(\d)(?=(?:\d{3})+$)/g, `$1${split}`) + decimals
      }
      return res
    }
  } else {
    return '--'
  }
}
console.log('result:', moneyFormat(123456789.87654321)) // '123,456,789.88'

到此這篇關(guān)于JavaScript 格式化金額的文章就介紹到這了,更多相關(guān)js格式化金額內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: