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);
}
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 at65
, and we have subtracted this from the region A character index127462
, explaining the hardcoded127397
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') = π¨π
Instant flags without additional resources!
Top comments (20)
Nice. I'm gonna save a 1-liner Gist for future use:
Nice compact improvement! Although I would also suggest optimising for readability :-)
I did. This one was too much... :P
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.This turned into a CodeWars challenge lol
Combined both of them, and I like this best. lol
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.
Thank you, very nice! I just wanted to share a performance improvement:
From the benchmark your original code is 12% slower and the version in the comments using
replace
is 14% slower: jsperf benchmarkSomething 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.
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...
great code, but somehow it does not work on UK
It's GB (Great Britain) for the UK
Great article! I love emojis some time ago and I made a Python module to get flags github.com/lotrekagency/emojiflag
it is not working on chrome
It works for me!
Just tested it with Firefox, Chrome and Edge, using Archlinux and having Google Noto as default system font
it is not working on google chrome just shows the flag code
Nice
Using kotlin on Android
gist.github.com/asissuthar/cf8fcf0...
Please your Flag kurdistan
I'm facing the issue in Bing browser and Google chrome, it's only showing country code instead of it's emoji.