使用 JS 管理國家和貨幣

管理國家和貨幣清單以及為所有不同國家設定不同的貨幣格式可能會給我們的專案帶來一些挑戰和工作。首先，我們不想在我們的程式碼庫中攜帶 200 個國家及其貨幣、撥號代碼、國旗表情符號的列表，特別是在前端。其次，每個國家都遵循不同的貨幣符號、不同的格式（例如逗號位置）和不同的小數精度，需要管理。

這就是編寫 npm 套件 Country-currency-utils 的原因。它是用 typescript 編寫的，適用於任何使用 javascript 的項目，無論是在伺服器還是前端。

國家

我們有一個透過 CDN 託管的國家/地區列表，可以透過套件中的 COUNTRIES_DETAILS_URL 變數進行存取。響應是一個鍵值對象，其中鍵是 2 個字母的 ISO 標準國家/地區代碼。值物件包含撥號代碼、貨幣代碼（ISO 標準）和旗幟表情符號。以下函數可用於列出包中的國家。

type TCountryDetails = {
  name: string; // Country name
  dialCode: string; // Country dial code
  currencyCode: string; // Country currency code
  flagEmoji: string; // Country flag emoji
};

type TCountryData = TCountryDetails & {
  countryCode: string; // ISO 3166 country code
};

getAllCountryDetails(): Promise<Record<string, TCountryDetails>>
getAllCountryData(): Promise<TCountryData[]>
getCountryData(countryCode: string): Promise<TCountryData | undefined>
getCountryData(countryCode: string): Promise<TCountryData | undefined>

// examples

const allCountriesData = await getAllCountryData()
const countryData = await getCountryData("US")
const countriesData = await getCountriesData(["US", "BD"])

貨幣

我們還有一個透過 CDN 託管的貨幣列表，可透過 CURRENCIES_DETAILS_URL 變數進行存取。它包含一個鍵值對象，其中鍵是ISO 標準貨幣代碼，值是具有不同貨幣詳細資訊的對象，例如貨幣符號（本機和標準）、數位分組（百萬億或千萬克羅爾）以及後跟的小數精度貨幣。以下是使用資料的函數。

type TCurrencyDetails = {
  name: string; // Currency name
  demonym: string; // Currency demonym
  majorSingle: string; // Major unit name in singular form (e.g. Dollar)
  majorPlural: string; // Major unit name in plural form (e.g. Dollars)
  symbol: string; // Currency symbol (e.g. $, CA$)
  symbolNative: string; // Currency symbol in native language (e.g. $)
  symbolPreferred: string; // preferred currency symbol, used for display
  minorSingle: string; // Minor unit name in singular form (e.g. Cent)
  minorPlural: string; // Minor unit name in plural form (e.g. Cents)
  decimals: number; // Number of decimal places, used for standard display
  decimalsCompact: number; // Number of decimal places, used for compact display
  digitGrouping: 2 | 3; // Digit grouping for formatting (e.g. 2 for 1,00,000, 3 for 100,000)
};

type TCurrencyData = TCurrencyDetails & {
  currencyCode: string; // ISO 4217 currency codes
};

getAllCurrencyDetails(): Promise<Record<string, TCurrencyDetails>>
getAllCurrencyData(): Promise<TCurrencyData[]>
getCurrencyData(currencyCode: string): Promise<TCurrencyData | undefined>
getCurrenciesData(currencyCodes: string[]): Promise<(TCurrencyData | undefined)[]>

// Examples

const allCurrenciesData = await getAllCurrencyData()
const currencyData = await getCurrencyData("USD")
const currenciesData = await getCurrenciesData(["USD", "BDT"])

金額格式化實用程序

當開發處理多種貨幣的專案時，由於多種原因可能會成為一個挑戰 -

• 處理貨幣的小數位精度
• 顯示正確的符號（本地和標準符號）
• 使用逗號分隔格式化貨幣

貨幣資料清單包含正確顯示貨幣金額所需的所有重要資料。還有一些實用函數可以幫助處理貨幣金額。

四捨五入金額

貨幣金額四捨五入的預設值是金額上限。不過您也可以將金額四捨五入到中間。

const roundedAmount = getRoundedAmount(123.4517, 2); // 123.46
const roundedAmount = getRoundedAmount(123.4517, 2, true); // 123.45

