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

Introduction

Lorsqu'une personne visite votre application web, son navigateur connaît déjà les langues qu'elle préfère. Cette information provient des paramètres de son système d'exploitation et de son navigateur. En lisant ces préférences linguistiques, vous pouvez afficher le contenu dans la bonne langue sans demander à l'utilisateur d'en sélectionner une 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 connaître la langue souhaitée par l'utilisateur.

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, une personne peut définir ses préférences avec l'espagnol comme premier choix et 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 décider quelle langue afficher.

Lecture des 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);
// Résultat: ["es-MX", "es", "en-US", "en"]

Les langues sont classées par ordre de préférence, la langue la plus préférée étant la première. 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 linguistique conforme à 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 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 dans le tableau représente une langue que l'utilisateur peut lire, par ordre de préférence.

Obtenir la langue préférée principale

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

const topLanguage = navigator.language;
console.log(topLanguage);
// Résultat: "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 différents niveaux de maîtrise. 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, repliez-vous sur l'anglais. Si votre application ne prenait en charge qu'une seule préférence linguistique, vous n'auriez pas d'option de repli.

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

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

// Trouver la première langue que l'application prend en charge
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

console.log(selectedLanguage);
// Résultat: "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);
// Le résultat varie selon la langue
// Pour "en-US": "3/15/2025"
// Pour "en-GB": "15/03/2025"
// Pour "ja-JP": "2025/3/15"

Le tableau d'identifiants de langue 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 est déclenché 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 les préférences linguistiques de leur navigateur pendant la navigation. Cependant, l'écoute de cet événement offre une meilleure expérience lorsque cela se produit.