Navigator language 属性（完整教程）

Navigator language 属性：获取用户语言设置的实用指南

在现代 Web 开发中，我们常常需要根据用户的语言偏好来调整页面内容，比如显示中文、英文还是其他语言的界面。这个功能的实现，离不开浏览器提供的一个基础 API —— Navigator language 属性。它能帮助我们快速获取用户操作系统或浏览器设置的语言环境，是实现国际化（i18n）的重要一步。

想象一下，你正在开发一个全球用户都能访问的网站。当一位来自日本的用户打开你的页面时，系统自动识别出他使用的是日语环境，于是自动切换为日文界面；而一位来自德国的用户打开页面时，系统又自动切换为德文。这一切的背后，正是 Navigator language 属性 在默默工作。

什么是 Navigator language 属性？

Navigator language 属性 是 Navigator 接口的一个只读属性，用于返回用户浏览器或操作系统设置的首选语言。这个属性返回的是一个字符串，格式为 language 或 language-territory，例如 zh-CN（简体中文）、en-US（美国英语）、ja-JP（日本语）等。

这个属性的值来自于用户的系统语言设置，而不是网页本身的语言设置。因此，它非常适合用于检测用户的真实语言偏好，是实现多语言自动切换的基础。

⚠️ 注意：navigator.language 与 navigator.languages 不同。前者返回首选语言，后者返回一个语言优先级列表，我们将在后文详细说明。

如何获取用户语言设置？

最简单的用法就是直接访问 navigator.language 属性。下面是一个完整的示例：

// 获取用户首选语言
const userLanguage = navigator.language;

// 输出语言代码，比如 "zh-CN" 或 "en-US"
console.log('用户的首选语言是：', userLanguage);

📌 注释：navigator.language 是标准的 JavaScript 属性，所有现代浏览器都支持。它返回的是浏览器或操作系统设定的主语言，比如在 Windows 或 macOS 上设置为“中文（简体）”，那么 navigator.language 就会返回 zh-CN。

实际应用：根据语言自动切换页面

我们来做一个实用的小例子：根据用户语言设置，自动显示对应的欢迎信息。

// 定义多语言欢迎语
const greetings = {
  'zh-CN': '你好，欢迎来到我们的网站！',
  'en-US': 'Hello, welcome to our website!',
  'ja-JP': 'こんにちは、私たちのウェブサイトへようこそ！',
  'fr-FR': 'Bonjour, bienvenue sur notre site web !'
};

// 获取用户语言
const userLang = navigator.language;

// 获取语言前缀（如 zh-CN → zh）
const langPrefix = userLang.split('-')[0];

// 根据语言显示对应欢迎语
function showGreeting() {
  // 先尝试精确匹配，如 zh-CN
  if (greetings[userLang]) {
    document.getElementById('greeting').textContent = greetings[userLang];
  } 
  // 如果没有精确匹配，尝试使用语言前缀匹配，如 zh
  else if (greetings[langPrefix]) {
    document.getElementById('greeting').textContent = greetings[langPrefix];
  } 
  // 如果都不匹配，使用默认语言（英文）
  else {
    document.getElementById('greeting').textContent = greetings['en-US'];
  }
}

// 页面加载完成后调用
window.addEventListener('load', showGreeting);

📌 注释：

我们定义了一个 greetings 对象，存储了不同语言的欢迎语。

navigator.language 返回值如 zh-CN，我们用 split('-')[0] 提取主语言代码（如 zh）。

优先匹配完整语言代码（如 zh-CN），其次匹配主语言（如 zh），最后兜底为英文。

页面加载后自动执行，实现“无感”的多语言切换。

多语言支持的高级技巧：使用 navigator.languages

虽然 navigator.language 只返回一个首选语言，但 navigator.languages 返回的是一个数组，包含用户设置的所有语言及其优先级顺序。这在需要更复杂语言逻辑时非常有用。

// 获取用户语言优先级列表
const userLanguages = navigator.languages;

// 输出语言列表，如 ['zh-CN', 'en-US', 'ja-JP']
console.log('用户设置的语言顺序：', userLanguages);

// 遍历语言列表，寻找第一个支持的语言
function getSupportedLanguage(supportedLanguages) {
  for (let lang of userLanguages) {
    // 检查是否在支持的语言列表中
    if (supportedLanguages.includes(lang)) {
      return lang;
    }
    // 如果没有完整匹配，尝试提取主语言
    const primaryLang = lang.split('-')[0];
    if (supportedLanguages.includes(primaryLang)) {
      return primaryLang;
    }
  }
  // 如果都找不到，返回默认语言
  return 'en-US';
}

// 使用示例
const supported = ['zh-CN', 'zh', 'en-US', 'ja-JP'];
const preferred = getSupportedLanguage(supported);
console.log('首选支持的语言：', preferred);

📌 注释：

navigator.languages 返回的是用户设置的语言列表，比如 ['zh-CN', 'en-US', 'ja-JP']，按优先级排序。

通过遍历这个数组，我们可以找到第一个用户支持的语言，实现更智能的多语言匹配。

这种方式适合有多个语言支持的网站，比如一个同时支持中、英、日的平台。

常见问题与注意事项

1. 为什么 `navigator.language` 返回 `en` 而不是 `en-US`？

这是因为用户的操作系统或浏览器语言设置可能只配置了“英语”，而没有指定地区。此时浏览器返回的是最简形式。建议在代码中处理这种“不完整”情况。

2. `navigator.language` 和 `navigator.userLanguage` 有什么区别？

navigator.language 是标准属性，返回用户首选语言，推荐使用。
navigator.userLanguage 是旧版 IE 的属性，已被弃用，不建议使用。

3. 如何兼容低版本浏览器？

虽然现代浏览器都支持 navigator.language，但在一些老旧的 IE 版本中可能不支持。可以使用以下兼容写法：

const userLanguage = navigator.language || navigator.userLanguage || 'en-US';

📌 注释：这种写法会按顺序尝试获取语言属性，确保在低版本浏览器中也能获取默认值。

深度理解：语言代码的规范

语言代码遵循 ISO 639-1（两位字母）和 ISO 3166-1（两位地区代码）标准。例如：

zh：中文（ISO 639-1）
CN：中国（ISO 3166-1）
zh-CN：简体中文（中国）

这种规范使得语言识别更准确。在开发中，我们应尽量使用标准语言代码，避免自定义格式。

为什么 `Navigator language 属性` 如此重要？

它不仅是多语言网站的基础，更是一种“以用户为中心”的设计体现。通过读取用户的语言设置，我们可以避免让用户手动切换语言，提升体验。

想象一个国外用户第一次访问你的网站，却看到全是中文，他会感到困惑甚至直接离开。而如果你能自动识别语言并切换，用户会立刻觉得“这个网站懂我”。

总结

Navigator language 属性 是前端开发中一个简单但极其实用的工具。它让我们能够轻松获取用户的语言偏好，为实现国际化提供坚实基础。

从获取基础语言代码，到构建多语言欢迎语系统，再到处理语言优先级与兼容性问题，每一个步骤都值得深入掌握。

无论你是初学者还是中级开发者，掌握这个属性，都能让你的网站更智能、更人性化。

下次你开发一个多语言页面时，别忘了加上这一行代码：

const lang = navigator.language;

它可能就是让用户体验“丝滑”的关键一步。