Comment détecter la langue préférée de l'utilisateur depuis le navigateur

Introduction

Lorsque quelqu'un visite votre application web, son navigateur connaît déjà les langues qu'il préfère. Cette information provient de son système d'exploitation et des paramètres de son navigateur. En lisant ces préférences linguistiques, vous pouvez afficher le contenu dans la bonne langue sans demander à l'utilisateur de la sélectionner manuellement.

C'est le fondement de l'internationalisation côté client. Avant de pouvoir formater des dates, des nombres ou afficher du texte traduit, vous devez savoir quelle langue l'utilisateur souhaite.

Comment les navigateurs stockent les préférences linguistiques

Chaque navigateur moderne maintient une liste de langues préférées. Les utilisateurs configurent ces préférences dans les paramètres de leur navigateur ou de leur système d'exploitation. Par exemple, quelqu'un peut définir ses préférences sur l'espagnol comme premier choix, avec l'anglais comme solution de repli.

Le navigateur utilise ces préférences pour demander des pages web dans la langue appropriée. Lorsque votre code JavaScript s'exécute, il peut lire les mêmes préférences pour prendre des décisions sur la langue à afficher.

Lire les préférences linguistiques avec JavaScript

La propriété navigator.languages renvoie un tableau de chaînes représentant les langues préférées de l'utilisateur. C'est la méthode principale pour détecter les préférences linguistiques en JavaScript.

const languages = navigator.languages;
console.log(languages);
// Output: ["es-MX", "es", "en-US", "en"]

Les langues sont classées par ordre de préférence, avec la langue la plus préférée en premier. Dans cet exemple, l'utilisateur préfère l'espagnol mexicain, suivi de l'espagnol général, puis de l'anglais américain, puis de l'anglais général.

Comprendre ce que le navigateur renvoie

Chaque langue est décrite à l'aide d'une balise de langue selon la norme BCP 47. Ces balises peuvent être simples comme en pour l'anglais, ou plus spécifiques comme en-US pour l'anglais américain ou zh-CN pour le chinois tel qu'utilisé en Chine.

Le format exact et la signification de ces balises seront abordés dans la prochaine leçon. Pour l'instant, comprenez que chaque chaîne du tableau représente une langue que l'utilisateur peut lire, par ordre de préférence.

Obtenir la langue préférée unique

La propriété navigator.language est le premier élément du tableau navigator.languages. Si vous n'avez besoin que de la préférence linguistique principale de l'utilisateur, vous pouvez utiliser cette propriété directement.

const topLanguage = navigator.language;
console.log(topLanguage);
// Output: "es-MX"

Les deux approches sont valides. Utilisez navigator.language lorsque vous n'avez besoin que d'une seule langue, et utilisez navigator.languages lorsque vous souhaitez considérer plusieurs options de repli.

Pourquoi le navigateur fournit plusieurs langues

Les utilisateurs parlent souvent plusieurs langues avec des niveaux de maîtrise variables. Le navigateur leur permet de spécifier plusieurs langues par ordre de préférence. Cela donne à votre application plusieurs options parmi lesquelles choisir.

Prenons l'exemple d'un utilisateur qui parle français et anglais. Si votre application prend en charge le français, affichez le contenu en français. Sinon, basculez vers l'anglais. Si votre application ne prenait en charge qu'une seule préférence linguistique, vous n'auriez aucune option de repli.

const languages = navigator.languages;
// ["fr-CA", "fr", "en-US", "en"]

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

// Find the first language the app supports
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

console.log(selectedLanguage);
// Output: "en"

Ce code trouve la première correspondance entre les préférences de l'utilisateur et les langues prises en charge par votre application.

Utiliser les préférences linguistiques pour formater le contenu

Une fois que vous connaissez la langue préférée de l'utilisateur, vous pouvez l'utiliser avec l'API Intl pour formater les dates, les nombres et d'autres contenus selon les conventions de cette langue.

const userLanguage = navigator.language;

const date = new Date("2025-03-15");
const formattedDate = new Intl.DateTimeFormat(userLanguage).format(date);

console.log(formattedDate);
// Output varies by language
// For "en-US": "3/15/2025"
// For "en-GB": "15/03/2025"
// For "ja-JP": "2025/3/15"

Le tableau d'identifiants de langue provenant de navigator.languages peut être transmis directement aux constructeurs Intl pour implémenter une sélection de repli basée sur les préférences. L'API Intl utilisera automatiquement la première langue qu'elle prend en charge dans la liste.

const formattedDate = new Intl.DateTimeFormat(navigator.languages).format(date);

Cette approche permet à l'API Intl de gérer la logique de repli pour vous.

Lorsque les préférences linguistiques changent

Lorsque les langues préférées de l'utilisateur changent, un événement languagechange se déclenche sur l'objet Window. Vous pouvez écouter cet événement pour mettre à jour la langue de votre application en temps réel.

window.addEventListener("languagechange", () => {
  const newLanguage = navigator.language;
  console.log("Language changed to:", newLanguage);
  // Update your app's displayed language here
});

Cet événement est rare en pratique. La plupart des utilisateurs ne modifient pas leurs préférences linguistiques du navigateur pendant la navigation. Cependant, l'écouter offre une meilleure expérience lorsque cela se produit.