Comment afficher les noms de pays dans différentes langues ?

Introduction

Lorsque vous créez un formulaire d'expédition, une page de profil utilisateur ou un sélecteur d'adresse, vous devez afficher des noms de pays. Les utilisateurs voient "France" en anglais, "Francia" en espagnol, "Frankreich" en allemand et "フランス" en japonais. Chaque utilisateur s'attend à voir les noms de pays écrits dans sa propre langue.

Votre application stocke des codes de pays comme FR, US ou JP dans les bases de données et les API. Ces codes standardisés fonctionnent sur tous les systèmes, mais les utilisateurs ont besoin de noms lisibles. L'API Intl.DisplayNames convertit les codes de pays en noms de pays localisés dans n'importe quelle langue sans avoir à maintenir des tables de traduction ou dépendre de bibliothèques externes.

Comprendre les codes de pays

Les pays sont identifiés par des codes à deux lettres définis dans la norme ISO 3166-1 alpha-2. Chaque pays reçoit un code unique qui reste constant dans toutes les langues et systèmes.

// Codes de pays courants
// US = United States (États-Unis)
// GB = Great Britain (Grande-Bretagne/Royaume-Uni)
// FR = France
// DE = Germany (Allemagne/Deutschland)
// JP = Japan (Japon)
// CN = China (Chine)
// BR = Brazil (Brésil)
// IN = India (Inde)

Ces codes apparaissent dans les formulaires, les URL, les bases de données et les API. Le code US signifie toujours États-Unis, que votre application fonctionne en anglais, en espagnol, en japonais ou dans toute autre langue. Le code fournit un identifiant stable tandis que le nom affiché change en fonction de la langue de l'utilisateur.

Utilisation d'Intl.DisplayNames pour obtenir les noms de pays

Le constructeur Intl.DisplayNames crée un formateur qui convertit les codes de pays en noms de pays. Vous spécifiez une locale et définissez le type sur "region" pour obtenir les noms de pays.

const countryNames = new Intl.DisplayNames(["en"], { type: "region" });

console.log(countryNames.of("US"));
// "United States"

console.log(countryNames.of("FR"));
// "France"

console.log(countryNames.of("JP"));
// "Japan"

Le premier argument est un tableau d'identifiants de locale. L'option type: "region" indique au formateur que vous voulez des noms de pays ou de régions. La méthode of() prend un code de pays et renvoie son nom localisé.

Le terme "région" couvre les pays, les territoires et les zones géographiques. Cela inclut les pays indépendants comme la France, les territoires comme Porto Rico, et les régions spéciales comme l'Union européenne.

Affichage des noms de pays dans différentes langues

Le même code de pays produit différents noms dans différentes langues. Créez des formateurs pour différentes locales pour voir comment les noms de pays changent.

const englishNames = new Intl.DisplayNames(["en"], { type: "region" });
const spanishNames = new Intl.DisplayNames(["es"], { type: "region" });
const germanNames = new Intl.DisplayNames(["de"], { type: "region" });
const japaneseNames = new Intl.DisplayNames(["ja"], { type: "region" });

console.log(englishNames.of("FR"));
// "France"

console.log(spanishNames.of("FR"));
// "Francia"

console.log(germanNames.of("FR"));
// "Frankreich"

console.log(japaneseNames.of("FR"));
// "フランス"

Chaque formateur renvoie le nom du pays dans sa locale d'affichage. Cela gère toute la complexité de la maintenance des traductions de noms de pays dans différentes langues.

Vous pouvez créer une fonction qui obtient les noms de pays dans n'importe quelle langue.

function getCountryName(countryCode, locale) {
  const names = new Intl.DisplayNames([locale], { type: "region" });
  return names.of(countryCode);
}

console.log(getCountryName("US", "en"));
// "United States"

console.log(getCountryName("US", "fr"));
// "États-Unis"

console.log(getCountryName("US", "ar"));
// "الولايات المتحدة"

console.log(getCountryName("DE", "en"));
// "Germany"

console.log(getCountryName("DE", "de"));
// "Deutschland"

console.log(getCountryName("DE", "es"));
// "Alemania"

Cette fonction fonctionne pour n'importe quelle combinaison de code de pays et de locale. Le navigateur fournit automatiquement les traductions.

Construction d'un sélecteur de pays

Un cas d'utilisation courant est la construction d'un menu déroulant où les utilisateurs sélectionnent leur pays. Les noms de pays doivent apparaître dans la langue de l'utilisateur.

