Format a string with placeholders, including plural and select support to create localized messages.
This package aims to provide a way for you to manage and format your JavaScript app's string-based messages into localized string 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 Draft. There are a few places this implementation diverges from the strawman draft.
Note: This IntlMessageFormat API may change to stay in sync with ECMA-402.
Messages are provided into the constructor as String message, or pre-parsed AST.
var msg = new IntlMessageFormat(message, locales, [formats]);The string message is parsed, then stored internally in a compiled form that is optomized for generating the formatted string via the format() method.
var output = msg.format(values);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."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.
-
Follows ICU Message and CLDR standards.
-
Supports plural and select message arguments.
-
Formats numbers and dates/times in messages using
Intl.NumberFormatandIntl.DateTimeFormat, respectively. -
Optimized for repeated calls to an
IntlMessageFormatinstance'sformat()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 afooargument.
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.
To create a message to format, use the IntlMessageFormat constructor. The constructor has 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.
// Conditionally load the Intl.js polyfill.
global.Intl || require('intl');
var IntlMessageFormat = require('intl-messageformat');
var msg = new IntlMessageFormat('My name is {name}.', 'en-US');<script src="https://cdn.rawgit.com/yahoo/intl-messageformat/v1.0.0-rc-1/dist/intl-messageformat.min.js"></script>
<script>
var msg = new IntlMessageFormat('My name is {name}.', 'en-US');
</script>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.
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.
This software is free to use under the Yahoo! Inc. BSD license. See the LICENSE file for license text and copyright information.