Navigator.language: примеры (JAVASCRIPT)

Простые примеры использования

Получение языка браузера:

const language = navigator.language;
console.log(language);

'ru-RU'

Проверка, является ли язык русским:

if (navigator.language.startsWith('ru')) {
    console.log('Русский язык определен.');
}

'Русский язык определен.'

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

const baseLang = navigator.language.split('-')[0];
console.log(baseLang);

'ru'

Похожие возможности в JavaScript

navigator.languages – свойство, возвращающее массив строк, представляющих языки пользователя в порядке предпочтения. Оно может дать больше информации, чем одно значение. Пример: ['ru-RU', 'ru', 'en-US', 'en'].

Intl API предоставляет более мощные средства для интернационализации, например, Intl.DateTimeFormat().resolvedOptions().locale или Intl.NumberFormat().resolvedOptions().locale. Эти методы могут учитывать более тонкие настройки.

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

Типичные ошибки

Предположение, что значение всегда содержит регион. Это не всегда так, иногда возвращается только код языка.

const lang = navigator.language; // 'en'
const region = lang.split('-')[1]; // undefined
console.log(region.toUpperCase()); // Ошибка!

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

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

navigator.language = 'fr-FR';
console.log(navigator.language); // Осталось прежним

'ru-RU'

Использование navigator.language в Node.js, где объект navigator не существует.

// В среде Node.js
console.log(navigator.language);

ReferenceError: navigator is not defined

История изменений

Свойство navigator.language появилось в ранних спецификациях и оставалось относительно стабильным. Основное развитие связано с уточнением формата возвращаемой строки в соответствии со стандартом BCP 47.

Более значимым дополнением стало свойство navigator.languages, которое было стандартизировано позже и предоставляет список языков в порядке предпочтения. Это свойство поддерживается современными браузерами.

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

Расширенные примеры

Создание объекта Intl.DateTimeFormat на основе языка пользователя:

const userLocale = navigator.language;
const dateFormatter = new Intl.DateTimeFormat(userLocale, { 
    weekday: 'long', 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
});
console.log(dateFormatter.format(new Date()));

'понедельник, 12 февраля 2024 г.'

Определение направления текста для языка:

const rtlLangs = ['ar', 'he', 'fa', 'ur'];
const langCode = navigator.language.split('-')[0];
const isRTL = rtlLangs.includes(langCode);
document.body.dir = isRTL ? 'rtl' : 'ltr';

// Направление текста на странице установлено в 'ltr'

Загрузка соответствующих языковых ресурсов:

async function loadTranslations() {
    const lang = navigator.language.split('-')[0];
    try {
        const response = await fetch(`/locales/${lang}.json`);
        return await response.json();
    } catch {
        // Fallback на английский
        const enResponse = await fetch('/locales/en.json');
        return await enResponse.json();
    }
}

Сравнение с языками, поддерживаемыми приложением:

const supportedLangs = ['ru', 'en', 'de'];
const userLang = navigator.language.split('-')[0];
const appLang = supportedLangs.includes(userLang) ? userLang : 'en';
console.log(`Выбран язык: ${appLang}`);

'Выбран язык: ru'

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

const number = 1234567.89;
const formatter = new Intl.NumberFormat(navigator.language);
console.log(formatter.format(number));

'1 234 567,89' // Для ru-RU

Аналоги в других языках программирования

PHP: информация о языке обычно извлекается из заголовка HTTP Accept-Language.

$langs = explode(',', $_SERVER['HTTP_ACCEPT_LANGUAGE']);
echo $langs[0];

ru-RU,ru;q=0.9,en;q=0.8

Python (Flask): использует заголовок запроса.

from flask import request
language = request.accept_languages.best_match(['ru', 'en'])
print(language)

ru

C# (ASP.NET): язык можно получить из свойства Request.UserLanguages.

string[] userLanguages = HttpContext.Current.Request.UserLanguages;
string primaryLanguage = userLanguages[0];

Основное отличие от JavaScript заключается в том, что серверные языки полагаются на HTTP-заголовки, которые могут не совпадать с настройками браузера, если используются прокси или изменены заголовки.