Определение локали пользователя в браузере: JavaScript, ActionScript

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

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

const userLocale = navigator.language;
console.log(userLocale); // Результат: 'en-US'

const preferredLocales = navigator.languages;
console.log(preferredLocales); // Результат: ['en-US', 'en', 'es']

Комплексное определение локали

Если браузер не поддерживает navigator.languages, можно использовать navigator.language или navigator.userLanguage для определения предпочтительного языка пользователя. В таком случае ваш код будет столь же надёжным, как и заранее разработанный план на чрезвычайную ситуацию.

const userLocale = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
console.log(userLocale); // 'en-US' или язык по умолчанию, заданный в браузере

Настройка со стороны сервера через HTTP-заголовки

Для обеспечения локализации контента используйте HTTP-заголовок Accept-Language на стороне сервера. Однако, если пользователи захотят изменить свои языковые предпочтения, следует предусмотреть и такую возможность:

• Параметры URL: Добавьте настройку языка прямо в параметры URL, подобно тайному коду в шпионском фильме.
• Куки: Сохраните языковые предпочтения в куках, чтобы при следующем визите пользователь вновь получил контент на выбранном языке.
• Выбор пользователя: Позвольте изменять язык настолько просто, насколько легко выбирать между эспрессо и американо.

Корректное форматирование с использованием региональных форматов

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

const numberFormat = new Intl.NumberFormat(userLocale);
console.log(numberFormat.format(123456.78)); // Результат: '123,456.78' для 'en-US'

const dateFormat = new Intl.DateTimeFormat(userLocale);
console.log(dateFormat.format(new Date())); // Результат: '12/31/2023' для 'en-US'

Проверка совместимости с браузерами и обратной совместимости

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

if ('Intl' in window) {
    const formatOptions = Intl.NumberFormat().resolvedOptions();
    console.log(formatOptions.locale); // Результат: локаль, используемая объектом Intl
}

Увеличение производительности с помощью предложения языков

Принимайте во внимание потребности аудитории и предоставляйте точные переводы, обеспечивая простое переключение между языками:

• Оптимизация языков: Представьте ограниченный выбор языков для снижения нагрузки.
• Точные переводы: Обеспечьте высококачественные переводы для улучшения взаимодействия.
• Удобство переключений: Предложите простой механизм для смены языков.

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

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

const userLocale = navigator.language || navigator.userLanguage;

Диалог мог бы выглядеть так:

🌐 Браузер: "Привет! Откуда ты?"
👤 Пользователь: "Из Франции."
🌐 Браузер: "Превосходно, значит, твоя локаль – `fr-FR`!"

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

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

1. Window: navigator property – Web APIs | MDN — официальная документация по определению окружения пользователя в JavaScript.
2. Navigator: language property – Web APIs | MDN — информация об доступе к предпочтительному языку пользователя.
3. ECMAScript® 2023 Internationalization API Specification — последние стандарты интернационализации в ECMAScript.
4. Language tags in HTML and XML — руководство W3C по правильному использованию языковых тегов.
5. GitHub – florrain/locale: Browser locale negotiation for node.js — пример согласования локалей в JavaScript.
6. Can I use... Support tables for HTML5, CSS3, etc — таблицы совместимости, иллюстрирующие поддержку функций Intl для интернационализации.