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.
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 displaying to the user.
varoutput=msg.format(values);
Common Usage Example
A very common example is formatting messages that have numbers with plural labels. With this package you can make sure that the string is properly formatted for a person's locale, e.g.:
varMESSAGES={'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.}}'}};varoutput;varenNumPhotos=newIntlMessageFormat(MESSAGES['en-US'].NUM_PHOTOS,'en-US');output=enNumPhotos.format({numPhotos: 1000});console.log(output);// => "You have 1,000 photos."varesNumPhotos=newIntlMessageFormat(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.
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
Modern Intl Dependency
This package assumes that the Intl global object exists in the runtime. Intl is present in all modern browsers (IE11+) and Node (with full ICU). The Intl methods we rely on are:
Intl.NumberFormat for number formatting (can be polyfilled using Intl.js)
Intl.DateTimeFormat for date time formatting (can be polyfilled using Intl.js)
Intl.PluralRules for plural/ordinal formatting (can be polyfilled using intl-pluralrules)
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. When an array of locales is provided, each item and its ancestor locales are checked and the first one with registered locale data is returned. See: Locale Resolution for more details.
[formats] - {Object} - Optional object with user defined options for format styles.
varmsg=newIntlMessageFormat('My name is {name}.','en-US');
Locale Resolution
IntlMessageFormat uses Intl.NumberFormat.supportedLocalesOf() to determine which locale data to use based on the locales value passed to the constructor. The result of this resolution process can be determined by call the resolvedOptions() prototype method.
resolvedOptions() Method
This method returns an object with the options values that were resolved during instance creation. It currently only contains a locale property; here's an example:
Notice how the specified locale was the all lower-case value: "en-us", but it was resolved and normalized to: "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:
varoutput=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:
varmsg=newIntlMessageFormat('The price is: {price, number, USD}','en-US',{number: {USD: {style : 'currency',currency: 'USD'}}});varoutput=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.}
}
varMESSAGES={photos: '...',// String from code block above.
...
};varmsg=newIntlMessageFormat(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.
请发表评论