一、國際化 / i18n

目前國際化，就是開發(fā)者寫對(duì)象，一個(gè)key關(guān)聯(lián)若干語種的翻譯。相比于瀏覽器自帶的翻譯功能，語義更加準(zhǔn)確。

“國際化”的簡稱：i18n（其來源是英文單詞 internationalization的首末字符i和n，18為中間的字符數(shù)）

二、react項(xiàng)目國際化

react-intl是業(yè)界最受歡迎的軟件包之一：React-intl是雅虎的語言國際化開源項(xiàng)目FormatJS的一部分，通過其提供的組件和API可以與ReactJS綁定。這種方法引入了兩個(gè)主要問題：
一：只能應(yīng)用于視圖層，例如React.Component。對(duì)于Vanilla JS文件（原生JS），無法對(duì)其進(jìn)行國際化。
二：要獲取React.Component的實(shí)例，react-intl不能使用常規(guī)方法如this.refs.comname

相比之下，react-intl-universal具有以下特征：

• react-intl-universal不僅可以在React.Component中使用，還可以在Vanilla JS中使用
• 簡單。只有三個(gè)主要的API和一個(gè)可選的幫助器。
• 顯示不同語言環(huán)境的數(shù)字，貨幣，日期和時(shí)間。
• 多元化字符串中的標(biāo)簽。
• 消息中的支持變量。
• 在消息中支持HTML。
• 支持150多種語言。
• 在瀏覽器和Node.js中運(yùn)行。
• 消息格式由ICU標(biāo)準(zhǔn)嚴(yán)格執(zhí)行。
• 支持嵌套JSON格式的語言環(huán)境數(shù)據(jù)。

三、具體實(shí)現(xiàn)

1. 安裝

cnpm install react-intl-universal --save

2. App.js文件

本地語言文件

en-US.json

{"tableTitle": "Results","searchBoardTitle": "filter","ReportNumber": "Report Number" }

zh-CN.json

{"tableTitle": "列表","searchBoardTitle":"查詢","ReportNumber": "報(bào)案號(hào)" }

引入ant組件、加載語言環(huán)境數(shù)據(jù)

import { ConfigProvider } from 'antd'; import { emit } from './emit.js' import zh_CN from 'antd/es/locale/zh_CN'; import en_US from 'antd/es/locale/en_US'; import intl from 'react-intl-universal'; const locales = {'en-US': require('./locales/en-US.json'),'zh-CN': require('./locales/zh-CN.json'), }; ...

初始化語言