function createCountrySelector(locale) {
  const countryNames = new Intl.DisplayNames([locale], { type: "region" });

  const countries = [
    "US", "GB", "CA", "AU", "FR", "DE", "ES", "IT",
    "JP", "CN", "KR", "IN", "BR", "MX", "AR", "RU"
  ];

  const select = document.createElement("select");
  select.id = "country";
  select.name = "country";

  const placeholder = document.createElement("option");
  placeholder.value = "";
  placeholder.textContent = "Select a country";
  select.appendChild(placeholder);

  countries.forEach((code) => {
    const option = document.createElement("option");
    option.value = code;
    option.textContent = countryNames.of(code);
    select.appendChild(option);
  });

  return select;
}

const selector = createCountrySelector("en");
document.body.appendChild(selector);

Cela crée un menu déroulant avec des noms de pays en anglais. Changez la locale en "es" et la même fonction produit un menu déroulant avec des noms de pays en espagnol. Changez-la en "ja" et les noms apparaissent en japonais.

Vous pouvez faire en sorte que le sélecteur réponde à la langue du navigateur de l'utilisateur.

function createLocalizedCountrySelector() {
  const userLocale = navigator.language;
  return createCountrySelector(userLocale);
}

const selector = createLocalizedCountrySelector();
document.body.appendChild(selector);

Le sélecteur affiche automatiquement les noms de pays dans la langue préférée de l'utilisateur en fonction des paramètres de son navigateur.

Obtenir tous les pays disponibles

La méthode Intl.supportedValuesOf() renvoie un tableau de tous les codes pays pris en charge. Cela élimine le besoin de maintenir une liste codée en dur.

const allCountries = Intl.supportedValuesOf("region");

console.log(allCountries.length);
// 249 (nombre approximatif en 2025)

console.log(allCountries.slice(0, 10));
// ["AC", "AD", "AE", "AF", "AG", "AI", "AL", "AM", "AO", "AQ"]

La méthode renvoie les codes par ordre alphabétique selon le code, et non selon le nom du pays. Vous devez trier par noms localisés si vous souhaitez un ordre alphabétique dans une langue spécifique.

function getSortedCountries(locale) {
  const countryNames = new Intl.DisplayNames([locale], { type: "region" });
  const allCountries = Intl.supportedValuesOf("region");

  return allCountries
    .map((code) => ({
      code,
      name: countryNames.of(code)
    }))
    .sort((a, b) => a.name.localeCompare(b.name, locale));
}

const sortedEnglish = getSortedCountries("en");
console.log(sortedEnglish.slice(0, 5));
// [
//   { code: "AF", name: "Afghanistan" },
//   { code: "AX", name: "Åland Islands" },
//   { code: "AL", name: "Albania" },
//   { code: "DZ", name: "Algeria" },
//   { code: "AS", name: "American Samoa" }
// ]

const sortedSpanish = getSortedCountries("es");
console.log(sortedSpanish.slice(0, 5));
// [
//   { code: "AF", name: "Afganistán" },
//   { code: "AL", name: "Albania" },
//   { code: "DE", name: "Alemania" },
//   { code: "AD", name: "Andorra" },
//   { code: "AO", name: "Angola" }
// ]

L'ordre de tri diffère selon les langues car les noms de pays se trient différemment selon les alphabets et les règles de collation.

Construire un sélecteur de pays complet

Combinez Intl.supportedValuesOf() avec Intl.DisplayNames pour créer un sélecteur avec tous les pays disponibles.

function createComprehensiveCountrySelector(locale) {
  const countryNames = new Intl.DisplayNames([locale], { type: "region" });
  const allCountries = Intl.supportedValuesOf("region");

  const sortedCountries = allCountries
    .map((code) => ({
      code,
      name: countryNames.of(code)
    }))
    .sort((a, b) => a.name.localeCompare(b.name, locale));

  const select = document.createElement("select");
  select.id = "country";
  select.name = "country";

  const placeholder = document.createElement("option");
  placeholder.value = "";
  placeholder.textContent = "Select a country";
  select.appendChild(placeholder);

  sortedCountries.forEach(({ code, name }) => {
    const option = document.createElement("option");
    option.value = code;
    option.textContent = name;
    select.appendChild(option);
  });

  return select;
}

const selector = createComprehensiveCountrySelector("en");
document.body.appendChild(selector);

Ce sélecteur inclut les 249 pays et territoires pris en charge par le navigateur, triés par ordre alphabétique dans la langue de l'utilisateur.

Gestion des codes pays invalides

Toutes les chaînes de deux lettres ne sont pas des codes pays valides. La méthode of() gère les codes invalides selon l'option fallback.

