JS로 국가 및 통화 관리-JS 튜토리얼-php.cn

Managing countries and currencies with JS

모든 국가에 대해 다양한 통화 형식을 지정하고 국가 및 통화 목록을 관리하는 것은 프로젝트에서 몇 가지 어려움을 겪을 수 있습니다. 첫째, 우리는 코드베이스, 특히 프런트 엔드에 200개 국가 목록과 해당 통화, 다이얼 코드, 깃발 이모티콘을 포함하고 싶지 않습니다. 둘째, 모든 국가는 서로 다른 통화 기호를 따르고, 쉼표 배치와 같은 서로 다른 형식을 따르며, 서로 다른 소수점 정밀도를 관리해야 합니다.

이것이 npm 패키지 country-currency-utils가 작성된 이유입니다. 서버나 프런트엔드 등 자바스크립트를 사용하는 모든 프로젝트에 적합한 TypeScript로 작성되었습니다.

국가

패키지의 COUNTRIES_DETAILS_URL 변수를 통해 액세스할 수 있는 CDN을 통해 호스팅되는 국가 목록이 있습니다. 응답은 키가 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"])

로그인 후 복사

통화

CURRENCIES_DETAILS_URL 변수로 액세스할 수 있는 CDN을 통해 호스팅되는 통화 목록도 있습니다. 여기에는 키가 ISO 표준 통화 코드이고 값이 통화 기호(기본 및 표준), 숫자 그룹화(백만억 또는 Lakh-Crore), 소수점 정밀도와 같은 다양한 통화 세부정보가 포함된 개체인 키 값 개체가 포함되어 있습니다. 통화. 데이터를 활용하는 기능은 다음과 같습니다.

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

로그인 후 복사

참고: 먼저 MoneyDetails를 읽는 프라미스를 사용한다는 것을 알 수 있습니다. 코드베이스에 모든 통화 세부 정보 목록을 포함하고 싶지 않으므로 이러한 방식으로 처리하는 것이 중요합니다. 그래서 우리는 데이터를 가져와서 사용합니다. 그러나 복사본을 유지하고 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는 통화 기호만 사용하지만 이는 약속입니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!