DEV Community

Country Code to Flag Emoji

Jorik on April 09, 2021

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 ...

Read full post

Jon Randy 🎖️ • Apr 9 '21 • Edited

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

const getFlagEmoji = countryCode=>String.fromCodePoint(...[...countryCode.toUpperCase()].map(x=>0x1f1a5+x.charCodeAt()))

Jorik • Apr 9 '21

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

Jon Randy 🎖️ • Apr 9 '21

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

const getFlag=c=>String.fromCodePoint(...[...c.toUpperCase()].map(x=>0x1f1a5+x.charCodeAt()))

Jorik • Apr 9 '21 • Edited

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())
  );
}

Jacob Evans • Jan 7 '22

This turned into a CodeWars challenge lol

Peter Repukat • Jan 12 '22

Combined both of them, and I like this best. lol

(c)=>c.replace(/./g,(ch)=>String.fromCodePoint(0x1f1a5+ch.toUpperCase().charCodeAt()))

Andrew Bone • Apr 9 '21 • Edited

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).

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.

Ferdinand • Jun 24 '23

Thank you, very nice! I just wanted to share a performance improvement:

function getFlagEmoji(countryCode) {
  return [...countryCode.toUpperCase()].map(char => 
      String.fromCodePoint(127397 + char.charCodeAt())
  ).reduce((a, b) => `${a}${b}`);
}