文档章节

react-intl

o
 osc_gxtueyne
发布于 2019/03/08 00:43
字数 702
阅读 36
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
使用IBPP在C++中操作FireBird/Interbase数据库

FireBird是一种小巧的关系型数据库,它有多种版本,包括服务器版(象MySQL),单机版(象Access)以及嵌入式(象SQLite)。而且不管是服务器版还是嵌入式版它都完整支持视图、触发器、存储过程等...

Waiting4you
2009/07/26
3.8K
2
手把手教你在Windows下搭建React Native Android开发环境

最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考。(我都是参考官方文档的) react-native...

Common1140
2015/12/24
1.1W
45
React Native iOS环境搭建

感觉React Native会越来越多的公司开始研究、使用。所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下。 废话不多说了,下面简单的列出步骤吧。 1. 安装Homebrew Home...

mahb520
2015/11/30
4.1K
5
H5、React Native、Native应用对比分析

H5、React Native、Native应用对比分析 离上次在北京开源中国盛典已经快一个月了,有点想念@oschina的小伙伴了。我必须承认oschina是国内最大的同性社交网站,这也是无可争议的事实,但是,我...

vczero
2016/01/05
2.7W
48
Android AIDL 原理解析

Android AIDL 原理解析 如果去阅读Android的源代码,就会发现里面大量用到了Binder、AIDL相关知识,比如当我们去使用、、这些核心服务,因为他们都运行在 进程,普通应用想调用他们提供的服务...

Cundong
2016/03/29
2.7K
1

没有更多内容

加载失败,请刷新页面

加载更多

汇总你在 Linux 上的命令使用情况

使用合适的命令,你可以快速了解 Linux 系统上使用的命令以及执行的频率。 汇总 Linux 系统上使用的命令只需一串相对简单的命令以及几条管道将它们绑定在一起。当你的历史记录缓冲区保留了最...

osc_bvincwvq
40分钟前
14
0
Hacker News 简讯 2020-08-15

最后更新时间: 2020-08-15 07:01 Welders set off Beirut blast while securing explosives - (maritime-executive.com) 焊工在固定炸药的同时引爆了贝鲁特爆炸 得分:383 | 评论:322 Factor......

FalconChen
今天
24
0
OSChina 周六乱弹 —— 老椅小猫秋乡梦 梦里石台堆小鱼

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @小小编辑 :《MOM》- 蜡笔小心 《MOM》- 蜡笔小心 手机党少年们想听歌,请使劲儿戳(这里) @狄工 :腾讯又在裁员了,35岁以上清退,抖音看到...

小小编辑
今天
135
4
构建高性能队列,你不得不知道的底层知识!

前言 本文收录于专辑:http://dwz.win/HjK,点击解锁更多数据结构与算法的知识。 你好,我是彤哥。 上一节,我们一起学习了如何将递归改写为非递归,其中,用到的数据结构主要是栈。 栈和队列...

彤哥读源码
今天
17
0
Anaconda下安装keras和tensorflow

Anaconda下安装keras和tensorflow 一、下载并安装Anaconda: Anaconda下载 安装步骤: 如果是多用户操作系统选择All Users,单用户选择Just Me 选择合适的安装路径 然后勾选这个,自动配置环境...

Atlantis-Brook
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部