DEV Community

Cover image for Country Code to Flag Emoji

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 ...
Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • 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()))
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jorik profile image
Jorik

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 • 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())
  );
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
jacobmgevans profile image
Jacob Evans

This turned into a CodeWars challenge lol

Thread Thread
 
alia5 profile image
Peter Repukat

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

(c)=>c.replace(/./g,(ch)=>String.fromCodePoint(0x1f1a5+ch.toUpperCase().charCodeAt()))
Enter fullscreen mode Exit fullscreen mode
Collapse
 
link2twenty profile image
Andrew Bone • 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).

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
 
susnux profile image
Ferdinand

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}`);
}
Enter fullscreen mode Exit fullscreen mode

From the benchmark your original code is 12% slower and the version in the comments using replace is 14% slower: jsperf benchmark

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
 
jorik profile image
Jorik • Edited

For political reasons, Windows doesn't ship with country flag emojis. It however returns the country code, so that should be a fair alternative.

answers.microsoft.com/en-us/window...

Collapse
 
niightly profile image
Thiago

great code, but somehow it does not work on UK

Collapse
 
rebeccatuffnell profile image
Rebecca Tuffnell • Edited

It's GB (Great Britain) for the UK

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

Collapse
 
mojtabazolfaghari profile image
mojtaba zolfaghari

it is not working on chrome

Collapse
 
amr3k profile image
Amr • Edited

It works for me!
Just tested it with Firefox, Chrome and Edge, using Archlinux and having Google Noto as default system font

Collapse
 
mojtabazolfaghari profile image
mojtaba zolfaghari

it is not working on google chrome just shows the flag code

Collapse
 
nirazanbasnet profile image
⚑ Nirazan Basnet ⚑

Nice

Collapse
 
asissuthar profile image
Ashish Suthar

Using kotlin on Android
gist.github.com/asissuthar/cf8fcf0...

Collapse
 
muhammed_mamidi_ba90b5e92 profile image
Muhammed Mamidi

Please your Flag kurdistan

Collapse
 
mohamma35066861 profile image
Mohammad Noushad Siddiqi

I'm facing the issue in Bing browser and Google chrome, it's only showing country code instead of it's emoji.