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')
);

複製代碼