JavaScript >> Javascript 文檔 >  >> Tags >> string

如何在 JavaScript 中將數字格式化為貨幣字符串

簡介

必須手動將數字格式化為貨幣字符串可能是一個乏味的過程。儘管這通常可以在幾行代碼中完成,但遵循標準化規範而不是自己硬編碼是一種很好的做法,而且開發人員編寫代碼也更容易。

在本教程中,我們將了解 如何在 JavaScript 中格式化貨幣字符串 .

使用區域設置將字符串格式化為貨幣

語言環境 是一組參數,用於指定計算機上特定於區域的任何內容:

  • 數字格式設置
  • 字符分類、大小寫轉換設置
  • 日期時間格式設置
  • 貨幣格式設置
  • 紙張大小設置
  • 工作日格式/一周的第一天
  • 計量單位

Windows 用戶知道語言環境參數為 Region settings .另一方面,Linux 用戶可能不知道您可以使用 locale 檢查所述參數的命令。

在 JavaScript 中,將數字格式化為貨幣字符串的最簡單和最流行的方法是通過 Intl.NumberFormat() 方法。這種方法允許您使用自定義區域設置參數來格式化數字 - 在本文中,我們將重點關注貨幣。

Intl.NumberFormat() 構造函數接受兩個參數 , 第一個 是一個語言環境字符串,我們用它來定義我們想要格式化的語言環境:

const price = 1470000.15;

let dollarUSLocale = Intl.NumberFormat('en-US');
let dollarIndianLocale = Intl.NumberFormat('en-IN');

console.log("US Locale output: " + dollarUSLocale.format(price));
console.log("Indian Locale output: " + dollarIndianLocale.format(price));

這輸出:

1,470,000.15
14,70,000.15

在這裡,我們有 price 的本地化變體 , 格式化為一個簡單的數字。不過,我們還可以調整某些選項以進一步自定義此格式化過程。

第二個參數 可用於指定格式化時要應用的選項。這是一個 JavaScript 對象,可以包含但不限於:

  • style
  • currency
  • useGrouping
  • maximumSignificantDigits

讓我們分別看一下這些屬性。

風格

style 字段指定要使用的格式類型。可能的值包括:

  • decimal - 十進制數字格式。
  • currency - 貨幣格式。
  • unit - 公製或英制單位格式。

在我們的場景中,我們將格式化為 currency 字符串。

貨幣

使用 currency 字段,您可以指定要格式化為哪種特定貨幣,例如'USD' , 'CAD''INR' .

讓我們格式化我們的 price 轉換成不同的貨幣:

const price = 1470000.15;

// Format the price above to USD, INR, EUR using their locales.
let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
});

let rupeeIndian = Intl.NumberFormat("en-IN", {
    style: "currency",
    currency: "INR",
});

let euroGerman = Intl.NumberFormat("de-DE", {
    style: "currency",
    currency: "EUR",
});

console.log("Dollars: " + dollarUS.format(price));
// Dollars: $147,000,000.15

console.log("Rupees: " + rupeeIndian.format(price));
// Rupees: ₹14,70,000.15

console.log("Euros: " + euroEU.format(price));
// Euros: 1.470.000,15 €

附加選項

useGrouping field 是一個布爾字段,使您能夠使用逗號(或句點,對於某些語言環境)對數字進行分組。默認情況下,它設置為 true ,正如我們在上面的輸出中看到的那樣。

讓我們把它關掉:

let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    useGrouping: false,
}); 
// $1470000.15

maximumSignificantDigits 字段允許您設置價格的有效位數。這可用於根據您設置的有效位數對您的價格變量進行四捨五入。

簡而言之,有效數字是數字表示中在準確性方面具有任何權重的數字。

具有諷刺意味的是,準確性 一個數的個數定義為它的有效位數。

有效數字包括:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

  1. 所有非零數字
  2. 出現在兩個非零數字之間任意位置的零
  3. 所有非零數字右側的零,但前提是它們表示更高的準確度

非有效數字包括:

  1. 所有非零數字左側的零
  2. 所有非零數字右側的零不表示準確性

例如,在數字 000003.1240000 如果我們的準確度是 4 位有效數字,則只有 4 位有效數字(3.124 )。但是,如果我們的準確度是 5 位有效數字(3.1240 )。

示例如下:

const price = 147741.15;

// Format the above price dollar currency
let dollarUS = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    useGrouping: true,
    maximumSignificantDigits: 3,
}); // $148,000

let dollarUS2 = Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    useGrouping: true,
}); // $147,741.15

結論

在本教程中,我們討論瞭如何在 JavaScript 中將數字格式化為貨幣字符串。我們使用了 Intl.NumberFormat() 方法來做到這一點,我們可以使用所需的語言環境和幾個設置來自定義格式化過程。


Tutorial JavaScript 教程
  1. JS setInterval 只執行一次

  2. 零新想法的 React 語義 HTML

  3. RxJS - 運算符

  4. 標記的枚舉,為什麼以及如何

  5. 高級 Javascript 函數

  6. 如何使用javascript自定義右鍵單擊?

  7. 在 Node.js 中調試異步操作

  1. 在javascript中,實例函數和Function類型的實例變量有什麼區別?

  2. Nucleoid 是如何學習的

  3. React DevTools 和未知組件

  4. 將靜態 HTML/CSS 站點轉換為 React App

  5. AngularJS - 根據所選值顯示數據列表

  6. 在模式中設置複選框標籤的文本

  7. 如何解決全局 npm 模塊依賴問題

  1. 立即更新到 Angular 版本 8!

  2. 樣式化組件及其好處

  3. Google Lighthouse 自定義審核教程

  4. 宣布 Appwrite Deno SDK 正式發布