Länder und Währungen mit JS verwalten

Das Verwalten der Liste von Ländern und Währungen sowie das Formatieren verschiedener Währungsformate für alle verschiedenen Länder kann in unseren Projekten einige Herausforderungen und Arbeit darstellen. Erstens möchten wir keine Liste mit 200 Ländern und ihren Währungen, Vorwahlen und Flaggen-Emojis in unserer Codebasis herumtragen, insbesondere nicht im Frontend. Zweitens verwendet jedes Land unterschiedliche Währungssymbole, unterschiedliche Formatierungen wie Komma-Platzierungen und unterschiedliche Dezimalgenauigkeiten müssen verwaltet werden.

Aus diesem Grund wurde das NPM-Paket Country-Currency-Utils geschrieben. Es ist in Typoskript geschrieben und eignet sich für jedes Projekt, das Javascript verwendet, egal ob auf dem Server oder im Frontend.

Länder

Wir haben eine Liste der über CDN gehosteten Länder, auf die über die Variable COUNTRIES_DETAILS_URL aus dem Paket zugegriffen werden kann. Die Antwort ist ein Schlüsselwertobjekt, wobei der Schlüssel der zweibuchstabige ISO-Standard-Ländercode ist. Das Wertobjekt enthält Wählcode, Währungscode (ISO-Standard) und Flaggen-Emojis. Mit den folgenden Funktionen können Länder aus dem Paket aufgelistet werden.

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

Währungen

Wir haben auch eine Liste von Währungen, die über CDN gehostet werden und über die Variable CURRENCIES_DETAILS_URL zugänglich sind. Es enthält ein Schlüsselwertobjekt, wobei „key“ ein ISO-Standard-Währungscode ist und der Wert ein Objekt mit verschiedenen Währungsdetails wie Währungssymbolen (nativ und Standard), Zifferngruppierung (Millionen-Milliarden oder Lakh-Crore) und Dezimalgenauigkeit gefolgt von dem ist Währung. Hier sind Funktionen zur Nutzung der Daten.

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

Dienstprogramme zur Betragsformatierung

Die Entwicklung eines Projekts, das mehrere Währungen verwaltet, kann aus mehreren Gründen eine Herausforderung sein –

• Behandeln Sie die Dezimalstellengenauigkeit der Währungen
• Zeigen Sie die richtigen Symbole an (native und Standardsymbole)
• Formatieren Sie die Währungen mit Komma-Trennung

Die Währungsdatenliste enthält alle wichtigen Daten, die für die korrekte Anzeige von Geldbeträgen erforderlich sind. Es gibt auch Hilfsfunktionen, die bei der Handhabung von Geldbeträgen helfen.

Beträge runden

Standardmäßig wird der Geldbetrag gerundet, indem der Betrag begrenzt wird. Sie können den Betrag jedoch auch in der Mitte runden.

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

Möglicherweise möchten Sie Beträge je nach Währung auch runden. Hier haben wir eine weitere Funktion zum Runden der Währungsdetails.

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

Hinweis: Sie werden feststellen, dass wir das Versprechen verwenden, zuerst die Währungsdetails zu lesen. Es ist wichtig, auf diese Weise vorzugehen, da wir nicht alle Währungsdetails in unserer Codebasis auflisten möchten. Also holen wir die Daten ab und nutzen sie. Sie können sich aber auch dafür entscheiden, eine Kopie aufzubewahren und die Funktion getRoundedAmountOnCurrency zu verwenden. Die gleiche Idee gilt für die nächsten Funktionen.

Beträge formatieren

Bei der Formatierung von Beträgen werden Zeichenfolgen zu Anzeigezwecken zurückgegeben. Das Formatieren von Beträgen umfasst zwei Dinge

• Geben Sie den Betrag mit festen Dezimalstellen an
• Geben Sie einen durch Kommas getrennten Betrag zurück

Verwenden Sie die folgende Funktion, um Beträge in Währungen zu formatieren.

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

Beträge anzeigen

Um Beträge schließlich anzuzeigen, müssen dem formatierten Betrag Währungssymbole hinzugefügt werden. Nutzen Sie die folgenden Funktionen

Die erste Funktion getDisplayAmountOnCurrency übernimmt Währungsdetails -

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

Die zweite Funktion, getDisplayAmountOnCurrencyCode, benötigt nur ein Währungssymbol, aber es ist ein Versprechen.

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

Abschluss

Viele Anwendungen beschäftigen sich mit Ländern und Währungen und dieses Paket wurde entwickelt, um viele der Probleme zu lösen, mit denen wir während unserer Arbeit bei Headless Technologies Limited und bei der Entwicklung der SAAS-Vertriebstechnologieplattform engaze.ai konfrontiert waren, die in über 30 Ländern eingesetzt wird.

Wenn Sie das Paket nützlich finden, sollten Sie erwägen, das Paket Github Repo zu starten.

Sie können gerne eine Frage im Beitrag hinterlassen.

Das obige ist der detaillierte Inhalt vonLänder und Währungen mit JS verwalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!