Comment afficher les noms de langues comme English, Español, 日本語 ?

Introduction

Lorsque vous créez un sélecteur de langue ou affichez une liste de langues disponibles, vous devez présenter chaque nom de langue d'une manière que les utilisateurs peuvent reconnaître. Un francophone cherche "Français", un hispanophone cherche "Español", et un japonophone cherche "日本語". Les utilisateurs identifient leur langue par son écriture et son orthographe natives.

Coder en dur ces traductions n'est pas évolutif. Vous devriez maintenir des traductions de chaque nom de langue dans toutes les autres langues. L'API Intl.DisplayNames résout ce problème en fournissant des noms standardisés et adaptés à la locale pour les langues, pays, écritures et devises.

Le problème du codage en dur des noms de langues

Vous pouvez créer un sélecteur de langue en codant en dur les noms de langues dans un objet.

const languageNames = {
  en: "English",
  es: "Spanish",
  fr: "French",
  de: "German",
  ja: "Japanese"
};

console.log(languageNames.en);
// "English"

Cette approche présente trois problèmes. Premièrement, ces noms ne fonctionnent que pour les anglophones. Deuxièmement, les utilisateurs ne peuvent pas reconnaître leur langue lorsqu'elle apparaît en anglais. Un utilisateur japonais qui cherche sa langue recherche des caractères japonais, pas le mot "Japanese". Troisièmement, vous devez maintenir manuellement des traductions pour chaque langue dans toutes les autres langues.

const languageNames = {
  en: {
    en: "English",
    es: "Spanish",
    fr: "French",
    de: "German",
    ja: "Japanese"
  },
  es: {
    en: "Inglés",
    es: "Español",
    fr: "Francés",
    de: "Alemán",
    ja: "Japonés"
  }
  // ... plus de langues
};

Cela devient rapidement ingérable. Vous avez besoin d'une meilleure solution.

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

Le constructeur Intl.DisplayNames crée un formateur qui convertit les codes de langue en noms lisibles par l'humain. Vous spécifiez une locale et le type de noms que vous souhaitez afficher.

const names = new Intl.DisplayNames(["en"], { type: "language" });
console.log(names.of("en"));
// "English"

Le premier argument est un tableau d'identifiants de locale. Le second argument est un objet d'options où type: "language" indique au formateur que vous voulez des noms de langues. La méthode of() prend un code de langue et renvoie son nom.

Vous pouvez obtenir des noms dans n'importe quelle langue en changeant la locale.

const enNames = new Intl.DisplayNames(["en"], { type: "language" });
const esNames = new Intl.DisplayNames(["es"], { type: "language" });
const frNames = new Intl.DisplayNames(["fr"], { type: "language" });

console.log(enNames.of("es"));
// "Spanish"

console.log(esNames.of("es"));
// "español"

console.log(frNames.of("es"));
// "espagnol"

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

Affichage des noms de langues dans leur forme native

La meilleure pratique pour les sélecteurs de langue est d'afficher chaque langue dans son propre script. Les utilisateurs reconnaissent leur langue plus rapidement lorsqu'ils la voient écrite avec des caractères familiers.

const names = new Intl.DisplayNames(["ja"], { type: "language" });
console.log(names.of("ja"));
// "日本語"

Pour obtenir le nom natif de chaque langue, créez un formateur en utilisant la langue cible comme locale d'affichage.

function getNativeName(languageCode) {
  const names = new Intl.DisplayNames([languageCode], { type: "language" });
  return names.of(languageCode);
}

console.log(getNativeName("en"));
// "English"

console.log(getNativeName("es"));
// "español"

console.log(getNativeName("fr"));
// "français"

console.log(getNativeName("de"));
// "Deutsch"

console.log(getNativeName("ja"));
// "日本語"

console.log(getNativeName("ar"));
// "العربية"

console.log(getNativeName("zh"));
// "中文"

Ce modèle fonctionne pour n'importe quel code de langue. Le formateur renvoie le nom dans le script et la forme que les locuteurs natifs utilisent.

Comprendre les formats de codes de langue

La méthode of() accepte les codes de langue dans plusieurs formats. Vous pouvez utiliser des codes de langue de base comme "en" ou des identifiants de locale complets comme "en-US".

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

