DEV Community

Cover image for Country Code to Flag Emoji
Jorik
Jorik

Posted on

Country Code to Flag Emoji

Instead of showing boring country codes like US, CH, NL, it is much nicer to show the flag emojis, πŸ‡ΊπŸ‡Έ πŸ‡¨πŸ‡­ and πŸ‡³πŸ‡±, right? This isn't hard to do with some JavaScript.

function getFlagEmoji(countryCode) {
  const codePoints = countryCode
    .toUpperCase()
    .split('')
    .map(char =>  127397 + char.charCodeAt());
  return String.fromCodePoint(...codePoints);
}
Enter fullscreen mode Exit fullscreen mode

The flag emoji is a combination of the two unicode region characters, located at unicode position 127462 for the letter A. For CH (Switzerland), we want the indexes to be 127464 and 127469.

Run down of what happens in this little function;

  • First, uppercase the country code input to ensure we're getting the right character position.
  • Split into an array, and iterate over each character.
  • We can receive the UTF-16 code index from the character using charCodeAt. The UTF-16 A is positioned at 65, and we have subtracted this from the region A character index 127462, explaining the hardcoded 127397 value (127462 - 65). To get the correct flag emoji index, we simply add the received index to the offset number.
  • Finally, the String.fromCodePoint function will return the emoji characters for the computed indexes.
getFlagEmoji('US') = πŸ‡ΊπŸ‡Έ
getFlagEmoji('NL') = πŸ‡³πŸ‡±
getFlagEmoji('CH') = πŸ‡¨πŸ‡­
Enter fullscreen mode Exit fullscreen mode

Instant flags without additional resources!

Discussion (8)

Collapse
link2twenty profile image
Andrew Bone • Edited on

One problem with this approach is it leaves you at the mercy of your OS (and even browser).

In this image I'm running the same fiddle on the same OS (windows 10) but in different browsers (the top one is chrome the bottom is firefox).

Compare Chrome and Firefox

That all being said it's a nice way to keep things looking right for the OS. And a great way to keep code light.

Collapse
jonrandy profile image
Jon Randy • Edited on

Nice. I'm gonna save a 1-liner Gist for future use:

const getFlagEmoji = countryCode=>String.fromCodePoint(...[...countryCode.toUpperCase()].map(x=>0x1f1a5+x.charCodeAt()))
Enter fullscreen mode Exit fullscreen mode
Collapse
jorik profile image
Jorik Author

Nice compact improvement! Although I would also suggest optimising for readability :-)

Collapse
jonrandy profile image
Jon Randy

I did. This one was too much... :P

const getFlag=c=>String.fromCodePoint(...[...c.toUpperCase()].map(x=>0x1f1a5+x.charCodeAt()))
Enter fullscreen mode Exit fullscreen mode
Thread Thread
jorik profile image
Jorik Author • Edited on

You inspired me to optimise the example function in the article to have less redundant code. :-)

An alternative implementation could use the replace method to replace each character.

function getFlagEmoji(countryCode) {
  return countryCode.toUpperCase().replace(/./g, char => 
      String.fromCodePoint(127397 + char.charCodeAt())
  );
}
Enter fullscreen mode Exit fullscreen mode
Collapse
mosijava profile image
Mostafa Javaheripour

Something weird has happened and this doesn't work in latest chrome (93) on windows.

it works fine on linux both in chrome and firefox though.

Collapse
nirazanbasnet profile image
Nirazan Basnet

Nice

Collapse
astagi profile image
Andrea Stagi

Great article! I love emojis some time ago and I made a Python module to get flags github.com/lotrekagency/emojiflag