DEV Community

Cover image for 🧪 Tester une locale en 2 secondes de manière élégante (sans se prendre la tête)
OCLKA
OCLKA

Posted on • Edited on

🧪 Tester une locale en 2 secondes de manière élégante (sans se prendre la tête)

#french #i18 #javascript #webdev

Cet article explique comment valider une locale (comme fr-FR ou en-US) en 2 secondes pour éviter les erreurs d'affichage ou les crashes, en utilisant Intl.DateTimeFormat qui lève une erreur si la locale est invalide.

Tu veux tester une locale parce que t’as peur que ton utilisateur ait déclaré mi-MI pour du Minion ou tlh-QAAK pour du Klingon ?

⚠️ Le scénario catastrophe

Imagine : ton utilisateur sélectionne une locale inexistante (xyz-XYZ), et soudain :

  • Ton frontend affiche des undefined partout.
  • Ton backend crash avec un RangeError: invalid language tag. Avec ce snippet, tu évites ça en 2 lignes.

🇫🇷 Une locale, c’est quoi ?

Les codes comme fr-FR ou en-US suivent la norme IETF BCP 47. Ils se composent de :

  • 2 lettres pour la langue (fr, en… selon ISO 639-1).
  • 2 lettres pour le pays (FR, US… selon ISO 3166-1 alpha-2).

😱 Le problème : 45 000 combinaisons possibles*

  • 180 langues × 250 pays = 45 000 locales théoriques. > "45 000 ?! 🥵 ¿La cucaracha?"

*Heureusement, 99% sont inutiles

✅ La solution : Zod + Intl (ou Intl seul)

Avec Zod (pour les fans de validation) : 

import { z } from "zod";
const localeSchema = z.string().refine(
  (locale) => {
    try {
      new Intl.DateTimeFormat(locale);
      return true;
    } catch {
      return false;
    }
  },
  { message: "Locale invalide. Essayez 'fr-FR' ou 'en-US'." }
);
Enter fullscreen mode Exit fullscreen mode

Sans Zod (version minimaliste) : 

function isValidLocale(locale: string): boolean {
  try {
    new Intl.DateTimeFormat(locale);
    return true;
  } catch {
    return false;
  }
}
Enter fullscreen mode Exit fullscreen mode

🎯 Résultat : 

testLocale("fr-FR"); // ✅ Valide
testLocale("tlh-QAAK"); // ❌ Invalide (désolé, fans de Star Trek)
Enter fullscreen mode Exit fullscreen mode

🔧 Bonus : Quelles locales sont supportées ?

Pour vérifier ce que ton environnement supporte (navigateur/Node.js) :

console.log(Intl.DateTimeFormat.supportedLocalesOf(["fr-FR", "tlh-QAAK"]));
// → ["fr-FR"] (le klingon n’est pas encore standardisé)
Enter fullscreen mode Exit fullscreen mode

Pourquoi ça marche ?
Intl.DateTimeFormat lève une erreur si la locale est invalide. On exploite ce mécanisme pour valider en 1 ligne.

👍 Pour en savoir plus :

Pense à valider tes locales et sur ce, Poulétikamassala ! 👋

Cet article a été initialement publié le 20/08/205 sur mon blog hashnode.dev.

Top comments (0)