Fatal编程技术网
  • javascript/
  • i18n:JavaScript中的访问区域设置解析逻辑

i18n:JavaScript中的访问区域设置解析逻辑

javascript localization internationalization

i18n:JavaScript中的访问区域设置解析逻辑,javascript,localization,internationalization,single-page-application,Javascript,Localization,Internationalization,Single Page Application,我正在开发和国际化单页应用程序，其中包含两种本地化文本： “静态”文本，通常是HTML模板中的文本 动态文本，即数据库中的文本，通常是电子商务网站上的产品描述 这是我遇到麻烦的第二型。假设我的应用程序正式支持英语、法语和德语，我从数据库中获得一个对象，例如： { description: { 'en': "It's an awesome product.", 'en_UK': "This product is ace.", 'fr': "C'est un excell

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

  • “静态”文本，通常是HTML模板中的文本
  • 动态文本，即数据库中的文本，通常是电子商务网站上的产品描述
    • 这是我遇到麻烦的第二型。假设我的应用程序正式支持英语、法语和德语，我从数据库中获得一个对象，例如：

    {
  description: {
    'en': "It's an awesome product.",
    'en_UK': "This product is ace.",
    'fr': "C'est un excellent produit."
    // German's missing
  }
}
    现在的挑战是，根据用户的区域设置以及此特定对象中的可用区域设置，动态选择应选择的显示区域设置

    我假设大多数i18njavascript库都有自己的'locale resolution'逻辑内置，但我还没有找到一个将此逻辑公开给客户端使用的逻辑

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

    提前谢谢

    免责声明：我是L20n的合著者，也是 l10n.js用于Firefox操作系统

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

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

    ECMAScript的
    Intl
    对象上有一个函数，但目前无法使用其内部逻辑实现此目的

    获得用户喜欢的语言列表并不像应该的那么容易。大多数浏览器中都有
    navigator.language
    （这是Firefox和浏览器中用户的首选语言）、
    navigator.userLanguage
    和新的
    navigator.languages
    ，这是用户首选语言的有序列表

    服务器端的替代方法是使用HTTP请求的
    Accept Language
    头，这是目前了解用户偏好的最可靠方法

    一旦有了用户首选语言列表，就可以执行语言协商

    下面是一些执行语言协商的库的示例：

    • ,
    • ,
    • ECMA-402
      Intl
      对象的一个属性，它添加了
      Intl.prioritylocales
    对于您的特定用例，您可以选择执行以下两项操作之一：

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

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

    • 这两种解决方案都有这样的好处：当最终只使用一种翻译时，不会将整个翻译集发送给客户端

    对于解决方案#1，考虑到您使用的是Angular，我可以建议使用通过。您应该能够使用获取协商的语言列表，并使用该列表的第一个元素查询数据库

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

    • 上述
    免责声明：我是L20n的合著者，也是 l10n.js用于Firefox操作系统

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

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

    ECMAScript的
    Intl
    对象上有一个函数，但目前无法使用其内部逻辑实现此目的

    获得用户喜欢的语言列表并不像应该的那么容易。大多数浏览器中都有
    navigator.language
    （这是Firefox和浏览器中用户的首选语言）、
    navigator.userLanguage
    和新的
    navigator.languages
    ，这是用户首选语言的有序列表

    服务器端的替代方法是使用HTTP请求的
    Accept Language
    头，这是目前了解用户偏好的最可靠方法

    一旦有了用户首选语言列表，就可以执行语言协商

    下面是一些执行语言协商的库的示例：

    • ,
    • ,
    • ECMA-402
      Intl
      对象的一个属性，它添加了
      Intl.prioritylocales
    对于您的特定用例，您可以选择执行以下两项操作之一：

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

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

    • 这两种解决方案都有一个好处，即当只有一个将被删除时，不会向客户端发送整个翻译集 
    // simple cases
negotiate(["fr"], ["de","fr"], 'en'); // => fr
negotiate(["en"], ["de","en-US","en"], 'en'); // => en

// less natural cases, where the solution is more opinionated
negotiate(["fr-FR"], ["fr"], 'en'); // => fr-FR
negotiate(["en","en-UK","fr"], ["fr-FR"], 'en'); // => fr
negotiate(["fr","de"], ["fr-FR","de"], 'en'); // => fr