FormatJS

特点

1. 模块化设计：提供核心库和多个集成库，可以根据需要选择和使用。
2. 跨平台支持：支持在浏览器和 Node.js 环境中运行，确保服务器端和客户端的一致性。
3. 广泛的标准支持：遵循 ECMAScript 国际化 API（ECMA-402）、Unicode CLDR 和 ICU 消息语法标准。
4. 高质量 Polyfills：提供多个 Polyfill，确保最新的国际化 API 在所有环境中可用。
5. 广泛的集成：与 React、Vue 等常见框架无缝集成。

使用场景

1. 多语言网站：通过格式化日期、数字和消息，支持多语言显示。
2. 跨平台应用：在浏览器和服务器端一致地处理国际化需求。
3. 复杂的消息格式化：使用 ICU 消息语法处理复杂的消息格式。

安装方式

npm

npm install react react-intl

yarn

yarn add react react-intl

使用示例

React 示例

import { IntlProvider, FormattedMessage, FormattedNumber } from 'react-intl';

const messagesInFrench = {
  myMessage: "Aujourd'hui, nous sommes le {ts, date, ::yyyyMMdd}",
};

export default function App() {
  return (
    <IntlProvider messages={messagesInFrench} locale="fr" defaultLocale="en">
      <p>
        <FormattedMessage
          id="myMessage"
          defaultMessage="Today is {ts, date, ::yyyyMMdd}"
          values={{ ts: Date.now() }}
        />
        <br />
        <FormattedNumber value={19} style="currency" currency="EUR" />
      </p>
    </IntlProvider>
  );
}

输出

<p>
  Aujourd'hui, nous sommes le 23/07/2020
  <br />
  19,00 €
</p>

Node.js 示例

import {createIntl, createIntlCache} from '@formatjs/intl'

// Translated messages in French with matching IDs to what you declared
const messagesInFrench = {
  myMessage: "Aujourd'hui, nous sommes le {ts, date, ::yyyyMMdd}",
}

// This is optional but highly recommended
// since it prevents memory leak
const cache = createIntlCache()

// Create the `intl` object
const intl = createIntl(
  {
    // Locale of the application
    locale: 'fr',
    // Locale of the fallback defaultMessage
    defaultLocale: 'en',
    messages: messagesInFrench,
  },
  cache
)

// Aujourd'hui, nous sommes le 23/07/2020
console.log(
  intl.formatMessage(
    {
      // Matching ID as above
      id: 'myMessage',
      // Default Message in English
      defaultMessage: 'Today is {ts, date, ::yyyyMMdd}',
    },
    {ts: Date.now()}
  )
)

// 19,00 €
console.log(intl.formatNumber(19, {style: 'currency', currency: 'EUR'}))

vue3 示例

import VueIntl from 'vue-intl'
import {createApp} from 'vue'

const app = createApp(App)
app.use(VueIntl, {
  locale: 'fr',
  defaultLocale: 'en',
  messages: {
    myMessage: "Aujourd'hui, nous sommes le {ts, date, ::yyyyMMdd}",
  },
})

<template>
  <p>
    {{
      $formatMessage(
        {id: 'myMessage', defaultMessage: 'Today is {ts, date, ::yyyyMMdd}'},
        {ts: Date.now()}
      )
    }}
    <br />
    {{ $formatNumber(19, {style: 'currency', currency: 'EUR'}) }}
  </p>
</template>

输出

<p>
  Aujourd'hui, nous sommes le 23/07/2020
  <br />
  19,00 €
</p>

常用 API 介绍

1. IntlProvider：提供国际化上下文。
2. FormattedMessage：格式化消息字符串。
3. FormattedNumber：格式化数字。
4. createIntl：创建 intl 实例，用于 Node.js 环境。
5. createIntlCache：创建缓存实例，防止内存泄漏。

官方资料

• 官方文档
• GitHub 仓库