Transformer un code pays en drapeau

Voir la vidéo
Débutant
Télécharger la vidéo

Petite astuce aujourd'hui pour vous montrer comment convertir une chaine de caractères contenant le code ISO d'un pays en drapeau sans utiliser d'images. En effet, il est possible de se reposer sur la table de caractères unicodes qui dispose d'emojis pour représenter les drapeaux de différents pays. La petite subtilité est que certains caractères peuvent être cumulés pour donner un nouvel emoji. Par exemple l'emoji 👨 combiné à l'emoji 🏿 (emoji couleur de peau) donne 👨🏿. Cela marche aussi avec les emojis "lettres régionales" qui, une fois combinées, donnent les drapeaux de pays (🇫 + 🇷 donne 🇫🇷). On peut utiliser cette particularité pour générer des drapeaux à partir du code d'un pays.

La logique

Pour commencer on va découper notre code pays en tableau de caractère.

code.split('') // ["f" , "r"]

On va ensuite obtenir le code UTF-16 de chaque caractère.

letter.charCodeAt(0)  // [102, 114]

Pour obtenir un nombre commençant à 1 pour la lettre "a" et "A" (dans la table UTF-16, "a" vaut 97 et "A" vaut 65) on peut récupérer le reste de la division par 32. On récupère aussi le code du caractère se situant avant le caractère régional 🇦 (0x1F1E6 - 1 = 0x1F1E5). 

letter.charCodeAt(0) % 32 + 0x1F1E5 // [127467, 127479]

Une fois les codes de ces emojis obtenus on peut les reconvertir en caractères à l'aide de la méthode fromCodePoint. 

String.fromCodePoint(emojiCode) // ['🇫', '🇷']

Il suffit enfin de rejoindre les 2 nouveaux caractères pour obtenir notre drapeau.

Le code final

Et voila à quoi ressemble le code final :

function isoToEmoji (code) {
  return code
    .split('')
    .map(letter => letter.charCodeAt(0) % 32 + 0x1F1E5)
    .map(emojiCode => String.fromCodePoint(emojiCode))
    .join('')
}

Et le même code pour PHP :

function isoToEmoji (string $code) {
    return implode(
        '', 
        array_map(
            fn ($letter) => mb_chr(ord($letter) % 32 + 0x1F1E5),
            str_split($code)
        )
    );
}

Rien ne s'affiche sur Window ?!

Sur Windows les navigateurs basés sur chromium (Edge compris) n'affichent pas les drapeaux car la police du système (Sego UI) ne supporte pas les emojis drapeau. En attendant que ce problème évolu il est possible d'utiliser un polyfill qui va charger une police alternative qui inclue les drapeaux pour avoir un affichage fonctionnel.

Publié
Technologies utilisées
JavaScript
Auteur :
Grafikart
Partager