高级格式化

消息格式化

基本令牌替换

Dojo 的 i18n 框架支持 ICU 消息格式化，它也支持基本令牌替换。

接下来的两个小节中的消息格式化示例将使用一个消息包，其中包含一个名为 guestInfo 的消息，如下所示

nls/main.ts

export default {
	messages: {
		guestInfo: '{host} invites {guest} to the party.'
	}
};

在小部件中替换令牌

支持国际化的小部件可以使用从 i18n 中间件的 localize 方法返回的 format 函数，在其消息中执行简单的令牌替换。

guestInfo 消息可以直接通过 format 渲染

widgets/MyI18nWidget.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import i18n from '@dojo/framework/core/middleware/i18n';

import nlsBundle from '../nls/main';

const factory = create({ i18n });

export default factory(function MyI18nWidget({ middleware: { i18n } }) {
	const { format } = i18n.localize(nlsBundle);

	return (
		<div>
			{format('guestInfo', {
				host: 'Margaret Mead',
				guest: 'Laura Nader'
			})}
		</div>
		// Will render as 'Margaret Mead invites Laura Nader to the party.'
	);
});

直接令牌替换格式化

从 i18n 模块的 localizeBundle 函数返回的对象包含一个处理消息格式化的 format 方法

import { localizeBundle } from '@dojo/framework/i18n/i18n';
import bundle from 'nls/main';

localizeBundle(bundle, { locale: 'en' }).then(({ format }) => {
	const message = format('guestInfo', {
		host: 'Margaret Mead',
		guest: 'Laura Nader'
	});
	console.log(message); // "Margaret Mead invites Laura Nader to the party."
});

ICU 消息格式化

@dojo/framework/i18n 依赖于 Globalize.js 来实现 ICU 消息格式化，因此 @dojo/framework/i18n 提供了 Globalize.js 的所有功能。

接下来的两个小节中的消息格式化示例将使用一个消息包，其中包含一个更新后的 guestInfo 消息，如下所示

nls/main.ts

export default {
	messages: {
		guestInfo: `{gender, select,
			female {
				{guestCount, plural, offset:1
				=0 {{host} does not give a party.}
				=1 {{host} invites {guest} to her party.}
				=2 {{host} invites {guest} and one other person to her party.}
				other {{host} invites {guest} and # other people to her party.}}}
			male {
				{guestCount, plural, offset:1
				=0 {{host} does not give a party.}
				=1 {{host} invites {guest} to his party.}
				=2 {{host} invites {guest} and one other person to his party.}
				other {{host} invites {guest} and # other people to his party.}}}
			other {
				{guestCount, plural, offset:1
				=0 {{host} does not give a party.}
				=1 {{host} invites {guest} to their party.}
				=2 {{host} invites {guest} and one other person to their party.}
				other {{host} invites {guest} and # other people to their party.}}}}`
	}
};

在小部件中进行 ICU 消息格式化

支持国际化的小部件可以使用从其 localizeBundle 方法返回的 format 函数，以与上面描述的简单令牌替换相同的方式执行 ICU 消息格式化。

然后，可以使用以下方式渲染经过 ICU 格式化的 guestInfo 消息

widgets/MyI18nWidget.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import i18n from '@dojo/framework/core/middleware/i18n';

import nlsBundle from '../nls/main';

const factory = create({ i18n });

export default factory(function MyI18nWidget({ middleware: { i18n } }) {
	const { format } = i18n.localize(nlsBundle);

	return (
		<div>
			{
			format('guestInfo', {
				host: 'Margaret Mead',
				gender: 'female',
				guest: 'Laura Nader',
				guestCount: 20
			})
			}
		</div>
		]); // Will render as 'Margaret Mead invites Laura Nader and 19 other people to her party.'
	);
});

直接 ICU 消息格式化

可以使用 localizeBundle 返回的对象中包含的 format 方法直接转换经过 ICU 格式化的 guestInfo 消息。

import { localizeBundle } from '@dojo/framework/i18n/i18n';
import bundle from 'nls/main';

// 1. Load the messages for the locale.
localizeBundle(bundle, { locale: 'en' }).then(({ format }) => {
	const message = format('guestInfo', {
		host: 'Margaret Mead',
		gender: 'female',
		guest: 'Laura Nader',
		guestCount: 20
	});
	console.log(message); // "Margaret Mead invites Laura Nader and 19 other people to her party."

	console.log(
		format('guestInfo', {
			host: 'Marshall Sahlins',
			gender: 'male',
			guest: 'Bronisław Malinowski'
		})
	); // "Marshall Sahlins invites Bronisław Malinowski to his party."
});

