intl-messageformat

Formats ICU Message strings with number, date, plural, and select placeholders to create localized messages.

Intl MessageFormat

Formats ICU Message strings with number, date, plural, and select placeholders to create localized messages.

Overview

Goals

This package aims to provide a way for you to manage and format your JavaScript app's string messages into localized strings for people using your app. You can use this package in the browser and on the server via Node.js.

This implementation is based on the Strawman proposal, but there are a few places this implementation diverges.

Note: This IntlMessageFormat API may change to stay in sync with ECMA-402, but this package will follow semver.

How It Works

Messages are provided into the constructor as a String message, or a pre-parsed AST object.

var msg = new IntlMessageFormat(message, locales, [formats]);

The string message is parsed, then stored internally in a compiled form that is optimized for the format() method to produce the formatted string for display to the user.

var output = msg.format(values);

Common Usage Example

A very common example is formatting messages that have numbers with plural lables. With this package you can make sure that the string is properly formatted for a person's locale, e.g.:

var MESSAGES = {
    'en-US': {
        NUM_PHOTOS: 'You have {numPhotos, plural, ' +
            '=0 {no photos.}' +
            '=1 {one photo.}' +
            'other {# photos.}}'
    },
 
    'es-MX': {
        NUM_PHOTOS: 'Usted {numPhotos, plural, ' +
            '=0 {no tiene fotos.}' +
            '=1 {tiene una foto.}' +
            'other {tiene # fotos.}}'
    }
};
 
var output;
 
var enNumPhotos = new IntlMessageFormat(MESSAGES['en-US'].NUM_PHOTOS, 'en-US');
output = enNumPhotos.format({numPhotos: 1000});
console.log(output); // => "You have 1,000 photos." 
 
var esNumPhotos = new IntlMessageFormat(MESSAGES['es-MX'].NUM_PHOTOS, 'es-MX');
output = esNumPhotos.format({numPhotos: 1000});
console.log(output); // => "Usted tiene 1,000 fotos." 

Message Syntax

The message syntax that this package uses is not proprietary, in fact it's a common standard message syntax that works across programming languages and one that professional translators are familiar with. This package uses the ICU Message syntax and works for all CLDR languages which have pluralization rules defined.

Features

• Uses industry standards: ICU Message syntax and CLDR locale data.

• Supports plural and select message arguments.

• Formats numbers and dates/times in messages using Intl.NumberFormat and Intl.DateTimeFormat, respectively.

• Optimized for repeated calls to an IntlMessageFormat instance's format() method.

• Supports defining custom format styles/options.

• Supports escape sequences for message syntax chars, e.g.: "\\{foo\\}" will output: "{foo}" in the formatted output instead of interpreting it as a foo argument.

Usage

Intl Dependency

This package assumes that the Intl global object exists in the runtime. Intl is present in all modern browsers except Safari, and there's work happening to integrate Intl into Node.js.

Luckly, there's the Intl.js polyfill! You will need to conditionally load the polyfill if you want to support runtimes which Intl is not already built-in.

Loading Intl.js Polyfill in a browser

If the browser does not already have the Intl APIs built-in, the Intl.js Polyfill will need to be loaded on the page along with the locale data for any locales that need to be supported:

<script src="intl/Intl.min.js"></script>
<script src="intl/locale-data/jsonp/en-US.js"></script>

Note: Modern browsers already have the Intl APIs built-in, so you can load the Intl.js Polyfill conditionally, by for checking for window.Intl.

Loading Intl.js Polyfill in Node.js

Conditionally require the Intl.js Polyfill if it doesn't already exist in the runtime. As of Node <= 0.10, this polyfill will be required.

if (!global.Intl) {
    require('intl');
}

Note: When using the Intl.js Polyfill in Node.js, it will automatically load the locale data for all supported locales.

Loading Intl MessageFormat in a browser

<script src="intl-messageformat/intl-messageformat.min.js"></script>

By default, Intl MessageFormat ships with the locale data for English built-in to the runtime library. When you need to format data in another locale, include its data; e.g., for French:

<script src="intl-messageformat/locale-data/fr.js"></script>

Note: All 150+ locales supported by this package use their root BCP 47 langage tag; i.e., the part before the first hyphen (if any).

Using Raw Git CDN

If you'd like to load this package via a CDN, instead of hosting it yourself, one option is using Raw Git. Be sure to reference a dist/ file using a Git tag:

<script src="https://cdn.rawgit.com/yahoo/intl-messageformat/v1.0.1/dist/intl-messageformat.min.js"></script>

Loading Intl MessageFormat in Node.js

Simply require() this package:

var IntlMessageFormat = require('intl-messageformat');

Note: in Node.js, the data for all 150+ locales is loaded along with the library.

Public API

IntlMessageFormat Constructor

To create a message to format, use the IntlMessageFormat constructor. The constructor takes three parameters:

• message - {String | AST} - String message (or pre-parsed AST) that serves as formatting pattern.

• locales - {String | String[]} - A string with a BCP 47 language tag, or an array of such strings. If you do not provide a locale, the default locale will be used, but you should always provide one!

• [formats] - {Object} - Optional object with user defined options for format styles.

var msg = new IntlMessageFormat('My name is {name}.', 'en-US');

format(values) Method

Once the message is created, formatting the message is done by calling the format() method on the instance and passing a collection of values:

var output = msg.format({name: "Eric"});
console.log(output); // => "My name is Eric." 

Note: A value must be supplied for every argument in the message pattern the instance was constructed with.

User Defined Formats

Define custom format styles is useful you need supply a set of options to the underlying formatter; e.g., outputting a number in USD:

var msg = new IntlMessageFormat('The price is: {price, number, USD}', 'en-US', {
    number: {
        USD: {
            style   : 'currency',
            currency: 'USD'
        }
    }
});
 
var output = msg.format({price: 100});
console.log(output); // => "The price is: $100.00" 

In this example, we're defining a USD number format style which is passed to the underlying Intl.NumberFormat instance as its options.

Examples

Plural Label

This example shows how to use the ICU Message syntax to define a message that has a plural label; e.g., "You have 10 photos":

You have {numPhotos, plural,
    =0 {no photos.}
    =1 {one photo.}
    other {# photos.}
}

var MESSAGES = {
    photos: '...', // String from code block above. 
    ...
};
 
var msg = new IntlMessageFormat(MESSAGES.photos, 'en-US');
 
console.log(msg.format({numPhotos: 0}));    // => "You have no photos." 
console.log(msg.format({numPhotos: 1}));    // => "You have one photo." 
console.log(msg.format({numPhotos: 1000})); // => "You have 1,000 photos." 

Note how when numPhotos was 1000, the number is formatted with the correct thousands separator.

License

This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.