console.log(names.of("en"));
// "English"

console.log(names.of("en-US"));
// "American English"

console.log(names.of("en-GB"));
// "British English"

console.log(names.of("zh"));
// "Chinese"

console.log(names.of("zh-Hans"));
// "Simplified Chinese"

console.log(names.of("zh-Hant"));
// "Traditional Chinese"

Le formateur reconnaît à la fois les codes courts et les identifiants étendus avec des sous-balises de région ou de script. Cela vous permet de distinguer les variantes linguistiques.

Contrôler l'apparence des noms de langues

L'option languageDisplay contrôle le niveau de détail dans les noms renvoyés. Elle accepte deux valeurs.

La valeur "standard" renvoie des noms complets qui incluent des informations sur le dialecte. C'est la valeur par défaut.

const names = new Intl.DisplayNames(["en"], {
  type: "language",
  languageDisplay: "standard"
});

console.log(names.of("en-US"));
// "American English"

console.log(names.of("en-GB"));
// "British English"

console.log(names.of("pt-BR"));
// "Brazilian Portuguese"

console.log(names.of("pt-PT"));
// "European Portuguese"

La valeur "dialect" renvoie également des noms complets avec des informations sur le dialecte. Dans la plupart des cas, elle produit le même résultat que "standard".

const names = new Intl.DisplayNames(["en"], {
  type: "language",
  languageDisplay: "dialect"
});

console.log(names.of("en-US"));
// "American English"

console.log(names.of("pt-BR"));
// "Brazilian Portuguese"

Pour les sélecteurs de langue, le format standard aide les utilisateurs à choisir la variante correcte lorsque plusieurs dialectes sont disponibles.

Obtenir les noms de langues localisés pour l'interface utilisateur

Lorsque vous créez une page de paramètres ou un sélecteur de langue, vous devez afficher les noms des langues dans la langue actuelle de l'interface utilisateur. Créez un formateur en utilisant la locale de l'utilisateur.

function getLocalizedLanguageName(languageCode, userLocale) {
  const names = new Intl.DisplayNames([userLocale], { type: "language" });
  return names.of(languageCode);
}

// Interface utilisateur en anglais
console.log(getLocalizedLanguageName("ja", "en"));
// "Japanese"

// Interface utilisateur en français
console.log(getLocalizedLanguageName("ja", "fr"));
// "japonais"

// Interface utilisateur en espagnol
console.log(getLocalizedLanguageName("ja", "es"));
// "japonés"

Cette approche affiche des noms descriptifs dans la langue que l'utilisateur comprend. Combinez cela avec les noms natifs pour créer des étiquettes hybrides comme "日本語 (japonais)" qui fonctionnent à la fois pour les locuteurs natifs et les autres.

Création d'un sélecteur de langue avec des noms natifs

Un cas d'utilisation courant est la création d'un menu déroulant ou d'une liste où les utilisateurs sélectionnent leur langue préférée. Affichez chaque langue dans sa forme native afin que les utilisateurs puissent trouver rapidement leur option.

const supportedLanguages = ["en", "es", "fr", "de", "ja", "ar", "zh"];

function createLanguageOptions() {
  return supportedLanguages.map((code) => {
    const names = new Intl.DisplayNames([code], { type: "language" });
    const nativeName = names.of(code);
    return { code, name: nativeName };
  });
}

const options = createLanguageOptions();
console.log(options);

Cela produit un tableau d'options de langues avec des noms natifs.

[
  { code: "en", name: "English" },
  { code: "es", name: "español" },
  { code: "fr", name: "français" },
  { code: "de", name: "Deutsch" },
  { code: "ja", name: "日本語" },
  { code: "ar", name: "العربية" },
  { code: "zh", name: "中文" }
]

Vous pouvez afficher ces options en HTML pour créer un sélecteur de langue.

function renderLanguageSelector() {
  const options = createLanguageOptions();
  const select = document.createElement("select");
  select.id = "language-selector";

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

  return select;
}

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

Cela crée un menu déroulant où chaque langue apparaît dans son script natif, permettant aux utilisateurs d'identifier facilement leur langue.