class App extends React.PureComponent {constructor(props) {super(props);this.state = {antdLang: zh_CN, // 修改antd 組件的國際化}}async componentWillMount(){const { userStore, history } = this.props;emit.on('change_language', lang => this.loadLocales(lang)); // 監(jiān)聽語言改變事件this.loadLocales(); // 初始化語言}loadLocales(lang = 'en-US') {intl.init({currentLocale: lang, // 設(shè)置初始語言locales,}).then(() => {this.setState({antdLang: lang === 'zh-CN' ? zh_CN : en_US});});} ...

加入antd的LocaleProvider 組件：該組件接受一個(gè)屬性 locale，該屬性為當(dāng)前語言的文案。antd 會(huì)通過 react 的 context 將這些信息傳遞給被 LocaleProvider 包裹的子組件，

render() {return (<ConfigProvider locale={this.state.antdLang}> <div className={styles.App}><PolestarApp><Header /><Suspense fallback={<div></div>}><Switch><Route path='/' exact component={Home} /></Switch></Suspense></PolestarApp></div></ConfigProvider>)}

3. emit.js文件

通過events實(shí)現(xiàn)事件監(jiān)聽，即在header切換語言時(shí)（發(fā)送消息），把切換事件傳遞到App.js中（接收消息）

const EventEmitter = require('events').EventEmitter; const emit = new EventEmitter(); export { emit };

4. header中增加語言切換

import React from 'react'; import styles from './header.module.css'; import { Select } from 'antd'; import { emit } from '../../emit.js'function Header() {const handleChange =(val) => {// 發(fā)送消息emit.emit('change_language', val);}return (<div className={styles.header_container}><p className={styles.header_name}></p><Select defaultValue="English" onChange={handleChange}><Option value="en-US">English</Option><Option value="zh-CN">中文</Option></Select></div>) }export default Header;

5.國際化

1. 業(yè)務(wù)組件的國際化

以claimsManage.js為例：

import intl from 'react-intl-universal'; // 引入

原先寫死的部分改成intl.get(key)

2.單獨(dú)抽取出的js文件的國際化

如果直接在js文件中引入react-intl-universal并使用intl.get(label)，傳遞給searchBoard組件的label為空，需要將原先導(dǎo)出對(duì)象，改寫成一個(gè)function，這樣就可以在locales的國際化初始化完成的后，再生成新的配置對(duì)象，改寫后內(nèi)容如下：

import intl from 'react-intl-universal';const SearchFormSetting = () => ({lineNum: 4,data: [{type: 'TextField',initialValue: '',label: intl.get('ReportNumber'),key: 'claimId',},{type: 'DatePickerField',initialValue: '',label: intl.get('ReportStartTime'),longLabel: true,key: 'reportStartTime'},{type: 'DatePickerField',initialValue: '',longLabel: true,label: intl.get('ReportEndTime'),key: 'reportEndTime'},]} ) export default SearchFormSetting

3.其他

1）帶變量的消息

get方法的第二個(gè)參數(shù)中的變量name、where將會(huì)被替換成字符串

組件：

<p>{intl.get('HELLO', { name: 'Tony',where:intl.get('where') }) }</p>

en-US.json

"where": "Hangzhou", "HELLO": "Hello {name}，welcome to {where}!"

zh-CN.json

"where": "杭州","HELLO": "你好 {name}，歡迎來到{where}！"

2）數(shù)字：復(fù)數(shù)形式和千分符

組件：

<p>{intl.get('CHANCE', { num: 0 })}</p> <p>{intl.get('CHANCE', { num: 1 })}</p> <p>{intl.get('CHANCE', { num: 10000000 })}</p>

en-US.json

"CHANCE": "rest chances：{num, plural, =0 {none.} =1 {one chance.} other {# chances.}}"

zh-CN.json

"CHANCE": "剩余次數(shù)為{num, plural, =0 {零。} =1 {1次。} other {# 次.}}"

3）顯示貨幣

語言環(huán)境數(shù)據(jù)采用ICU格式。
語法為{名稱，類型，格式}。
在如下示例中：
price是消息中的變量名稱
類型有number，date，和time。
format是可選的，如果format是貨幣代碼之一，它將以相應(yīng)的貨幣格式顯示。
如果type為number和format省略，則結(jié)果為帶千分符的格式化數(shù)字。

組件：

{intl.get('SALE_PRICE', { price: 123456.78 })}

en-US.json

"SALE_PRICE": "The price is {price, number, USD}"

zh-CN.json

"SALE_PRICE": "價(jià)格是 {price, number, CNY}"

貨幣代碼對(duì)照表

4）顯示日期

type為date，則format具short、medium、long、full四個(gè)值，不同type對(duì)日期描述的詳盡程度也不同，不穿默認(rèn)為short

組件：

{intl.get('SALE_START', { start: new Date() })} {intl.get('SALE_END', { end: new Date() })}

en-US.json

"SALE_START": "Sale begins from {start, date}", "SALE_END": " to {end, date, long}"

zh-CN.json

"SALE_START": "活動(dòng)從{start, date}開始，", "SALE_END": "{end, date, long}結(jié)束"

type - short

type - meduim（英：月份簡寫）

type - long（英：月份全稱）

type - full（具體到星期）

5）設(shè)置默認(rèn)值

組件：

class Locale extends React.Component {render() {const name = 'Tony';return (<div>{intl.get('HELLO', { name }).defaultMessage(`Hello, ${name}`)}</div>);} }

en-US.json

"HELLO": "Hello, {name}"

zh-CN.json

"HELLO": "你好, {name}"

6）返回HTML

組件：

{intl.getHTML('TIP')}

en-US.json

"TIP": "This is <span style='color:red'>SPAN</span>"

zh-CN.json

"TIP": "<span style='color:red'>span元素</span>"

總結(jié)

以上是生活随笔為你收集整理的前端使用react-intl-universal进行国际化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。