Advanced formatting

    The message formatting examples in the next two subsections will use a message bundle with a guestInfo message as follows:

    Replacing tokens in widgets

    I18n-aware widgets can use the format function returned from to perform simple token replacement in their messages.

    The guestInfo message can be rendered directly via format:

    1. import { create, tsx } from '@dojo/framework/core/vdom';
    2. import i18n from '@dojo/framework/core/middleware/i18n';
    4. import nlsBundle from '../nls/main';
    6. const factory = create({ i18n });
    8. export default factory(function MyI18nWidget({ middleware: { i18n } }) {
    9.     const { format } = i18n.localize(nlsBundle);
    11.     return (
    12.         <div>
    13.             {format('guestInfo', {
    14.                 host: 'Margaret Mead',
    15.                 guest: 'Laura Nader'
    16.             })}
    17.         </div>
    18.         // Will render as 'Margaret Mead invites Laura Nader to the party.'
    19.     );
    20. });

    Direct token replacement formatting

    ICU message formatting

    @dojo/framework/i18n relies on Globalize.js for , and as such all of the features offered by Globalize.js are available through @dojo/framework/i18n.

    The message formatting examples in the next two subsections will use a message bundle with an updated guestInfo message as follows:

    1.     messages: {
    2.         guestInfo: `{gender, select,
    3.             female {
    4.                 {guestCount, plural, offset:1
    5.                 =0 {{host} does not give a party.}
    6.                 =1 {{host} invites {guest} to her party.}
    7.                 =2 {{host} invites {guest} and one other person to her party.}
    8.                 other {{host} invites {guest} and # other people to her party.}}}
    10.                 {guestCount, plural, offset:1
    11.                 =0 {{host} does not give a party.}
    12.                 =1 {{host} invites {guest} to his party.}
    13.                 =2 {{host} invites {guest} and one other person to his party.}
    14.                 other {{host} invites {guest} and # other people to his party.}}}
    15.             other {
    16.                 {guestCount, plural, offset:1
    17.                 =0 {{host} does not give a party.}
    18.                 =1 {{host} invites {guest} to their party.}
    19.                 =2 {{host} invites {guest} and one other person to their party.}
    20.                 other {{host} invites {guest} and # other people to their party.}}}}`
    21.     }
    22. };

    ICU message formatting in widgets

    I18n-aware widgets can use the format function returned from to perform ICU message formatting in the same way as for simple token replacement described above.

    The ICU-formatted guestInfo message can then be rendered as:

    Direct ICU message formatting

    The ICU-formatted guestInfo message can be converted directly with the format method included on the object returned by localizeBundle.

    1. import { localizeBundle } from '@dojo/framework/i18n/i18n';
    2. import bundle from 'nls/main';
    4. // 1. Load the messages for the locale.
    5. localizeBundle(bundle, { locale: 'en' }).then(({ format }) => {
    6.     const message = format('guestInfo', {
    7.         gender: 'female',
    8.         guest: 'Laura Nader',
    9.         guestCount: 20
    10.     });
    11.     console.log(message); // "Margaret Mead invites Laura Nader and 19 other people to her party."
    13.     console.log(
    14.         format('guestInfo', {
    15.             host: 'Marshall Sahlins',
    16.             gender: 'male',
    17.             guest: 'Bronisław Malinowski'
    18.         })
    19.     ); // "Marshall Sahlins invites Bronisław Malinowski to his party."
    20. });

    Date and number formatting.

    As with the message formatting capabilities, @dojo/framework/i18n relies on Globalize.js to provide locale-specific formatting for dates, times, currencies, numbers, and units. The formatters themselves are essentially light wrappers around their Globalize.js counterparts, which helps maintain consistency with the Dojo ecosystem and prevents the need to work with the object directly. Unlike the message formatters, the date, number, and unit formatters are not cached, as they have a more complex set of options. As such, executing the various “get formatter” methods multiple times with the same inputs does not return the exact same function object.

    @dojo/framework/i18n groups the various formatters accordingly: date and time formatters (@dojo/framework/i18n/date); number, currency, and pluralization formatters (@dojo/framework/i18n/number); and unit formatters (@dojo/framework/i18n/unit). Each method corresponds to a Globalize.js method (see below), and each method follows the same basic format: the last argument is an optional locale, and the penultimate argument is the method options. If specifying a locale but no options, pass null as the options argument. If no locale is provided, then the current (i18n.locale) is assumed.

    @dojo/framework/i18n/date methods:

    @dojo/framework/i18n/number methods:

    • getUnitFormatter =>