如何检测用户的首选语言（浏览器）

简介

当用户访问你的 Web 应用时，浏览器已经知道他们偏好的语言。这些信息来自操作系统和浏览器的设置。通过读取这些语言偏好，你可以无需用户手动选择，就自动显示正确语言的内容。

这是客户端国际化的基础。在你格式化日期、数字或显示翻译文本之前，首先需要知道用户希望使用哪种语言。

浏览器如何存储语言偏好

所有现代浏览器都会维护一个首选语言列表。用户可以在浏览器或操作系统设置中配置这些偏好。例如，有人可能将西班牙语设为首选，英语作为备选。

浏览器会根据这些偏好请求相应语言的网页。当你的 JavaScript 代码运行时，也可以读取这些偏好，从而决定显示哪种语言。

用 JavaScript 读取语言偏好

navigator.languages 属性会返回一个字符串数组，表示用户的首选语言。这是 JavaScript 检测语言偏好的主要方式。

const languages = navigator.languages;
console.log(languages);
// Output: ["es-MX", "es", "en-US", "en"]

这些语言按优先级排序，最优先的语言排在最前面。在本例中，用户首选墨西哥西班牙语，其次是通用西班牙语、美国英语和通用英语。

理解浏览器返回的内容

每种语言都用 BCP 47 语言标签描述。标签可以很简单，比如 en 代表英语，也可以更具体，比如 en-US 代表美国英语，或 zh-CN 代表中国大陆使用的中文。

这些标签的具体格式和含义将在下一课中介绍。目前，请理解数组中的每个字符串都代表用户可以阅读的一种语言，按优先顺序排列。

获取用户最优先的语言

navigator.language 属性是 navigator.languages 数组的第一个元素。如果你只需要用户的首选语言，可以直接使用该属性。

const topLanguage = navigator.language;
console.log(topLanguage);
// Output: "es-MX"

这两种方法都是可行的。当你只需要一种语言时，使用 navigator.language；如果需要考虑多种回退选项，则使用 navigator.languages。

为什么浏览器会提供多种语言

用户通常会说多种语言，且流利程度各不相同。浏览器允许他们按优先顺序指定多种语言，这样你的应用就有多个可选项。

假设有一位用户会说法语和英语。如果你的应用支持法语，则显示法语内容；如果不支持，则回退到英语。如果应用只支持一种语言偏好，就没有回退选项。

const languages = navigator.languages;
// ["fr-CA", "fr", "en-US", "en"]

const supportedLanguages = ["en", "es", "de"];

// Find the first language the app supports
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

console.log(selectedLanguage);
// Output: "en"

此代码会在用户的偏好语言和应用支持的语言之间找到第一个匹配项。

利用语言偏好格式化内容

一旦你知道了用户的首选语言，就可以结合 Intl API，根据该语言的习惯格式化日期、数字等内容。

const userLanguage = navigator.language;

const date = new Date("2025-03-15");
const formattedDate = new Intl.DateTimeFormat(userLanguage).format(date);

console.log(formattedDate);
// Output varies by language
// For "en-US": "3/15/2025"
// For "en-GB": "15/03/2025"
// For "ja-JP": "2025/3/15"

来自 navigator.languages 的语言标识符数组可以直接传递给 Intl 构造函数，实现基于偏好的回退选择。Intl API 会自动使用列表中它支持的第一个语言。

const formattedDate = new Intl.DateTimeFormat(navigator.languages).format(date);

这种方法允许 Intl API 为你处理回退逻辑。

当语言偏好更改时

当用户的首选语言发生更改时，Window 对象上会触发 languagechange 事件。你可以监听该事件，以实时更新应用的语言。

window.addEventListener("languagechange", () => {
  const newLanguage = navigator.language;
  console.log("Language changed to:", newLanguage);
  // Update your app's displayed language here
});

该事件在实际中较为少见。大多数用户不会在浏览时更改浏览器的语言偏好。但监听此事件可以在发生时带来更好的体验。