const withCodeFallback = new Intl.DisplayNames(["en"], {
  type: "region",
  fallback: "code"
});

const withNoneFallback = new Intl.DisplayNames(["en"], {
  type: "region",
  fallback: "none"
});

console.log(withCodeFallback.of("US"));
// "United States"

console.log(withCodeFallback.of("XX"));
// "XX"

console.log(withNoneFallback.of("US"));
// "United States"

console.log(withNoneFallback.of("XX"));
// undefined

L'option fallback: "code" renvoie le code d'entrée lorsqu'aucun pays n'existe. L'option fallback: "none" renvoie undefined pour les codes invalides.

Utilisez fallback: "none" lorsque vous devez détecter des codes invalides et les gérer explicitement.

function getValidatedCountryName(code, locale) {
  const names = new Intl.DisplayNames([locale], {
    type: "region",
    fallback: "none"
  });

  const name = names.of(code);

  if (name === undefined) {
    return "Unknown country";
  }

  return name;
}

console.log(getValidatedCountryName("US", "en"));
// "United States"

console.log(getValidatedCountryName("INVALID", "en"));
// "Unknown country"

Ce modèle vous aide à valider les entrées utilisateur ou les données provenant de sources externes.

Contrôle de la longueur des noms de pays avec style

L'option style contrôle l'apparence des noms de pays. Trois valeurs produisent différentes longueurs de sortie.

const longNames = new Intl.DisplayNames(["en"], {
  type: "region",
  style: "long"
});

const shortNames = new Intl.DisplayNames(["en"], {
  type: "region",
  style: "short"
});

const narrowNames = new Intl.DisplayNames(["en"], {
  type: "region",
  style: "narrow"
});

console.log(longNames.of("US"));
// "United States"

console.log(shortNames.of("US"));
// "US"

console.log(narrowNames.of("US"));
// "US"

Le style long est celui par défaut et produit des noms de pays complets. Les styles short et narrow renvoient des formes abrégées lorsqu'elles sont disponibles. Pour la plupart des pays, les styles court et étroit renvoient le code du pays lui-même.

Certains pays ont des formes courtes distinctes.

const longNames = new Intl.DisplayNames(["en"], {
  type: "region",
  style: "long"
});

const shortNames = new Intl.DisplayNames(["en"], {
  type: "region",
  style: "short"
});

console.log(longNames.of("GB"));
// "United Kingdom"

console.log(shortNames.of("GB"));
// "UK"

console.log(longNames.of("BO"));
// "Bolivia"

console.log(shortNames.of("BO"));
// "Bolivia"

Utilisez le style long par défaut pour la plupart des interfaces. Utilisez short ou narrow lorsque l'espace est limité, comme dans la navigation mobile ou les tableaux compacts.

Affichage des noms de région pour les territoires

La norme ISO 3166-1 inclut des territoires, des dépendances et des zones spéciales au-delà des pays indépendants. L'API Intl.DisplayNames les gère également.

const regionNames = new Intl.DisplayNames(["en"], { type: "region" });

console.log(regionNames.of("PR"));
// "Puerto Rico"

console.log(regionNames.of("GU"));
// "Guam"

console.log(regionNames.of("HK"));
// "Hong Kong"

console.log(regionNames.of("MQ"));
// "Martinique"

console.log(regionNames.of("GF"));
// "French Guiana"

Ces codes fonctionnent de la même manière que les codes pays. Votre application peut les traiter uniformément tandis que le navigateur fournit des noms localisés appropriés.

Utilisation des codes de région numériques

La norme ISO 3166-1 définit également des codes numériques. L'API Intl.DisplayNames accepte les codes de région numériques UN M.49 en plus des codes à deux lettres.

const regionNames = new Intl.DisplayNames(["en"], { type: "region" });

console.log(regionNames.of("840"));
// "United States"

console.log(regionNames.of("250"));
// "France"

console.log(regionNames.of("392"));
// "Japan"

Les codes numériques représentent également des régions géographiques plus larges.

const regionNames = new Intl.DisplayNames(["en"], { type: "region" });

console.log(regionNames.of("150"));
// "Europe"

console.log(regionNames.of("019"));
// "Americas"

console.log(regionNames.of("142"));
// "Asia"

console.log(regionNames.of("002"));
// "Africa"

console.log(regionNames.of("009"));
// "Oceania"

Ces codes fonctionnent dans toutes les langues.

const englishRegions = new Intl.DisplayNames(["en"], { type: "region" });
const spanishRegions = new Intl.DisplayNames(["es"], { type: "region" });

console.log(englishRegions.of("150"));
// "Europe"

