Rumah > hujung hadapan web > tutorial js > Mengurus negara dan mata wang dengan JS

Mengurus negara dan mata wang dengan JS

Mary-Kate Olsen
Lepaskan: 2024-12-29 05:22:08
asal
907 orang telah melayarinya

Managing countries and currencies with JS

Mengurus senarai negara dan mata wang bersama-sama dengan memformat format mata wang yang berbeza untuk semua negara yang berbeza boleh memberikan beberapa cabaran dan berfungsi dalam projek kami. Pertama, kami tidak mahu membawa senarai 200 negara dan mata wang mereka, kod dail, emoji bendera dalam pangkalan kod kami, terutamanya di bahagian hadapan. Kedua, setiap negara mengikut simbol mata wang yang berbeza, pemformatan yang berbeza, seperti peletakan koma dan ketepatan perpuluhan yang berbeza perlu diuruskan.

Inilah sebab mengapa pakej npm country-currency-utils ditulis. Ia ditulis dalam skrip taip, sesuai dalam mana-mana projek yang menggunakan javascript, sama ada pada pelayan atau bahagian hadapan.

negara

Kami mempunyai senarai negara yang dihoskan melalui CDN yang boleh diakses melalui pembolehubah COUNTRIES_DETAILS_URL daripada pakej. Respons ialah objek nilai utama dengan kunci ialah kod negara standard ISO 2 huruf. Objek nilai mengandungi kod Dail, Kod Mata Wang (standard ISO) dan emoji bendera. Fungsi berikut boleh digunakan untuk menyenaraikan negara daripada pakej.

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"])
Salin selepas log masuk
Salin selepas log masuk

Mata wang

Kami juga mempunyai senarai mata wang yang dihoskan melalui CDN yang boleh diakses dengan pembolehubah CURENCIES_DETAILS_URL. Ia mengandungi objek nilai utama yang kuncinya ialah kod mata wang standard ISO dan nilainya ialah objek dengan butiran mata wang yang berbeza seperti simbol mata wang (asli dan standard), kumpulan digit (juta bilion atau Lakh-Crore) dan ketepatan perpuluhan diikuti dengan mata wang. Berikut ialah fungsi untuk menggunakan data.

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"])
Salin selepas log masuk
Salin selepas log masuk

Utiliti Pemformatan Amaun

Apabila membangunkan projek yang mengendalikan berbilang mata wang boleh menjadi satu cabaran untuk beberapa sebab -

  • Kendalikan ketepatan tempat perpuluhan mata wang
  • Tunjukkan simbol yang betul (simbol asli dan standard)
  • Formatkan mata wang dengan pemisahan koma

Senarai mata wang data mengandungi semua data penting yang diperlukan untuk paparan jumlah kewangan yang betul. Terdapat juga fungsi utiliti yang membantu mengendalikan jumlah kewangan.

Membundarkan jumlah

Amaun lalai untuk membundarkan amaun kewangan ialah menutup amaun tersebut. Walau bagaimanapun, anda juga boleh membundarkan amaun di tengah.

const roundedAmount = getRoundedAmount(123.4517, 2); // 123.46
const roundedAmount = getRoundedAmount(123.4517, 2, true); // 123.45
Salin selepas log masuk
Salin selepas log masuk

Anda juga mungkin mahu membundarkan jumlah bergantung pada mata wang. Di sini, kami mempunyai fungsi lain untuk membulatkan butiran mata wang.

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
Salin selepas log masuk

Nota: Anda akan perasan bahawa kami menggunakan janji untuk membaca Butiran Mata Wang terlebih dahulu. Adalah penting untuk mengendalikan cara ini kerana kami tidak mahu membawa senarai semua butiran mata wang dalam pangkalan kod kami. Jadi kami mengambil data dan menggunakannya. Tetapi anda juga boleh memutuskan untuk menyimpan salinan dan menggunakan fungsi getRoundedAmountOnCurrency. Idea yang sama digunakan untuk fungsi seterusnya.

Memformat amaun

Memformatkan jumlah mengembalikan rentetan untuk tujuan paparan. Pemformatan amaun melibatkan dua perkara

  • Berikan jumlah tempat perpuluhan tetap
  • Kembalikan amaun dipisahkan koma

Gunakan fungsi berikut untuk memformat amaun pada mata wang.

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"])
Salin selepas log masuk
Salin selepas log masuk

Memaparkan jumlah

Akhir sekali memaparkan jumlah melibatkan penambahan simbol mata wang pada jumlah yang diformatkan. Gunakan fungsi berikut

Fungsi pertama getDisplayAmountOnCurrency mengambil butiran mata wang -

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"])
Salin selepas log masuk
Salin selepas log masuk

Fungsi kedua, getDisplayAmountOnCurrencyCode hanya memerlukan currencySymbol, tetapi ia adalah janji.

const roundedAmount = getRoundedAmount(123.4517, 2); // 123.46
const roundedAmount = getRoundedAmount(123.4517, 2, true); // 123.45
Salin selepas log masuk
Salin selepas log masuk

Kesimpulan

Banyak aplikasi berurusan dengan negara dan mata wang dan pakej ini dibangunkan untuk menyelesaikan banyak masalah yang kami hadapi semasa kami bekerja di Headless Technologies Limited dan semasa membangunkan platform teknologi jualan SAAS engaze.ai yang digunakan di 30 lebih negara.

Jika anda mendapati pakej itu berguna, pertimbangkan untuk membintangi pakej Github Repo.

Sila tinggalkan soalan pada siaran.

Atas ialah kandungan terperinci Mengurus negara dan mata wang dengan JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan