react-intl

国际化在JavaScript中的实现

最新推荐文章于 2020-04-23 21:56:47 发布

weixin_30550271

最新推荐文章于 2020-04-23 21:56:47 发布

阅读量139

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lightsong/p/10493550.html

本文介绍了如何使用JavaScript进行国际化处理，包括使用ECMAScript Internationalization API进行语言敏感的字符串比较、数字格式化和日期时间格式化。同时，文章详细讲解了FormatJS库的功能，以及如何在React应用中通过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}
}.