YouTip

## JavaScript Navigator.language Property The `navigator.language` property returns a string representing the preferred language of the user, usually the language of the browser's user interface. This property is **read-only**. --- ## Syntax ```javascript navigator.language ``` ### Return Value | Type | Description | | :--- | :--- | | `String` | A string representing the language version of the browser. Examples include `"en"`, `"en-US"`, `"zh-CN"`, `"de"`, `"fr"`, etc. | --- ## Browser Support The `navigator.language` property is fully supported by all major modern web browsers: | Chrome | Internet Explorer | Edge | Firefox | Safari | Opera | | :---: | :---: | :---: | :---: | :---: | :---: | | Yes | Yes (IE 11+) | Yes | Yes | Yes | Yes | --- ## Code Examples ### Example 1: Getting the Browser's Preferred Language The following example demonstrates how to retrieve and display the preferred language of the user's browser. ```javascript // Get the preferred language of the browser const userLanguage = navigator.language; console.log("Preferred Language: " + userLanguage); // Output might be: "en-US", "zh-CN", "fr", etc. ``` ### Example 2: Displaying Multiple Navigator Properties This example retrieves and displays various properties of the `navigator` object, including the browser language, to provide a comprehensive overview of the client environment. ```javascript let info = "

Browser CodeName: " + navigator.appCodeName + "

" + "

Browser Name: " + navigator.appName + "

" + "

Browser Version: " + navigator.appVersion + "

" + "

Cookies Enabled: " + navigator.cookieEnabled + "

" + "

Browser Language: " + navigator.language + "

" + "

Browser Online: " + navigator.onLine + "

" + "

Platform: " + navigator.platform + "

" + "

User-agent header: " + navigator.userAgent + "

"; // Insert the information into the document body document.body.innerHTML = info; ``` --- ## Developer Considerations ### 1. Language Tags Format The returned string is typically a BCP 47 language tag. It consists of a two-letter language code (e.g., `"en"` for English, `"zh"` for Chinese), often followed by a two-letter region subtag (e.g., `"en-US"`, `"zh-CN"`). ### 2. `navigator.language` vs `navigator.languages` * **`navigator.language`**: Returns a single string representing the user's most preferred language. * **`navigator.languages`**: Returns an array of strings representing the user's preferred languages, ordered by preference. If you want to support fallback languages for internationalization (i18n), it is highly recommended to inspect `navigator.languages` instead. ```javascript // Example of checking multiple preferred languages console.log(navigator.languages); // Output: ["en-US", "en", "zh-CN", "zh"] ``` ### 3. Internationalization (i18n) Best Practice You can use `navigator.language` to automatically set the default language of your web application: ```javascript const userLang = navigator.language || navigator.userLanguage; // Fallback for older IE if (userLang.startsWith('zh')) { // Load Chinese resources initChineseUI(); } else { // Default to English resources initEnglishUI(); } ```