Как определить предпочитаемый язык пользователя из браузера

Введение

Когда кто-то заходит в ваше веб-приложение, его браузер уже знает, какие языки ему удобнее. Эта информация берётся из настроек операционной системы и самого браузера. Считав эти языковые предпочтения, вы сможете показывать контент на нужном языке без необходимости просить пользователя выбирать язык вручную.

Это основа клиентской интернационализации. Прежде чем форматировать даты, числа или показывать переведённый текст, нужно узнать, какой язык предпочитает пользователь.

Как браузеры хранят языковые предпочтения

В каждом современном браузере есть список предпочитаемых языков. Пользователь настраивает эти предпочтения в браузере или в операционной системе. Например, кто-то может выбрать испанский как основной язык, а английский — как запасной.

Браузер использует эти настройки, чтобы запрашивать веб-страницы на подходящем языке. Когда запускается ваш JavaScript-код, он может прочитать эти же предпочтения и решить, на каком языке показывать контент.

Как получить языковые предпочтения с помощью JavaScript

Свойство navigator.languages возвращает массив строк, которые представляют предпочитаемые пользователем языки. Это основной способ определить языковые предпочтения в JavaScript.

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

Языки идут в порядке предпочтения: самый желаемый — первым. В этом примере пользователь предпочитает мексиканский вариант испанского, затем общий испанский, потом американский английский и общий английский.

Как понять, что возвращает браузер

Каждый язык описывается языковым тегом по стандарту BCP 47. Теги могут быть простыми, например en для английского, или более конкретными, например en-US для американского английского или zh-CN для китайского, используемого в Китае.

Точный формат и значение этих тегов будут рассмотрены в следующем уроке. Сейчас важно понять, что каждая строка в массиве — это язык, на котором пользователь может читать, в порядке предпочтения.

Получение самого предпочтительного языка

Свойство navigator.language — это первый элемент массива navigator.languages. Если вам нужен только основной язык пользователя, используйте это свойство напрямую.

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

Оба подхода корректны. Используйте navigator.language, если нужен только один язык, и navigator.languages, если хотите учесть несколько вариантов для подстановки.

Почему браузер предоставляет несколько языков

Пользователи часто говорят на нескольких языках с разным уровнем владения. Браузер позволяет им указать несколько языков в порядке предпочтения. Это даёт вашему приложению несколько вариантов на выбор.

Представьте пользователя, который говорит на французском и английском. Если ваше приложение поддерживает французский, показывайте контент на французском. Если нет — переходите на английский. Если бы приложение поддерживало только один язык, не было бы запасного варианта.

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"

Этот код находит первое совпадение между предпочтениями пользователя и языками, которые поддерживает ваше приложение.

Использование языковых предпочтений для форматирования контента

Когда вы знаете предпочтительный язык пользователя, можно использовать его с Intl API для форматирования дат, чисел и другого контента по правилам этого языка.

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"

Массив языковых идентификаторов из navigator.languages можно напрямую передавать в конструкторы Intl для реализации подстановки на основе предпочтений. Intl API автоматически выберет первый поддерживаемый язык из списка.

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

Этот подход позволяет API Intl самостоятельно обрабатывать логику резервных языков.

Когда меняются языковые предпочтения

Когда пользователь меняет предпочитаемые языки, на объекте Window срабатывает событие languagechange. Можно отследить это событие, чтобы обновлять язык приложения в реальном времени.

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

На практике это событие встречается редко. Обычно пользователи не меняют языковые настройки браузера во время просмотра. Но если это происходит, отслеживание события улучшает пользовательский опыт.