JS властивість Navigator.language
Загальний опис
Властивість 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Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
4 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
1.27 |
Приклади
У цьому прикладі, при завантаженні сторінки, мова вітання автоматично встановлюється відповідно до мови браузера користувача. Користувач може вибрати мову зі спадного списку, і вітання зміниться відповідно до вибору.
У цьому коді використовується властивість navigator.language для отримання мовного коду, встановленого в браузері користувача. Результатом виконання коду буде виведення мови користувача у консоль, що може бути використано для подальшої логіки визначення мови інтерфейсу.
console.log("Мова браузера користувача: " + navigator.language);
У цьому прикладі використовується об'єкт translations для зберігання фраз на різних мовах. Функція changeLanguage визначає мову користувача за допомогою navigator.language, обирає відповідний переклад із об'єкта перекладів, і динамічно змінює текст елементу з ідентифікатором greeting на сторінці.
// Об'єкт із перекладами
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);