console.log(spanishRegions.of("150"));
// "Europa"

Utilisez des codes numériques lorsque vous devez éviter les problèmes d'encodage de caractères ou travailler avec des systèmes qui utilisent les codes UN M.49.

Mise en cache des instances DisplayNames pour les performances

La création d'instances Intl.DisplayNames a une surcharge minimale, mais les applications qui convertissent de nombreux codes pays peuvent bénéficier de la mise en cache des formateurs.

const displayNamesCache = new Map();

function getDisplayNames(locale, type) {
  const key = `${locale}-${type}`;

  if (!displayNamesCache.has(key)) {
    displayNamesCache.set(
      key,
      new Intl.DisplayNames([locale], { type })
    );
  }

  return displayNamesCache.get(key);
}

function getCountryName(code, locale) {
  const formatter = getDisplayNames(locale, "region");
  return formatter.of(code);
}

console.log(getCountryName("US", "en"));
// "United States"

console.log(getCountryName("FR", "en"));
// "France"

console.log(getCountryName("US", "es"));
// "Estados Unidos"

Le cache stocke les formateurs indexés par locale et type. Les appels suivants réutilisent les formateurs existants plutôt que d'en créer de nouveaux.

Cette optimisation est particulièrement importante lors du rendu de grandes listes de pays ou du traitement de centaines de codes pays dans des tableaux ou des grilles de données.

Gestion des replis de locale

Le constructeur Intl.DisplayNames accepte un tableau de locales. Si la première locale n'est pas prise en charge, le navigateur se replie sur la locale suivante dans le tableau.

const names = new Intl.DisplayNames(["xx-XX", "en"], { type: "region" });

console.log(names.of("US"));
// "United States"

Le navigateur essaie d'abord "xx-XX", qui n'existe pas, puis se replie sur "en". Cela garantit que votre code fonctionne même lorsque la locale demandée n'est pas disponible.

Vous pouvez vérifier quelle locale le formateur utilise réellement.

const names = new Intl.DisplayNames(["xx-XX", "en"], { type: "region" });

console.log(names.resolvedOptions().locale);
// "en"

La méthode resolvedOptions() renvoie la locale vers laquelle le formateur s'est résolu après le traitement de repli.

Comparaison des noms de pays entre différentes langues

Les différentes langues formatent les noms de pays différemment. Certaines langues mettent en majuscule les noms de pays, d'autres non. Certaines langues incluent des articles, d'autres non.

const english = new Intl.DisplayNames(["en"], { type: "region" });
const french = new Intl.DisplayNames(["fr"], { type: "region" });
const german = new Intl.DisplayNames(["de"], { type: "region" });

console.log(english.of("US"));
// "United States"

console.log(french.of("US"));
// "États-Unis"

console.log(german.of("US"));
// "Vereinigte Staaten"

console.log(english.of("NL"));
// "Netherlands"

console.log(french.of("NL"));
// "Pays-Bas"

console.log(german.of("NL"));
// "Niederlande"

Le formateur gère automatiquement toutes ces conventions linguistiques. Vous n'avez pas besoin de connaître les règles grammaticales pour chaque langue.

Compatibilité des navigateurs

L'API Intl.DisplayNames avec type: "region" est disponible dans tous les navigateurs modernes. Elle est prise en charge depuis 2021 dans les principaux navigateurs, notamment Chrome, Firefox, Safari et Edge.

Les applications modernes peuvent utiliser cette API sans polyfills ni replis. Le navigateur maintient les données des noms de pays et les tient à jour à mesure que les pays et territoires changent.

Vous pouvez vérifier si l'API est disponible avant de l'utiliser.

if (typeof Intl.DisplayNames !== "undefined") {
  const names = new Intl.DisplayNames(["en"], { type: "region" });
  console.log(names.of("US"));
} else {
  console.log("Intl.DisplayNames is not supported");
}

Pour les applications prenant en charge les navigateurs plus anciens, fournissez un repli en utilisant une table de recherche statique des noms de pays.

function getCountryName(code, locale) {
  if (typeof Intl.DisplayNames !== "undefined") {
    const names = new Intl.DisplayNames([locale], { type: "region" });
    return names.of(code);
  }

  const fallbackNames = {
    US: "United States",
    GB: "United Kingdom",
    FR: "France",
    DE: "Germany",
    JP: "Japan"
  };

  return fallbackNames[code] || code;
}

console.log(getCountryName("US", "en"));
// "United States"

Cela garantit que votre application fonctionne dans tous les navigateurs, bien que les navigateurs plus anciens perdent la fonctionnalité de localisation automatique.