react-intl

internationalization standard

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl

The Intl object 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 Intl built-ins and industry-wide i18n standards, plus a set of integrations for common template and component libraries.

FormatJS Integrations

FormatJS Core Libs

Standards

 

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} Format

The {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 match is 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 output of 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

1. React Intl API
   • Locale Data APIs
   • Injection API
   • Date Formatting APIs
   • Number Formatting APIs
   • String Formatting APIs