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 recherche "Français", un hispanophone recherche "Español", et un japonophone recherche "日本語". Les utilisateurs identifient leur langue par son écriture et son orthographe natives.

Coder en dur ces traductions n'est pas évolutif. Vous devriez maintenir les 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 aux paramètres régionaux pour les langues, les pays, les écritures et les 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 recherche sa langue cherche des caractères japonais, pas le mot "Japanese". Troisièmement, vous devez maintenir manuellement les traductions de 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"
  }
  // ... more languages
};

Cela devient rapidement impossible à maintenir. Vous avez besoin d'une meilleure solution.

Utiliser 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'homme. 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 deuxième argument est un objet d'options où type: "language" indique au formateur que vous souhaitez des noms de langues. La méthode of() prend un code de langue et retourne son nom.

Vous pouvez obtenir les noms dans n'importe quelle langue en modifiant 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é du maintien des traductions des noms de langues.

Afficher les noms de langues dans leur forme native

La meilleure pratique pour les sélecteurs de langue consiste à 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 de langue.

Contrôler l'apparence des noms de langues

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

La valeur "standard" renvoie des noms complets qui incluent les informations de 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 les informations de 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 de langues dans la langue d'interface actuelle de l'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);
}

// User interface is in English
console.log(getLocalizedLanguageName("ja", "en"));
// "Japanese"

// User interface is in French
console.log(getLocalizedLanguageName("ja", "fr"));
// "japonais"

// User interface is in Spanish
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 libellés hybrides comme « 日本語 (japonais) » qui fonctionnent à la fois pour les locuteurs natifs et les autres.

Créer un sélecteur de langue avec des noms natifs

Un cas d'usage courant consiste à créer un menu déroulant ou 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 leur option rapidement.

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 écriture native, ce qui permet aux utilisateurs d'identifier facilement leur langue.

Créer des libellés 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 peuvent ne pas reconnaître toutes les écritures 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})`;
}

// User interface is in English
console.log(createHybridLabel("ja", "en"));
// "日本語 (Japanese)"

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

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

// User interface is in Spanish
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.

Gérer les locales de secours

Le constructeur Intl.DisplayNames accepte un tableau de locales. Si la première locale n'est pas disponible, le formateur bascule vers 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 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 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 a résolu vers l'anglais après le repli.

Comment les 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, l'écriture 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 dans 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 is not supported");
}

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 vers les noms.

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

  // Fallback for older browsers
  const fallbackNames = {
    en: "English",
    es: "español",
    fr: "français",
    de: "Deutsch",
    ja: "日本語"
  };

  return fallbackNames[code] || code;
}

console.log(getLanguageName("es", "en"));
// "español" (or "Spanish" if you adjust the fallback for localization)

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.