您可能還想根據貨幣對金額進行四捨五入。在這裡，我們有另一個函數來對貨幣詳細資訊進行四捨五入。

const USDCurrencyData = await getCurrencyData("USD");
const BDTCurrencyData = await getCurrencyData("BDT");

const roundedAmount = getRoundedAmountOnCurrency(123.4567, USDCurrencyData); // 123.46
const roundedAmount = getRoundedAmountOnCurrency(123.45, BDTCurrencyData); // 124
const roundedAmount = getRoundedAmountOnCurrency(123.45, BDTCurrencyData, {
  isDecimalsStandard: true,
}); // 123.45

注意：您會注意到我們使用承諾首先讀取CurrencyDetails。以這種方式處理很重要，因為我們不想在程式碼庫中包含所有貨幣詳細資訊的清單。所以我們獲取數據並使用它。但您也可以決定保留副本並使用 getRoundedAmountOnCurrency 函數。同樣的想法也適用於接下來的功能。

設定金額格式

格式化金額會傳回用於顯示目的的字串。格式化金額涉及兩件事

• 給出固定小數位的金額
• 回傳逗號分隔的金額

使用下列函數設定貨幣金額的格式。

type TCountryDetails = {
  name: string; // Country name
  dialCode: string; // Country dial code
  currencyCode: string; // Country currency code
  flagEmoji: string; // Country flag emoji
};

type TCountryData = TCountryDetails & {
  countryCode: string; // ISO 3166 country code
};

getAllCountryDetails(): Promise<Record<string, TCountryDetails>>
getAllCountryData(): Promise<TCountryData[]>
getCountryData(countryCode: string): Promise<TCountryData | undefined>
getCountryData(countryCode: string): Promise<TCountryData | undefined>

// examples

const allCountriesData = await getAllCountryData()
const countryData = await getCountryData("US")
const countriesData = await getCountriesData(["US", "BD"])

顯示金額

最終顯示金額涉及將貨幣符號添加到已格式化的金額中。使用以下函數

第一個函數 getDisplayAmountOnCurrency 取得貨幣詳細資料 -

type TCurrencyDetails = {
  name: string; // Currency name
  demonym: string; // Currency demonym
  majorSingle: string; // Major unit name in singular form (e.g. Dollar)
  majorPlural: string; // Major unit name in plural form (e.g. Dollars)
  symbol: string; // Currency symbol (e.g. $, CA$)
  symbolNative: string; // Currency symbol in native language (e.g. $)
  symbolPreferred: string; // preferred currency symbol, used for display
  minorSingle: string; // Minor unit name in singular form (e.g. Cent)
  minorPlural: string; // Minor unit name in plural form (e.g. Cents)
  decimals: number; // Number of decimal places, used for standard display
  decimalsCompact: number; // Number of decimal places, used for compact display
  digitGrouping: 2 | 3; // Digit grouping for formatting (e.g. 2 for 1,00,000, 3 for 100,000)
};

type TCurrencyData = TCurrencyDetails & {
  currencyCode: string; // ISO 4217 currency codes
};

getAllCurrencyDetails(): Promise<Record<string, TCurrencyDetails>>
getAllCurrencyData(): Promise<TCurrencyData[]>
getCurrencyData(currencyCode: string): Promise<TCurrencyData | undefined>
getCurrenciesData(currencyCodes: string[]): Promise<(TCurrencyData | undefined)[]>

// Examples

const allCurrenciesData = await getAllCurrencyData()
const currencyData = await getCurrencyData("USD")
const currenciesData = await getCurrenciesData(["USD", "BDT"])

第二個函數 getDisplayAmountOnCurrencyCode 只接受一個currencySymbol，但它是一個承諾。

const roundedAmount = getRoundedAmount(123.4517, 2); // 123.46
const roundedAmount = getRoundedAmount(123.4517, 2, true); // 123.45

結論

許多應用程式都涉及國家和貨幣，開發此軟體套件是為了解決我們在Headless Technologies Limited 工作期間以及開發在30 多個國家/地區使用的SAAS 銷售技術平台engaze.ai 時遇到的許多問題。

如果您發現該軟體包有用，請考慮為該軟體包加星標 Github Repo。

請隨時在貼文中留下問題。

以上是使用 JS 管理國家和貨幣的詳細內容。更多資訊請關注PHP中文網其他相關文章！