internationalization standard
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
The
Intlobject is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The INTL object provides access to several constructors as well as functionality common to the internationalization constructors and other language sensitive functions.
Intl.Collator- Constructor for collators, which are objects that enable language-sensitive string comparison.
Intl.DateTimeFormat- Constructor for objects that enable language-sensitive date and time formatting.
Intl.ListFormat- Constructor for objects that enable language-sensitive list formatting.
Intl.NumberFormat- Constructor for objects that enable language-sensitive number formatting.
Intl.PluralRules- Constructor for objects that enable plural-sensitive formatting and language-specific rules for plurals.
Intl.RelativeTimeFormat- Constructor for objects that enable language-sensitive relative time formatting.
library FormatJS
https://formatjs.io/
FormatJS is a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people. It includes a set of core libraries that build on the JavaScript
Intlbuilt-ins and industry-wide i18n standards, plus a set of integrations for common template and component libraries.
react-intl
https://github.com/yahoo/react-intl
Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
React Intl is part of FormatJS. It provides bindings to React via its components and API.
Features
- Display numbers with separators.
- Display dates and times correctly.
- Display dates relative to "now".
- Pluralize labels in strings.
- Support for 150+ languages.
- Runs in the browser and Node.js.
- Built on standards.
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {IntlProvider, FormattedMessage} from 'react-intl';
class App extends Component {
constructor(props) {
super(props);
this.state = {
name : 'Eric',
unreadCount: 1000,
};
}
render() {
const {name, unreadCount} = this.state;
return (
<p>
<FormattedMessage
id="welcome"
defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
one {message}
other {messages}
}`}
values={{name: <b>{name}</b>, unreadCount}}
/>
</p>
);
}
}
ReactDOM.render(
<IntlProvider locale="en">
<App />
</IntlProvider>,
document.getElementById('container')
);
单复数格式解释：
https://formatjs.io/guides/message-syntax/#plural-format
{plural}FormatThe
{key, plural, matches}is used to choose output based on the pluralization rules of the current locale. It is very similar to the{select}format above except that the value is expected to be a number and is mapped to a plural category.The
matchis a literal value and is matched to one of these plural categories. Not all languages use all plural categories.
zero- This category is used for languages that have grammar specialized specifically for zero number of items. (Examples are Arabic and Latvian.)
one- This category is used for languages that have grammar specialized specifically for one item. Many languages, but not all, use this plural category. (Many popular Asian languages, such as Chinese and Japanese, do not use this category.)
two- This category is used for languages that have grammar specialized specifically for two items. (Examples are Arabic and Welsh.)
few- This category is used for languages that have grammar specialized specifically for a small number of items. For some languages this is used for 2-4 items, for some 3-10 items, and other languages have even more complex rules.
many- This category is used for languages that have grammar specialized specifically for a larger number of items. (Examples are Arabic, Polish, and Russian.)
other- This category is used if the value doesn't match one of the other plural categories. Note that this is used for "plural" for languages (such as English) that have a simple "singular" versus "plural" dichotomy.
=value- This is used to match a specific value regardless of the plural categories of the current locale.
Cart: {itemCount} {itemCount, plural,
one {item}
other {items}
}You have {itemCount, plural,
=0 {no items}
one {1 item}
other {{itemCount} items}
}.In the
outputof the match, the#special token can be used as a placeholder for the numeric value and will be formatted as if it were{key, number}.You have {itemCount, plural,
=0 {no items}
one {# item}
other {# items}
}.
例子：
https://github.com/yahoo/react-intl/tree/master/examples
https://github.com/jiechud/georgy-react
API
https://github.com/yahoo/react-intl/wiki/API#injection-api