Get the currency symbol for a locale

Question

How to get the currency symbol for a given currency string ("GBP", "USD" etc)? The best I've come up with seems ridiculously long winded, is there another way or am I better off with a lookup table?

const userLocale = "EN-gb";
const userCurrency = "GBP";
const withValueEl = document.querySelector(".withValue");
const withoutValueEl = document.querySelector(".withoutValue");
const valueWithCurrency = Number(0).toLocaleString(userLocale, {
  style: "currency",
  currency: userCurrency,
  minimumFractionDigits: 2
});
const valueWithoutCurrency = valueWithCurrency.replace(Number(0).toLocaleString(userLocale, {
  minimumFractionDigits: 2
}), "")

withValueEl.innerHTML = valueWithCurrency
withoutValueEl.innerHTML = valueWithoutCurrency

With value:<span class="withValue"></span><br /> Without value:<span class="withoutValue"></span><br />

Solution 1

This looks like more work than it really is when you're including all of the DOM selector and value injection logic, which is not related to the functionality you want. Extracting the symbol is pretty straightforward:

const getCurrencySymbol = (locale, currency) => (0).toLocaleString(locale, { style: 'currency', currency, minimumFractionDigits: 0, maximumFractionDigits: 0 }).replace(/\d/g, '').trim()

Or if you aren't using es6:

function getCurrencySymbol (locale, currency) {
  return (0).toLocaleString(
    locale,
    {
      style: 'currency',
      currency: currency,
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }
  ).replace(/\d/g, '').trim()
}

The toLocaleString options are verbose, so there's not much to do about that. But you don't need to use the Number constructor (really ever). If you get the currency value without decimals or separators it's simple to remove the numbers and have only the symbol left. You'll want to take this kind of approach because, depending on the locale and the currency, the symbol is not always a single character. For example:

getCurrencySymbol('en-US', 'CNY') // CN¥
getCurrencySymbol('zh-CN', 'CNY') // ￥

Trimming the result is also a good idea. You can chain .trim() to the result like in the examples, or update the regex to include whitespaces. It should be noted this is a somewhat naive approach, since it only works for number characters 0-9. If you needed to include other number characters, such as Arabic (٠١٢٣٤٥٦٧٨٩), you'd need to update the regex to include unicode ranges: /[0-9\u0660-\u0669]/g. You'd have to add any other number system you need to support in similar fashion.

Localization is a non-trivial problem, so it might make more sense to just use a currency code to symbol map like this one.

Solution 2

Intnl.NumberFormat#formatToParts (MDN documentation) will return an array of the formatted parts, including an entry that looks like { type: 'currency', value: '$' }, for USD.

So, using that you can do:

const userLocale = "EN-gb";
const userCurrency = "GBP";
const withCurrency = new Intl.NumberFormat(userLocale, { style: 'currency', currency: userCurrency }).formatToParts(3.50).map(val => val.value).join('');
const withoutCurrency = new Intl.NumberFormat(userLocale, { style: 'currency', currency: userCurrency }).formatToParts(3.50).slice(1).map(val => val.value).join('');

And reading the values:

> withCurrency
'£3.50'
> withoutCurrency
'3.50'

Comments

[J. Pichardo]

May I suggest taking a look into dinerojs ?

[Admin]

With vanilla JS that's how you do it. To make it easier, you can use a library. Google "javascript currency symbol map"

[conradj]

@J.Pichardo I can't work out how to do it any easier with dinerojs

[conradj]

@Amy if you'd like to add this as an answer I'll accept it.

[iulian]

The withoutCurrency won't work in all cases as some locale/currency combos (e.g. RU/RUB) display the currency symbol at the end of the amount.