日期和数字格式化。

与消息格式化功能一样，@dojo/framework/i18n 依赖于 Globalize.js 来提供针对日期、时间、货币、数字和单位的特定于区域设置的格式化。格式化程序本身本质上是对 Globalize.js 对应项的轻量级包装器，这有助于保持与 Dojo 生态系统的兼容性，并避免直接使用 Globalize 对象。与消息格式化程序不同，日期、数字和单位格式化程序不会被缓存，因为它们具有更复杂的选项集。因此，使用相同输入多次执行各种“获取格式化程序”方法不会返回完全相同的函数对象。

@dojo/framework/i18n 将各种格式化程序分组在一起：日期和时间格式化程序 (@dojo/framework/i18n/date)；数字、货币和复数格式化程序 (@dojo/framework/i18n/number)；以及单位格式化程序 (@dojo/framework/i18n/unit)。每个方法对应于一个 Globalize.js 方法（见下文），并且每个方法都遵循相同的基本格式：最后一个参数是可选的区域设置，倒数第二个参数是方法选项。如果指定区域设置但没有选项，则将 null 作为 options 参数传递。如果没有提供区域设置，则假定使用当前 (i18n.locale) 区域设置。

import { formatDate, getDateFormatter, formatRelativeTime } from '@dojo/framework/i18n/date';
import { formatCurrency, getCurrencyFormatter } from '@dojo/framework/i18n/number';
import { formatUnit, getUnitFormatter } from '@dojo/framework/i18n/unit';

const date = new Date(1815, 11, 10, 11, 27);

// Assume the current locale is "en"
const enDateFormatter = getDateFormatter({ datetime: 'medium' });
enDateFormatter(date); // Dec 10, 1815, 11:27:00 AM
formatDate(date, { date: 'short' }); // 12/10/15

const frDateFormatter = getDateFormatter({ datetime: 'medium' }, 'fr');
frDateFormatter(date); // 10 déc. 1815 à 11:27:00
formatDate(date, { date: 'short' }, 'fr'); // 10/12/1815

formatRelativeTime(-1, 'week'); // "last week"
formatRelativeTime(-1, 'week', { form: 'short' }); // "last wk."
formatRelativeTime(-3, 'week', null, 'fr'); // "il y a 3 semaines"
formatRelativeTime(-3, 'week', { form: 'short' }, 'fr'); // "il y a 3 sem."

const enCurrencyFormatter = getCurrencyFormatter('USD', { style: 'code' });
enCurrencyFormatter(1234.56); // "1,234.56 USD"
formatCurrency(12345.56, 'USD', { style: 'code' }); // "1,234.56 USD"

const frCurrencyFormatter = getCurrencyFormatter('EUR', { style: 'code' }, 'fr');
frCurrencyFormatter(1234.56); // "1 234,56 EUR"
formatCurrency(12345.56, 'EUR', { style: 'code' }, 'fr'); // "1 234,56 EUR"

const enUnitFormatter = getUnitFormatter('feet', { form: 'narrow' });
enUnitFormatter(5280); // 5,280′
formatUnit(5280, 'feet', { form: 'narrow' }); // 5,280′

const frUnitFormatter = getUnitFormatter('meter', null, 'fr');
frUnitFormatter(1000); // 1 000 mètres'
formatUnit(1000, 'meter', null, 'fr); // 1 000 mètres'

@dojo/framework/i18n/date 方法

formatDate => Globalize.formatDate
formatRelativeTime => Globalize.formatRelativeTime
getDateFormatter => Globalize.dateFormatter
getDateParser => Globalize.dateParser
getRelativeTimeFormatter => Globalize.relativeTimeFormatter
parseDate => Globalize.parseDate

@dojo/framework/i18n/number 方法

formatCurrency => Globalize.formatCurrency
formatNumber => Globalize.formatNumber
getCurrencyFormatter => Globalize.currencyFormatter
getNumberFormatter => Globalize.numberFormatter
getNumberParser => Globalize.numberParser
getPluralGenerator => Globalize.pluralGenerator
parseNumber => Globalize.parseNumber
pluralize => Globalize.plural

@dojo/framework/i18n/unit 方法

formatUnit => Globalize.formatUnit
getUnitFormatter => Globalize.unitFormatter