用户的首选语言和系统/浏览器区域之间存在差异。

用户可以在浏览器中配置首选语言，这些语言将用于navigator.language(s)，并在从服务器请求资源时使用，以根据语言优先级列表请求内容。

但是，浏览器的语言环境将决定如何呈现数字、日期、时间和货币。这种设置可能是排名最高的语言，但不能保证。在Mac和Linux上，语言环境由系统决定，而不考虑用户的语言首选项。在Windows上，可以在Chrome上的首选列表中选择语言。

通过使用Intl (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)，开发人员可以覆盖/设置用于呈现这些内容的区域设置，但是有些元素是不能被覆盖的，例如<input type="date">格式。

要正确地提取这种语言，我找到的唯一方法是:

(新Intl.NumberFormat ()) .resolvedOptions .locale ()

(Intl.NumberFormat () .resolvedOptions()。Locale似乎也有用)

这将为默认区域设置创建一个新的NumberFormat实例，然后读入那些已解析选项的区域设置。

用户的首选语言和系统/浏览器区域之间存在差异。

用户可以在浏览器中配置首选语言，这些语言将用于navigator.language(s)，并在从服务器请求资源时使用，以根据语言优先级列表请求内容。

但是，浏览器的语言环境将决定如何呈现数字、日期、时间和货币。这种设置可能是排名最高的语言，但不能保证。在Mac和Linux上，语言环境由系统决定，而不考虑用户的语言首选项。在Windows上，可以在Chrome上的首选列表中选择语言。

通过使用Intl (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)，开发人员可以覆盖/设置用于呈现这些内容的区域设置，但是有些元素是不能被覆盖的，例如<input type="date">格式。

要正确地提取这种语言，我找到的唯一方法是:

(新Intl.NumberFormat ()) .resolvedOptions .locale ()

(Intl.NumberFormat () .resolvedOptions()。Locale似乎也有用)

这将为默认区域设置创建一个新的NumberFormat实例，然后读入那些已解析选项的区域设置。

我对此做了一些研究，并在下表中总结了我的发现

所以推荐的解决方案是写一个服务器端脚本来解析Accept-Language报头，并将其传递给客户端来设置网站的语言。奇怪的是，为什么需要服务器来检测客户端的语言偏好，但这就是目前的情况。还有其他各种各样的黑客可以检测语言，但根据我的理解，阅读Accept-Language报头是推荐的解决方案。

本文建议使用浏览器导航器对象的以下属性:

导航器。语言(Netscape -浏览器本地化) 导航器。browserLanguage(特定于ie的浏览器本地化语言) 导航器。systemLanguage(特定于ie - Windows操作系统-本地化语言) navigator.userLanguage

将这些转换成javascript函数，在大多数情况下，您应该能够猜出正确的语言。确保优雅地降级，所以有一个包含语言选择链接的div，这样如果没有javascript或方法不起作用，用户仍然可以决定。如果它起作用了，就隐藏div。

在客户端执行此操作的唯一问题是，您要么将所有语言提供给客户端，要么必须等到脚本运行并检测到该语言后才能请求正确的版本。也许将最流行的语言版本作为默认设置会激怒最少的人。

编辑:我赞同Ivan的cookie建议，但要确保用户以后可以随时更改语言;不是每个人都喜欢浏览器默认的语言。

结合浏览器用来存储用户语言的多种方式，你得到这个函数:

const getNavigatorLanguage = () => {
  if (navigator.languages && navigator.languages.length) {
    return navigator.languages[0];
  } else {
    return navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';
  }
}

我们首先检查导航器。语言数组的第一个元素。 然后我们得到任意一个导航器。userLanguage或navigator.language。 如果失败，我们得到navigator.browserLanguage。 最后，如果其他方法都失败，我们将其设置为“en”。

下面是性感的俏皮话:

const getNavigatorLanguage = () => (navigator.languages && navigator.languages.length) ? navigator.languages[0] : navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';

您还可以尝试从文档中获取语言，这可能是您的第一个调用端口，然后返回到其他方法，因为人们经常希望他们的JS语言与文档语言匹配。

HTML5:

html querySelector(“”),该文件。“lang”getAttribute ()

遗留问题:

元文件。querySelector(“[http-equiv = content-language)。getAttribute(‘内容’)

没有真正的资源是100%可靠的，因为人们可能只是把它放在错误的语言中。

有一些语言检测库可以让您根据内容确定语言。