javascript - 国际化 : Access locale resolution logic in JavaScript

Question

我正在开发和国际化单页应用程序，其中包含两种本地化文本:

1. “静态”文本，通常是我的 HTML 模板中的文本。
2. “动态”文本，即存在于数据库中的文本，通常是电子商务网站上产品的描述。

我遇到问题的是类型 2。假设我的应用程序正式支持英语、法语和德语，我从数据库中获取一个对象，例如:

{
  description: {
    'en': "It's an awesome product.",
    'en_UK': "This product is ace.",
    'fr': "C'est un excellent produit."
    // German's missing
  }
}

现在的挑战是根据用户的区域设置以及该特定对象中可用的区域设置，动态选择应选择哪种区域设置进行显示。

我假设大多数 i18n JavaScript 库都有自己的内置“区域设置解析”逻辑，但我还没有找到一个公开此逻辑供客户端使用的库。

有人知道解决这个问题的 JS 库，或者解决这个问题的好方法吗？(如果它与 AngularJs 兼容，那就更好了)。(如果它与 AngularJs 兼容，那就更好了)。 p>

提前致谢!

Answer 1

Disclaimer: I'm a co-author of L20n and one of the developers of l10n.js used in Firefox OS.

通常用来描述这种逻辑的术语是“语言协商”。

大多数本地化库都应该包含某种语言协商算法。它可以像尝试将 navigator.language 的值与可用语言列表相匹配一样简单。更复杂的方法将同时查看语言标记(en-US 中的 en)和区域标记(en- 中的US)。 US)尝试找到最佳匹配。

有一个proposal to expose a language negotiation method在 ECMAScript 的 Intl 对象上，但目前还无法将其内部逻辑用于此目的。

获取用户首选的语言列表并不像应有的那么容易。大多数浏览器中都有 navigator.language(这是用户在 Firefox 和 language of the browser UI in Chrome 中的首选语言)，Internet Explorer 中有 navigator.userLanguage 以及新的 navigator.languages 这是用户首选语言的有序列表。

服务器端的替代方案是使用 HTTP 请求的 Accept-Language header ，这是目前了解用户首选项的最可靠方法。

获得用户首选语言列表后，您就可以执行语言协商。

以下是执行语言协商的库的一些示例:

• in-browser-language ,
• l10n.js used in Firefox OS ,
• 一个non-standard extension添加了 Intl.prioritizeLocales 的 ECMA-402 Intl 对象。

对于您的特定用例，您可以选择执行以下两项操作之一:

1. 使用navigator.language || 在客户端执行语言协商navigator.userLanguage 并向数据库发送请求，指定您感兴趣的语言，或者

2. 使用用户的 Accept-Language header 发送请求，并在服务器端执行语言协商，然后查询数据库以获取正确的翻译。

这两种解决方案的优点是，当最终只使用一个翻译时，不会将整套翻译发送给客户端。

对于解决方案 #1，鉴于您使用的是 Angular，我建议使用 L20n 1.0.x它通过 ng-l20n module 与 Angular 集成。您应该能够使用supportedLocales property获取协商的语言列表并使用该列表的第一个元素来查询数据库。

对于解决方案 #2，这完全取决于您的服务器端设置，但如果您使用的是 Node.js，则可以尝试使用以下模块之一:

• 上述in-browser-language ,
• locale .