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

Introducción

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

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

Cómo almacenan los navegadores las preferencias de idioma

Todos los navegadores modernos mantienen una lista de idiomas preferidos. Los usuarios configuran estas preferencias en su navegador o en la configuración del sistema operativo. Por ejemplo, alguien podría establecer sus preferencias con el español como primera opción y el inglés como alternativa.

El navegador utiliza 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.

Lectura de 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 preferencias de idioma en JavaScript.

const languages = navigator.languages;
console.log(languages);
// Salida: ["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 finalmente inglés general.

Entendiendo lo que devuelve el navegador

Cada idioma se describe utilizando 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 utilizado 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 preferido principal

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 idiomaPreferido = navigator.language;
console.log(idiomaPreferido);
// Resultado: "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 alternativas.

Por qué el navegador proporciona múltiples idiomas

Los usuarios a menudo hablan varios 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 una opción alternativa.

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

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

// Encuentra el primer idioma que la aplicación admite
const idiomaSeleccionado = idiomas.find(lang => 
  idiomasAdmitidos.includes(lang)
);

console.log(idiomaSeleccionado);
// Resultado: "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 conoces 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 idiomaUsuario = navigator.language;

const fecha = new Date("2025-03-15");
const fechaFormateada = new Intl.DateTimeFormat(idiomaUsuario).format(fecha);

console.log(fechaFormateada);
// El resultado varía según el idioma
// Para "en-US": "3/15/2025"
// Para "en-GB": "15/03/2025"
// Para "ja-JP": "2025/3/15"

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

const fechaFormateada = new Intl.DateTimeFormat(navigator.languages).format(fecha);

Este enfoque permite que la API Intl maneje la lógica de alternativas 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);
  // Actualiza aquí el idioma mostrado en tu aplicación
});

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.