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 les 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 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 pays en noms de pays localisés dans n'importe quelle langue sans maintenir de tables de traduction ni dépendre de bibliothèques externes.

Comprendre les codes 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 tous les systèmes.

// Common country codes
// US = United States
// GB = Great Britain (United Kingdom)
// FR = France
// DE = Germany (Deutschland)
// JP = Japan
// CN = China
// BR = Brazil
// IN = India

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, espagnol, japonais ou toute autre langue. Le code fournit un identifiant stable tandis que le nom d'affichage change en fonction de la langue de l'utilisateur.

Utiliser Intl.DisplayNames pour obtenir les noms de pays

Le constructeur Intl.DisplayNames crée un formateur qui convertit les codes 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 souhaitez des noms de pays ou de régions. La méthode of() prend un code pays et retourne son nom localisé.

Le terme « région » couvre les pays, territoires et 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.

Afficher les noms de pays dans différentes langues

Le même code pays produit des noms différents 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 toutes les 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 pays et de locale. Le navigateur fournit les traductions automatiquement.

Créer un sélecteur de pays

Un cas d'usage courant consiste à créer 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 (approximate count as of 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 de code, et non par nom de 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 entre les langues car les noms de pays se classent différemment selon les alphabets et les règles de collation.

Créer 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.

Gérer les codes de pays invalides

Toutes les chaînes de deux lettres ne sont pas des codes de pays valides. La méthode of() gère les codes invalides en fonction de 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 saisi lorsqu'aucun pays n'existe. L'option fallback: "none" renvoie undefined pour les codes invalides.

Utilisez fallback: "none" lorsque vous devez détecter les 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 saisies utilisateur ou les données provenant de sources externes.

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

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

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 le style par défaut et produit les 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 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égions pour les territoires

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

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 de manière uniforme tandis que le navigateur fournit les 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 les 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 un coût minimal, 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 locales de secours

Le constructeur Intl.DisplayNames accepte un tableau de locales. Si la première locale n'est pas prise en charge, le navigateur bascule vers la locale suivante du 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 bascule vers "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 a convergé après le traitement de repli.

Comparer les noms de pays entre les langues

Les différentes langues formatent les noms de pays différemment. Certaines langues mettent les noms de pays en majuscules, 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 de 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 solutions de repli. Le navigateur maintient les données des noms de pays et les garde à jour au fur et à mesure que les pays et territoires évoluent.

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 une solution de repli utilisant une table de correspondance 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.