高级格式化

在部件中替换标记

支持 i18n 的部件可使用 i18n 中间件的 localize 方法返回的 format 函数在其消息中执行简单的标记替换。

可直接使用 format 渲染 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',
                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 消息格式化功能

支持 i18n 的部件可使用 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."
});