Gérer les pays et les devises avec JS-js tutoriel-php.cn

Managing countries and currencies with JS

La gestion de la liste des pays et des devises ainsi que le formatage de différents formats de devises pour tous les différents pays peuvent présenter certains défis et fonctionner dans nos projets. Premièrement, nous ne voulons pas avoir une liste de 200 pays et leurs devises, des codes de numérotation, des emojis de drapeau dans notre base de code, spécialement sur le front-end. Deuxièmement, chaque pays suit des symboles monétaires différents, un formatage différent, comme le placement des virgules et différentes précisions décimales, doit être géré.

C'est pourquoi le package npm country-currency-utils a été écrit. Il est écrit en dactylographié, adapté à tout projet utilisant javascript, que ce soit sur le serveur ou sur le frontend.

Pays

Nous avons une liste de pays hébergés via CDN accessibles via la variable COUNTRIES_DETAILS_URL du package. La réponse est un objet valeur clé où clé est le code de pays standard ISO à 2 lettres. L'objet valeur contient le code de numérotation, le code de devise (norme ISO) et les émojis de drapeau. Les fonctions suivantes peuvent être utilisées pour répertorier les pays du package.

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

Copier après la connexion

Devises

Nous avons également une liste de devises hébergées via CDN accessible avec la variable CURRENCIES_DETAILS_URL. Il contient un objet valeur clé où la clé est le code de devise standard ISO et la valeur est un objet avec différents détails monétaires tels que des symboles monétaires (natifs et standard), un regroupement de chiffres (millions de milliards ou Lakh-Crore) et une précision décimale suivie du devise. Voici des fonctions pour utiliser les données.

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

Copier après la connexion

Utilitaires de formatage des montants

Lorsque développer un projet qui gère plusieurs devises peut être un défi pour un certain nombre de raisons -

Gérer les précisions décimales des devises
Afficher les symboles appropriés (symboles natifs et standard)
Formater les devises avec séparation par des virgules

La liste des données sur les devises contient toutes les données importantes nécessaires au bon affichage des montants monétaires. Il existe également des fonctions utilitaires qui facilitent la gestion des montants monétaires.

Arrondir les montants

La valeur par défaut pour arrondir le montant monétaire est de plafonner le montant. Cependant vous pouvez également arrondir le montant au milieu.

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

Copier après la connexion

Vous souhaiterez peut-être également arrondir les montants en fonction de la devise. Ici, nous avons une autre fonction pour arrondir les détails de la devise.

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

Copier après la connexion

Remarque : Vous remarquerez que nous utilisons une promesse de lire d'abord les détails de la devise. Il est important de procéder de cette façon car nous ne souhaitons pas conserver une liste de tous les détails des devises dans notre base de code. Nous récupérons donc les données et les utilisons. Mais vous pouvez également décider d’en conserver une copie et d’utiliser la fonction getRoundedAmountOnCurrency. La même idée s'applique pour les fonctions suivantes.

Formatage des montants

Le formatage des montants renvoie des chaînes à des fins d'affichage. Le formatage des montants implique deux choses

Donner le montant avec décimales fixes
Renvoyer un montant séparé par des virgules

Utilisez la fonction suivante pour formater les montants en devise.

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

Copier après la connexion

Afficher les montants

Enfin, afficher les montants consiste à ajouter des symboles monétaires au montant formaté. Utilisez les fonctions suivantes

La première fonction getDisplayAmountOnCurrency prend les détails de la devise -

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

Copier après la connexion

La deuxième fonction, getDisplayAmountOnCurrencyCode ne prend qu'un symbole de devise, mais c'est une promesse.

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

Copier après la connexion

Conclusion

De nombreuses applications traitent des pays et des devises et ce package a été développé pour résoudre de nombreux problèmes auxquels nous avons été confrontés lors de notre travail chez Headless Technologies Limited et lors du développement de la plateforme technologique de vente SAAS engaze.ai utilisée dans plus de 30 pays.

Si vous trouvez le package utile, pensez à mettre en vedette le package Github Repo.

N'hésitez pas à laisser une question sur le post.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!