i18n：在JavaScript中访问语言环境解析逻辑

Question

I'm developing and internationalized Single Page App with 2 sorts of localized text:

1. 'static' text, typically text in my HTML templates.
2. 'dynamic' text, ie text that lives in the database, typically the description of a product on an e-commerce site.

It's type 2 I'm having trouble with. Say my app officially supports English, French and German, and I get from my database an object such as :

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

Now the challenge is to dynamically choose what locale should be chosen for display, given the user's locale and what locales are available in this particular object.

I assume most i18n JavaScript libraries have their own 'locale resolution' logic built-in, but I haven't found one that exposes this logic for the client to use.

Does anyone know a JS library that addresses this, or a good way to solve this issue? (if it's AngularJs-compatible, it's even better).

Thanks in advance!

Answer 1

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

The term that's commonly used to describe this logic is language negotiation .

Most localization libraries should have some sort of language negotiation algorithm included. It can be as basic as trying to match the value of navigator.language with a list of available languages. More sophisticated approaches will look at both the language tag ( en in en-US ) and the region tag ( US in en-US ) to try to find a best match.

There's a proposal to expose a language negotiation method on the ECMAScript's Intl object, but for now it's not possible to use its internal logic for this purpose.

Getting the list of languages preferred by the user is not as easy as it should be. There's navigator.language in most browsers (which is the user's preferred language in Firefox and the language of the browser UI in Chrome ), navigator.userLanguage in Internet Explorer, and the new navigator.languages which is an ordered list of user's preferred languages.

A server-side alternative is to use the Accept-Language header of the HTTP request which currently is the most reliable way of finding out what the user's preferences are.

Once you have the list of user's preferred languages you can perform the language negotiation.

Here are a few examples of libraries that perform language negotiation:

• in-browser-language ,
• l10n.js used in Firefox OS ,
• a non-standard extension of the ECMA-402 Intl object which adds Intl.prioritizeLocales .

For your particular use-case, you can choose to do one of the two following things:

1. perform the language negotiation on the client side using navigator.language || navigator.userLanguage navigator.language || navigator.userLanguage and send a request to the database specifying which language you're interested in, or

2. send the request with the user's Accept-Language header and perform the language negotiation on the server side, and then query the database for the correct translation.

Both solutions have the benefit of not sending the entire set of translations to the client when only one will be eventually used.

For solution #1, given that you're using Angular, I can suggest using L20n 1.0.x which integrates with Angular via the ng-l20n module . You should be able to use the supportedLocales property to get the negotiated list of languages and use the first element of that list to query the database.

For solution #2, it all depends on your server-side setup, but if you're using node.js, you can try using one of the following modules:

• the afore-mentioned in-browser-language ,
• locale .

Answer 2

Staś Małolepszy's answer is a good reference of the resources available for this problem domain.

However, I found that none of these libraries suited my needs (either because their language negotiation logic was too simplistic, or because it wasn't really exposed).

Therefore, I implemented my own custom solution for language negotiation. You can experiment with it in this Plunkr: http://plnkr.co/edit/Cfv49ZcQWJcqwOXYcjtw?p=preview

The API is a function negotiate(availableLocales, requestedLocales, defaultLocale) , a bit similar to the ECMAScript proposal (with the difference that it returns a single locale value, not a list).

// 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

I made the choice to account for 'locale inheritance' (eg en-US is derived from en ) in a non-trivial, opinionated manner . I do not claim this is in compliance with whatever standards exist on this topic.

It surprised me that I couldn't find any library that provides this sort of functionality. My best explanation is that i18n of dynamic content isn't needed that often.

Finally, as to where I get the list of requested languages, as I was in an Single Page App configuration I chose to send an AJAX request to my server, with the content of the Accept-Language header in the response.