首页 > web前端 > js教程 > 使用 JS 管理国家和货币

使用 JS 管理国家和货币

Mary-Kate Olsen
发布: 2024-12-29 05:22:08
原创
894 人浏览过

Managing countries and currencies with 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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板