获取用户的语言 - Javascript

在某些情况下，我们需要获取用户的语言信息来确保用户界面的适配性，包括用户的首选语言和地区。Javascript 提供了一个内置的方法来获取用户的语言信息。

navigator.language 属性

navigator.language 属性是Javascript的内置属性，可以获取用户的语言信息。该属性取决于用户的操作系统和浏览器设置。

const userLanguage = navigator.language || navigator.userLanguage;
console.log(userLanguage);

上述代码将在控制台中打印出用户的语言代码，例如 "en-US" 或 "zh-CN"。

使用第三方库 - Intl.js

如果您需要更详细和准确的用户地区信息，可以使用第三方库Intl.js。该库使得我们可以获取用户语言和地区信息。

安装 Intl.js

您可以通过 npm 安装 Intl.js：

npm install intl

获取用户语言和地区

下面的示例代码将显示用户的默认语言和地区，以及浏览器支持的所有语言和地区。

const getUserLocaleInfo = () => {
  const userLanguage =
    navigator.language || navigator.userLanguage || navigator.browserLanguage;
  const systemLanguage = navigator.systemLanguage || userLanguage;
  const userRegion = new Intl.DisplayNames([userLanguage], { type: "region" }).of(
    userLanguage.split("-")[1]
  );
  const userLanguageName = new Intl.DisplayNames([userLanguage], {
    type: "language",
  }).of(userLanguage);
  const supportedLanguages = new Set(
    Intl.getCanonicalLocales(
      Intl.NumberFormat.supportedLocalesOf(undefined, {
        localeMatcher: "best fit",
      })
    )
  );
  const supportedLocales = Array.from(supportedLanguages).map((locale) => {
    const region = new Intl.DisplayNames([locale], { type: "region" }).of(
      locale.split("-")[1]
    );
    const language = new Intl.DisplayNames([locale], { type: "language" }).of(
      locale
    );
    return { region, language };
  });

  console.log({
    userLanguage,
    userLanguageName,
    systemLanguage,
    userRegion,
    supportedLocales,
  });
};

getUserLocaleInfo();

上述代码将在控制台中返回以下内容格式：

{
  userLanguage: "en-US",
  userLanguageName: "English",
  systemLanguage: "en-US",
  userRegion: "United States",
  supportedLocales: [
    {
      region: "Bahrain",
      language: "Arabic",
    },
    {
      region: "Egypt",
      language: "Arabic",
    },
    {
      region: "Iraq",
      language: "Arabic",
    },
    ...
  ]
}

结论

Javascript 提供内置属性 navigator.language 以获取用户的语言。使用第三方库 Intl.js 可以获取更详细和准确的用户信息。