Cómo detectar el idioma preferido del usuario desde el navegador

Introducción

Cuando alguien visita tu aplicación web, su navegador ya sabe qué idiomas prefiere. Esta información proviene de la configuración de su sistema operativo y navegador. Al leer estas preferencias de idioma, puedes mostrar contenido en el idioma correcto sin pedirle al usuario que seleccione uno manualmente.

Esta es la base de la internacionalización del lado del cliente. Antes de poder formatear fechas, números o mostrar texto traducido, necesitas saber qué idioma quiere el usuario.

Cómo los navegadores almacenan las preferencias de idioma

Cada navegador moderno mantiene una lista de idiomas preferidos. Los usuarios configuran estas preferencias en la configuración de su navegador o sistema operativo. Por ejemplo, alguien podría establecer sus preferencias en español como primera opción, con inglés como alternativa.

El navegador usa estas preferencias para solicitar páginas web en el idioma apropiado. Cuando tu código JavaScript se ejecuta, puede leer las mismas preferencias para tomar decisiones sobre qué idioma mostrar.

Leer las preferencias de idioma con JavaScript

La propiedad navigator.languages devuelve un array de cadenas que representan los idiomas preferidos del usuario. Esta es la forma principal de detectar las preferencias de idioma en JavaScript.

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

Los idiomas están ordenados por preferencia, con el idioma más preferido primero. En este ejemplo, el usuario prefiere español mexicano, seguido de español general, luego inglés estadounidense y después inglés general.

Entender qué devuelve el navegador

Cada idioma se describe usando una etiqueta de idioma según BCP 47. Estas etiquetas pueden ser simples como en para inglés, o más específicas como en-US para inglés estadounidense o zh-CN para chino usado en China.

El formato exacto y el significado de estas etiquetas se cubrirán en la próxima lección. Por ahora, entiende que cada cadena en el array representa un idioma que el usuario puede leer, en orden de preferencia.

Obtener el idioma más preferido

La propiedad navigator.language es el primer elemento del array navigator.languages. Si solo necesitas la preferencia de idioma principal del usuario, puedes usar esta propiedad directamente.

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

Ambos enfoques son válidos. Usa navigator.language cuando solo necesites un idioma, y usa navigator.languages cuando quieras considerar múltiples opciones de respaldo.

Por qué el navegador proporciona múltiples idiomas

Los usuarios a menudo hablan múltiples idiomas con diferentes niveles de fluidez. El navegador les permite especificar varios idiomas en orden de preferencia. Esto le da a tu aplicación múltiples opciones para elegir.

Considera un usuario que habla francés e inglés. Si tu aplicación admite francés, muestra el contenido en francés. Si no, recurre al inglés. Si tu aplicación solo admitiera una preferencia de idioma, no tendrías opción de respaldo.

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"

Este código encuentra la primera coincidencia entre las preferencias del usuario y los idiomas que tu aplicación admite.

Usar preferencias de idioma para formatear contenido

Una vez que conozcas el idioma preferido del usuario, puedes usarlo con la API Intl para formatear fechas, números y otro contenido según las convenciones de ese idioma.

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"

El array de identificadores de idioma de navigator.languages se puede pasar directamente a los constructores de Intl para implementar la selección de respaldo basada en preferencias. La API Intl usará automáticamente el primer idioma que admita de la lista.

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

Este enfoque permite que la API Intl maneje la lógica de respaldo por ti.

Cuando cambian las preferencias de idioma

Cuando cambian los idiomas preferidos del usuario, se dispara un evento languagechange en el objeto Window. Puedes escuchar este evento para actualizar el idioma de tu aplicación en tiempo real.

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

Este evento es poco común en la práctica. La mayoría de los usuarios no cambian sus preferencias de idioma del navegador mientras navegan. Sin embargo, escucharlo proporciona una mejor experiencia cuando ocurre.