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

react-intl的更多相关文章

  1. [React Intl] Use a react-intl Higher Order Component to format messages

    In some cases, you might need to pass a string from your intl messages.js file as a prop to a compon ...

  2. [React Intl] Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

    Some browsers, such as Safari < 10 & IE < 11, do not support the JavaScript Internationali ...

  3. [React Intl] Get locale value from intl injector

    Get 'injectIntl' from  'react-intl', it is a high order componet. We need to wrap our component into ...

  4. [React Intl] Install and Configure the Entry Point of react-intl

    We’ll install react-intl, then add it to the mounting point of our React app. Then, we’ll use react- ...

  5. [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)

    Using the react-intl FormattedMessage component, we’ll learn how to render content conditionally in ...

  6. [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

    Using a react-intl FormattedNumber component, we'll pass a Number and a few additional props in orde ...

  7. [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative

    Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human reada ...

  8. [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime

    Using the react-intl FormattedDate and FormattedTime components, we’ll render a JavaScript Date into ...

  9. [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage

    In this lesson, we’ll use the react-intl FormattedHTMLMessage component to display text with dynamic ...

  10. [React Intl] Render Content with Placeholders using react-intl FormattedMessage

    Learn how to use react-intl to set dynamic values into your language messages. We’ll also learn how ...

随机推荐

  1. JPA实现复杂条件分页查询

    相信熟悉Hibernate的人对于ORM给编程带来的便利于快捷一定不陌生,相对于MyBatis等需要编写复杂的SQL语句,ORM映射为我们带来的便利显而易见.但是,在获得便利的同时,失去的便是灵活性, ...

  2. PYTHON定义函数制作简单登录程序(详细)

    环境:python3.* 结构:   dict_name = {} #定义一个字典,后面用到 def newuser(): #定义注册函数 prompt1='login desired:' while ...

  3. 利用Navicat高效率postgresql转mysql数据库

    本人很喜欢postgresql数据库,也一直认为postgresql比mysql要更好更强大. 可生态环境太差了,无奈,最近要把一个小站转成mysql数据库. 小站主要表数据110万,pg_dump备 ...

  4. 【记录】使用在线KMS激活win10系统

    摘要 网上一些激活工具可能捆绑了木马.病毒.使用激活工具有风险.使用在线KMS来激活系统则没有这个风险.(自测至发布日期仍然可用) (有能力的请支持正版windows系统) 将kms服务器地址设置为k ...

  5. bash: lspci: command not found解决方法

    在CentOS虚拟机使得lspci查看硬件信息.使用时,提示bash: lspci: command not found,大多使用/sbin/lspci即可,我发现我的系统中/sbin下也没有.使用y ...

  6. centos7安装docker并设置开机自启以及常用命令

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  7. linux使用Nginx搭建静态资源服务器

    最近公司需要做一个宣传片播放  视频有点大 好几百M 就想到使用Nginx来代理静态资源,在过程中出现了一些问题,比如端口没开.访问是403等,没有成功,后面慢慢查找问题,才发现大部分博客资料的都不全 ...

  8. VS2017打开低版本的VS MVC架构的项目的时候需要修改的地方

    1.需要修改的是.sln文件,即将里面的 Version改为12,其中的VS的版本改为2017 2.项目中后缀名为 .csproj中的代码改一下:

  9. Hexo server报错TypeError: Cannot read property 'utcOffset' of null解决方法

    最近刚刚开始使用Hexo,新建了一篇article,运行hexo server时候总是报错Cannot read property 'offset' of null. 最后发现是因为手贱把_confi ...

  10. 【js】Number与数组

    定义和用法 Number() 函数把对象的值转换为数字. 语法 Number(object):参数必须是对象 如果参数是 Date 对象,Number() 返回从 1970 年 1 月 1 日至今的毫 ...