navigator.language в JavaScript — мова браузера

Загальний опис

Властивість Navigator.language відіграє ключову роль у визначенні мовних переваг користувача веб-додатків. Ця властивість відображає основну мову браузера користувача, яка зазвичай встановлюється відповідно до мови операційної системи або може бути налаштована користувачем у налаштуваннях браузера. Значення Navigator.language є рядком, що представляє мовний тег, відповідно до стандарту IETF BCP 47, наприклад, "en-US" для американської англійської або "fr-CA" для канадської французької.

Використання Navigator.language має вирішальне значення для створення багатомовних веб-додатків, що адаптують свій інтерфейс і контент з урахуванням мовних переваг користувача. Це сприяє підвищенню зручності користувачів, оскільки дозволяє автоматично вибирати мову інтерфейсу без потреби в ручному виборі. Такий підхід не тільки покращує користувацький досвід, але й сприяє ширшому розповсюдженню веб-додатків серед користувачів з різних мовних груп.

Базове отримання мови користувача

Самий простий спосіб використання Navigator.language - отримання мови користувача та відображення відповідного повідомлення:

console.log(`Ваша мова: ${navigator.language}`);

Цей рядок коду виведе мову браузера користувача, що може бути використано для ініціалізації мовних налаштувань веб-додатку.

Адаптація контенту під мову користувача

Далі ми маємо приклад, який демонструє, як можна адаптувати контент веб-сторінки в залежності від мови користувача:

const userLanguage = navigator.language || navigator.userLanguage; // Для забезпечення сумісності

if (userLanguage.startsWith("en")) {
    document.getElementById("greeting").textContent = "Hello!";
} else if (userLanguage.startsWith("es")) {
    document.getElementById("greeting").textContent = "¡Hola!";
} else {
    document.getElementById("greeting").textContent = "Welcome!";
}

В цьому прикладі ми використовуємо Navigator.language для визначення мови користувача та змінюємо текст привітання на веб-сторінці відповідно до виявленої мови.

Розширене використання з бібліотеками локалізації

В реальних проектах для локалізації контенту часто використовуються спеціалізовані бібліотеки, як-от i18next чи React Intl. В цьому контексті Navigator.language може слугувати вихідним пунктом для визначення стандартної мови, яку потім можна налаштувати або змінити в установках користувача:

i18next.init({
    lng: navigator.language,
    // інші опції ініціалізації...
});

Цей код ініціалізує бібліотеку локалізації з мовою за замовчуванням, визначеною через Navigator.language, автоматично адаптуючи інтерфейс до мовних переваг користувача.

У підсумку, Navigator.language є неоціненним інструментом для розробників, які прагнуть створити інклюзивний та доступний веб-досвід. Використання цієї властивості дозволяє автоматично налаштовувати мову веб-додатків, забезпечуючи користувачам зручність та покращуючи загальну якість взаємодії з веб-сайтом.

правити

Порада

При розробці міжнародних веб-додатків переконайтеся, що ваш додаток коректно обробляє мовні коди, отримані через Navigator.language. Різні браузери можуть повертати мовні коди у різних форматах (наприклад, "en", "en-US"), тому важливо розробити логіку, що адекватно інтерпретує ці коди для надання локалізованого контенту.

автор: Bond правити

Порада

Для веб-сайтів, що підтримують кілька мовних версій, рекомендується використовувати Navigator.language в поєднанні з іншими методами визначення мовних переваг, такими як мовні налаштування в профілі користувача або вибір мови, збережений у cookies. Це забезпечить максимально точне визначення мовних переваг користувача.

автор: Bond правити

Порада

Пам'ятайте, що деякі користувачі можуть використовувати браузери, налаштовані на мову, яка відрізняється від їхньої рідної мови. Тому, надаючи можливість користувачам вручну змінювати мову інтерфейсу вашого веб-сайту або додатку, ви додатково підвищуєте доступність та користувацький досвід, забезпечуючи, що всі користувачі мають змогу легко переглядати контент на бажаній мові.

автор: Bond правити

Нотатка

Використовуйте властивість Navigator.language для ідентифікації мовних налаштувань користувача, щоб автоматично налаштувати мову веб-сайту або веб-додатку відповідно до переваг користувача. Це значно покращує користувацький досвід, оскільки користувачі отримують контент на знайомій мові без необхідності вручну змінювати мовні налаштування.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Navigator.language

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	21.2.0	1.27

Приклади

+ запропонувати свій приклад у пісочниці

<div id="greeting">Демонстраційний елемент</div>

// Об'єкт із перекладами
var translations = {
  en: {
    greeting: "Hello, user!"
  },
  ua: {
    greeting: "Привіт, користувачу!"
  },
  // Додайте більше мов за потреби
};

// Функція для зміни контенту відповідно до мови користувача
function changeLanguage() {
  var userLang = navigator.language || navigator.userLanguage; 
  var langCode = userLang.split('-')[0]; // Відокремлюємо код мови
  document.getElementById('greeting').textContent = translations[langCode].greeting || "Language not supported";
}

// HTML: <div id="greeting"></div>
// Після завантаження сторінки викликаємо функцію
document.addEventListener('DOMContentLoaded', changeLanguage);

<header>
  <h2 class="title">Navigator: language</h2>
  <p class="description">Демонстрація зміни мови вітання в залежності від вибору користувача.</p>
</header>
<main>
  <div class="result">
    <select id="languageSelect">
      <option value="en">English</option>
      <option value="ua">Українська</option>
      <option value="fr">Français</option>
    </select>
    <p id="greeting"></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

select {
  padding: 5px;
  margin-bottom: 10px;
  cursor: pointer;
}

document.getElementById('languageSelect').addEventListener('change', function () {
  var lang = this.value;
  var greetingText = {
    en: "Hello!",
    ua: "Привіт!",
    fr: "Bonjour!" };

  document.getElementById('greeting').textContent = greetingText[lang] || "Language not supported";
});

// Встановлення вітання за замовчуванням відповідно до мови браузера користувача
window.onload = function () {
  var userLang = navigator.language || navigator.userLanguage;
  var langCode = userLang.split('-')[0]; // Відокремлення коду мови
  document.getElementById('languageSelect').value = langCode;
  document.getElementById('greeting').textContent = {
    en: "Hello!",
    ua: "Привіт!",
    fr: "Bonjour!" }[
  langCode] || "Language not supported";
};
//# sourceURL=pen.js

console.log("Мова браузера користувача: " + navigator.language);