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

介绍

当有人访问您的 Web 应用时，他们的浏览器已经知道他们偏好的语言。这些信息来自他们的操作系统和浏览器设置。通过读取这些语言偏好，您可以在不要求用户手动选择的情况下显示正确语言的内容。

这是客户端国际化的基础。在您能够格式化日期、数字或显示翻译文本之前，您需要知道用户想要使用的语言。

浏览器如何存储语言偏好

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

浏览器使用这些偏好来请求适当语言的网页。当您的 JavaScript 代码运行时，它可以读取相同的偏好来决定显示哪种语言。

使用 JavaScript 读取语言偏好

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

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

这些语言按偏好顺序排列，最偏好的语言排在最前面。在此示例中，用户最偏好墨西哥西班牙语，其次是通用西班牙语，然后是美国英语，最后是通用英语。

理解浏览器返回的内容

每种语言都使用符合 BCP 47 的语言标签来描述。这些标签可以是简单的，例如 en 表示英语，或者更具体的，例如 en-US 表示美国英语，或 zh-CN 表示中国使用的中文。

这些标签的确切格式和含义将在下一课中介绍。目前，只需了解数组中的每个字符串都表示用户可以阅读的一种语言，并按偏好顺序排列。

获取用户最优先的语言

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

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

这两种方法都是有效的。当您只需要一种语言时，使用 navigator.language；当您需要考虑多个备选语言时，使用 navigator.languages。

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

用户通常会以不同的流利程度使用多种语言。浏览器允许用户按优先顺序指定多种语言，这为您的应用提供了多个选择。

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

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

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

// 找到应用支持的第一个语言
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

console.log(selectedLanguage);
// 输出: "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);
// 输出因语言而异
// 对于 "en-US": "3/15/2025"
// 对于 "en-GB": "15/03/2025"
// 对于 "ja-JP": "2025/3/15"

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

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

这种方法让 Intl API 为您处理回退逻辑。

当语言偏好更改时

当用户的首选语言更改时，languagechange 事件会在 Window 对象上触发。您可以监听此事件以实时更新应用程序的语言。

window.addEventListener("languagechange", () => {
  const newLanguage = navigator.language;
  console.log("语言已更改为:", newLanguage);
  // 在此处更新应用程序显示的语言
});

在实际使用中，此事件并不常见。大多数用户在浏览时不会更改浏览器的语言偏好。然而，当这种情况发生时，监听此事件可以提供更好的用户体验。