JavaScript中如何检测用户语言？一文详解浏览器语言获取方法

开发多语言网站时，第一个要解决的问题通常就是：如何知道用户说的是哪种语言？让用户手动选择当然可以，但如果能在页面加载时自动识别并展示对应语言的界面，体验会好很多。JavaScript提供了几种检测用户语言的途径，各有优劣，下面我们逐一分析。

一、使用navigator对象获取浏览器语言

最直接的方式是读取navigator.language属性。它返回一个BCP 47格式的语言标签字符串，比如"zh-CN"表示简体中文，"en-US"表示美式英语。这个属性反映的是浏览器界面语言或用户在设置中指定的首选语言，现代浏览器都支持。

如果需要获取用户完整的语言偏好列表，可以使用navigator.languages。它返回一个数组，第一项就是首选语言，后续项按优先级排列。这个属性在需要降级匹配时非常有用，比如用户首选是"zh-HK"但你的站点只提供"zh-CN"和"zh-TW"，就可以遍历这个列表找到最接近的支持语言。

// 获取首选语言
const lang = navigator.language; // 例如 "zh-CN"

// 获取完整的语言偏好列表
const langs = navigator.languages; // 例如 ["zh-CN", "zh", "en-US", "en"]

// 兼容旧浏览器的写法（IE 使用 browserLanguage 或 userLanguage）
const fallback =
  navigator.language ||
  navigator.browserLanguage ||
  navigator.userLanguage ||
  "en";

console.log("首选语言:", fallback);
console.log("语言列表:", navigator.languages);

需要注意的是，这两个属性反映的都是浏览器设置，而不是用户真实的能力。比如一个在美国生活的中文使用者，浏览器语言可能是"en-US"，但他其实更希望看到中文界面。因此自动检测结果只能作为初始默认值，最好配合手动切换功能一起使用。

二、解析语言标签并匹配站点支持的语言

拿到语言标签后，不能直接拿来用，还需要做匹配处理。BCP 47标签包含主语言、文字脚本、地区等多个子标签，例如"zh-Hans-CN"表示简体中文、中国大陆地区。你的站点可能只支持"zh"和"en"两种语言，这时就需要从具体标签中提取主语言部分进行匹配。

// 站点支持的语言列表
const supportedLangs = ["zh", "en", "ja"];

// 根据浏览器语言匹配站点语言
function detectLanguage() {
  const candidates = navigator.languages || [navigator.language];
  for (const tag of candidates) {
    // 取主语言部分，如 "zh-CN" -> "zh"
    const primary = tag.split("-")[0].toLowerCase();
    if (supportedLangs.includes(primary)) {
      return primary;
    }
  }
  return supportedLangs[0]; // 找不到则回退到默认语言
}

const userLang = detectLanguage();
console.log("匹配到的语言:", userLang);

这种逐级匹配的策略比简单读取navigator.language更健壮。它先尝试完整匹配，再降级到主语言匹配，最后回退到默认语言。对于像中文这样区分简繁体的场景，还可以进一步判断地区子标签："zh-TW"和"zh-HK"通常对应繁体，"zh-CN"和"zh-SG"对应简体。

三、其他辅助检测手段

除了浏览器属性，还有一些辅助方式可以判断用户语言。第一种是解析URL参数，这是最常见的持久化方案：用户访问ippipp.com?lang=zh时，前端读取参数并设置语言，同时可以把结果写入Cookie或localStorage，下次访问时直接读取存储的值，优先级高于自动检测。

第二种是服务端配合。HTTP请求头中的Accept-Language字段携带了与navigator.languages相同的信息，服务端可以解析它并直接返回对应语言的HTML，或者把结果注入到页面中供前端使用。这种方式对SEO更友好，因为搜索引擎爬虫能直接抓取到对应语言的内容。

// 结合 URL 参数、本地存储和浏览器检测的完整逻辑
function resolveLanguage() {
  const params = new URLSearchParams(location.search);
  const fromUrl = params.get("lang");

  // 优先级：URL参数 > 本地存储 > 浏览器语言 > 默认语言
  const stored = localStorage.getItem("app_lang");
  const detected = (navigator.language || "en").split("-")[0].toLowerCase();

  const finalLang = fromUrl || stored || detected;

  // 持久化用户的选择
  if (fromUrl) {
    localStorage.setItem("app_lang", fromUrl);
  }

  return supportedLangs.includes(finalLang) ? finalLang : "en";
}

最后要提醒一点：不要试图通过客户端IP来判断语言，这种方式误判率很高。IP只能反映网络位置，无法代表用户偏好，出差、旅行或使用代理的用户都会被错误识别。综合来看，navigator.language加上用户手动选择并持久化存储，是目前最稳妥的组合方案。自动检测提供初始值，用户的选择永远拥有最高优先级，这样才能兼顾智能化和准确性。

JavaScript检测语言navigator.language国际化修改时间：2026-09-13 02:50:23