---
sidebar_position: 21
tags: [Web, React, i18n]
---

# Internationalization

- [XLIFF](https://en.wikipedia.org/wiki/XLIFF):
  XML Localization Interchange File Format.
- [ICU](https://github.com/unicode-org/icu):
  International Components for Unicode.
- [BCP 47](https://github.com/wooorm/bcp-47):
  IETF BCP 47 language tag.

## i18n Implementation

```ts
// locale/zh-CN.js

export default {
  hello: '你好，{name}',
}
```

```ts
// locale/en-GB.js

export default {
  hello: 'Hello，{name}',
}
```

```ts
import IntlMessageFormat from 'intl-messageformat'
import en from '../locale/en'
import zh from '../locale/zh'

const MESSAGES = { en, zh }
const LOCALE = 'en' // 这里写上决定语言的方法，例如可以从 cookie 判断语言

class Intl {
  get(key, defaultMessage, options) {
    let msg = MESSAGES[LOCALE][key]

    if (msg == null) {
      if (defaultMessage != null)
        return defaultMessage

      return key
    }

    if (options) {
      msg = new IntlMessageFormat(msg, LOCALE)
      return msg.format(options)
    }

    return msg
  }
}

export default Intl
```

## i18n Library

- [react-intl](https://github.com/alibaba/react-intl-universal)

## i18n Solution

- [奇安信前端国际化平台](https://mp.weixin.qq.com/s/QfTf02GrEXrbCnQswnWFuQ)
