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

Быстрый ответ

Для определения языка, выбранного в браузере пользователя, воспользуйтесь свойствами navigator.language или navigator.languages[0], если необходимо получить список предпочтительных языков. Для обеспечения совместимости с Internet Explorer используйте navigator.userLanguage:

var preferredLanguage = navigator.languages ? navigator.languages[0] : navigator.language || navigator.userLanguage;
console.log(preferredLanguage);

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

Основы определения языка браузера

Определение языка, использующееся в браузере, осуществляется с помощью объекта navigator и его свойств. Свойство navigator.language обычно соответствует языку интерфейса браузера в Firefox.

В браузерах Chrome и Firefox начиная с 32-й версии возможно использовать массив navigator.languages, отображающий предпочтительные языки пользователя. Этот массив соответствует HTTP-заголовку Accept-Language.

В браузере Internet Explorer для определения языка следует использовать window.navigator.browserLanguage или window.navigator.userLanguage, так как в этом браузере применяются собственные методы определения языка.

При обработке различных языковых версий не забывайте учесть региональные особенности. Для этого можно анализировать языковые теги BCP 47.

Расширенные случаи использования определения языка

Приоритизация языков и обработка исключений

Важно корректно организовать проверку языковых свойств и обеспечить для них альтернативные варианты:

function getFirstBrowserLanguage() {
  var nav = window.navigator,
      browserLanguagePropertyKeys = ['languages', 'language', 'browserLanguage', 'userLanguage'],
      i,
      language;

  if (Array.isArray(nav.languages)) {
    for (i = 0; i < nav.languages.length; i++) {
      language = nav.languages[i];
      if (language && language.length) {
        return language;
      }
    }
  }

  for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
    language = nav[browserLanguagePropertyKeys[i]];
    if (language && language.length) {
      return language;
    }
  }

  return null;
}

console.log(getFirstBrowserLanguage());

Подробнее об этом расскажет наш спикер на видео

Работа с региональными языковыми особенностями

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

function getLanguageVariants(languages) {
  return languages.map(lang => lang.split('-')[0]);
}

console.log(getLanguageVariants(navigator.languages));

Учёт предпочтений пользователя

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

Лучшие практики в определении языка

Надежная обработка ошибок

Будьте готовы к неожиданным ситуациям и всегда используйте обработку ошибок:

try {
  // Разбор языковых тегов
} catch {
  // Обработка исключений
  // Graceful Degradation – вот ваш надёжный путь!
}

Использование сторонних решений

Если прямой доступ к заголовку Accept-Language невозможен, можно использовать сторонние JavaScript-библиотеки или JSONP. На GitHub можно найти подходящие готовые скрипты.

Отслеживание обновлений API

Регулярно следите за обновлениями API браузеров, чтобы всегда предоставлять пользователю актуальную информацию.

Визуализация

Представьте настройку языка браузера как языковой стикер на паспорте пассажира. Пилот, который в этой аналогии символизирует JavaScript, проверяет его перед тем как пустить пассажира на борт:

1. Пассажир направляется к входу в самолет: 🚶‍♂️➡️✈️
2. Пилот проверяет паспорт: 👩‍✈️👀🛂
3. Обнаруживает языковой стикер: 🏷️💬➡️ 'en-US'

В JavaScript это выглядит следующим образом:

console.log(`Добро пожаловать на борт! Сегодня мы будем обслуживать вас на языке ${(navigator.language || navigator.userLanguage)}.`);

Результат:

✈️📢 "Добро пожаловать на борт! Сегодня мы будем обслуживать вас на языке en-US."

Полезные материалы

1. Navigator: свойство language – Веб-API | MDN
2. Navigator: свойство languages – Веб-API | MDN
3. Языковые теги в HTML и XML
4. Определение предпочтительного языка браузера – Stack Overflow
5. Сведения о BCP 47 » Редактор RFC
6. Accept-Language – HTTP | MDN
7. Can I use... Таблицы поддержки для HTML5, CSS3 и т.д.