JS を使用して国と通貨を管理する-jsチュートリアル-php.cn

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 を通じてホストされている通貨のリストもあり、CURRENTIES_DETAILS_URL 変数でアクセスできます。これには、キーが ISO 標準通貨コードであり、値が通貨記号 (ネイティブおよび標準)、桁グループ (10 億または 10 億または 10 億)、小数精度などのさまざまな通貨の詳細を伴うオブジェクトであるキー値オブジェクトが含まれます。通貨。データを利用するための関数を以下に示します。

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 を読み取るために Promise を使用していることがわかります。コードベースにすべての通貨の詳細のリストを含めたくないため、この方法で処理することが重要です。そこでデータを取得して使用します。ただし、コピーを保持して getRoundedAmountOnCurrency 関数を使用することもできます。同じ考え方が次の関数にも当てはまります。

金額の書式設定

金額を書式設定すると、表示目的で文字列が返されます。金額の書式設定には 2 つのことが関係します

金額を固定小数点以下の桁で指定します
カンマ区切りの金額を返します

通貨に基づいて金額を書式設定するには、次の関数を使用します。

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"])

ログイン後にコピー

2 番目の関数 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 リポジトリにスターを付けることを検討してください。

お気軽に投稿に質問を残してください。

以上がJS を使用して国と通貨を管理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。