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

Введение

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

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

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

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

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

Считывание языковых предпочтений с помощью JavaScript

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

const languages = navigator.languages;
console.log(languages);
// Вывод: ["es-MX", "es", "en-US", "en"]

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

Понимание того, что возвращает браузер

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

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

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

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

const topLanguage = navigator.language;
console.log(topLanguage);
// Вывод: "es-MX"

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

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

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

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

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

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

// Найти первый язык, который поддерживает приложение
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

console.log(selectedLanguage);
// Вывод: "en"

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

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

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

const userLanguage = navigator.language;

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

console.log(formattedDate);
// Вывод зависит от языка
// Для "en-US": "3/15/2025"
// Для "en-GB": "15/03/2025"
// Для "ja-JP": "2025/3/15"

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

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

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

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

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

window.addEventListener("languagechange", () => {
  const newLanguage = navigator.language;
  console.log("Язык изменён на:", newLanguage);
  // Обновите отображаемый язык вашего приложения здесь
});

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