Création d'étiquettes de langue hybrides

Certaines interfaces affichent à la fois le nom natif et une traduction dans la langue de l'utilisateur. Cela aide les utilisateurs qui pourraient ne pas reconnaître tous les scripts et rend également l'interface plus accessible.

function createHybridLabel(languageCode, userLocale) {
  const nativeNames = new Intl.DisplayNames([languageCode], {
    type: "language"
  });
  const localizedNames = new Intl.DisplayNames([userLocale], {
    type: "language"
  });

  const nativeName = nativeNames.of(languageCode);
  const localizedName = localizedNames.of(languageCode);

  if (nativeName === localizedName) {
    return nativeName;
  }

  return `${nativeName} (${localizedName})`;
}

// L'interface utilisateur est en anglais
console.log(createHybridLabel("ja", "en"));
// "日本語 (Japanese)"

console.log(createHybridLabel("ar", "en"));
// "العربية (Arabic)"

console.log(createHybridLabel("en", "en"));
// "English"

// L'interface utilisateur est en espagnol
console.log(createHybridLabel("ja", "es"));
// "日本語 (japonés)"

Ce modèle combine les avantages de reconnaissance des noms natifs avec la clarté des traductions localisées.

Gestion des locales de repli

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

const names = new Intl.DisplayNames(["xx-XX", "en"], { type: "language" });
console.log(names.of("fr"));
// "French"

Le formateur 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 avec la méthode resolvedOptions().

const names = new Intl.DisplayNames(["xx-XX", "en"], { type: "language" });
console.log(names.resolvedOptions().locale);
// "en"

Cela montre que le formateur s'est résolu à l'anglais après le repli.

Comment différentes locales formatent les noms de langues

Chaque locale a ses propres conventions pour les noms de langues. Le formateur les applique automatiquement.

const supportedLanguages = ["en", "es", "fr", "de", "ja"];

function showLanguageNamesInLocale(locale) {
  const names = new Intl.DisplayNames([locale], { type: "language" });
  return supportedLanguages.map((code) => ({
    code,
    name: names.of(code)
  }));
}

console.log(showLanguageNamesInLocale("en"));
// [
//   { code: "en", name: "English" },
//   { code: "es", name: "Spanish" },
//   { code: "fr", name: "French" },
//   { code: "de", name: "German" },
//   { code: "ja", name: "Japanese" }
// ]

console.log(showLanguageNamesInLocale("es"));
// [
//   { code: "en", name: "inglés" },
//   { code: "es", name: "español" },
//   { code: "fr", name: "francés" },
//   { code: "de", name: "alemán" },
//   { code: "ja", name: "japonés" }
// ]

console.log(showLanguageNamesInLocale("ja"));
// [
//   { code: "en", name: "英語" },
//   { code: "es", name: "スペイン語" },
//   { code: "fr", name: "フランス語" },
//   { code: "de", name: "ドイツ語" },
//   { code: "ja", name: "日本語" }
// ]

Le formateur gère automatiquement la capitalisation, le script et les conventions linguistiques pour chaque langue.

Compatibilité des navigateurs

L'API Intl.DisplayNames est disponible dans tous les navigateurs modernes. Elle est prise en charge depuis mars 2021 sur les principaux navigateurs, notamment Chrome, Firefox, Safari et Edge.

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: "language" });
  console.log(names.of("fr"));
} else {
  console.log("Intl.DisplayNames n'est pas pris en charge");
}

Pour les navigateurs plus anciens, vous devez fournir une solution de repli ou utiliser un polyfill. Une solution de repli simple utilise un mappage codé en dur des codes de langue aux noms.

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

  // Solution de repli pour les navigateurs plus anciens
  const fallbackNames = {
    en: "English",
    es: "español",
    fr: "français",
    de: "Deutsch",
    ja: "日本語"
  };

  return fallbackNames[code] || code;
}

console.log(getLanguageName("es", "en"));
// "español" (ou "Spanish" si vous ajustez la solution de repli pour la localisation)

Cela garantit que votre code fonctionne même dans les navigateurs sans prise en charge de Intl.DisplayNames, bien que vous perdiez les fonctionnalités de localisation automatique.