FormatJs-让你的web应用程序国际化

FormatJs

  FormatJS 是javascript的模块化集合，用于格式化数字, 日期和字符串以进行国际化操作。它由一组核心库组成, 这些核心库是基于 JavaScript Intl 内置和行业范围 i18n 标准的核心库，以及现在通用模板和组件库的。   

国际化指南

• 基本国际化原则
  • 国际化很重要
  • 区域设置：语言和区域
  • 翻译字符串
  • 预先设定好的翻译设置
  • 语境
• 运行时环境
  • 浏览器的支持情况intl
  • 添加Intl APIs
  • Intl.js Polyfill - Intl.NumberFormat and Intl.DateTimeFormat APIs
• 消息语法

常用FormatJS 的集成包

• react
• ember
• handlebars
• dust

react

Formatjs 集成react的包文件，用来格式化日期、数字和字符串，包括复数和处理翻译。web app 进行国际化是一项牵连复杂的任务, 如果之前在JavaScript中没有接触过i8n, 推荐先开始以下规则：

• Basic Internationalization Principles
• Runtime Environments
• Internationalization Tutorial From Smashing Magazine

react-intl 包的使用

npm install react-intl --save

复制代码

react-intl npm 包文件可以通过设置package.json 文件的main的方式可以为commnjs, ES6, UMD dev, UMD prod这几个版本，但无论是使用那个版本的React Intl, 它们都提供相同的命名导出如下:

• injectIntl
• defineMessages
• IntlProvider
• FormattedDate
• FormattedTime
• FormattedRelativeTime
• FormattedNumber
• FormattedPlural
• FormattedMessage
• FormattedHTMLMessage

apps应用使用react-intl 包必须使用 <IntlProvider>组件

ReactDOM.render(
  <IntlProvider locale={usersLocale} messages={translationsForUsersLocale}>
    <App />
  </IntlProvider>,
  document.getElementById('container')
);

复制代码

格式化数据

React Intl 通过react component 以及它的api 两种方式来格式化数据。组件提供了常用的react native apps集成国际化的方式，如<Formatted*>组件, 而需要将数据格式化为不适合 React 元素的字符串值时，应使用 API。 例如, 标题或 aria 属性，或组件 DidMount 中的副作用。

React Intl 提供的 API 可通过高阶组件 (HOC) 工厂注入 Intl 进行访问。它使用一个高阶的React 组件将传入的 React 组件包装，该组件提供强制格式化 API。(这类似于Flux 实现中的连接到存储模式。)

例子

下面是一个使用<IntlProvider>、FormattedRelative> 组件和 API intl.formatDate(date)设置 i18n 上下文和格式化数据的的示例:

import React from 'react';
import ReactDOM from 'react-dom';
import {injectIntl, IntlProvider, FormattedRelative} from 'react-intl';

const PostDate = injectIntl(({date, intl}) => (
  <span title={intl.formatDate(date)}>
    <FormattedRelative value={date} />
  </span>
));

const App = ({post}) => (
  <div>
    <h1>{post.title}</h1>
    <p>
      <PostDate date={post.date} />
    </p>
    <div>{post.body}</div>
  </div>
);

ReactDOM.render(
  <IntlProvider locale={navigator.language}>
    <App
      post={{
        title: 'Hello, World!',
        date: new Date(1459913574887),
        body: 'Amazing content.',
      }}
    />
  </IntlProvider>,
  document.getElementById('container')
);

复制代码

转载于:https://juejin.im/post/5d4e7afe6fb9a06b265086e2