1 | <div class="main-title">
|
2 | <img align="right" width="100" height="100" src="https://messageformat.github.io/messageformat/logo/messageformat.svg">
|
3 | <a class="badge" href="http://travis-ci.org/messageformat/messageformat"><img src="https://secure.travis-ci.org/messageformat/messageformat.svg" alt="Build Status"></a>
|
4 | <h1>messageformat</h1>
|
5 | </div>
|
6 |
|
7 | The experience and subtlety of your program's text can be important. Messageformat is a mechanism for handling both **pluralization** and **gender** in your applications. It can also lead to much better translations, as it's designed to support [all the languages](http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html) included in the [Unicode CLDR](http://cldr.unicode.org/).
|
8 |
|
9 | The ICU has an [official guide](http://userguide.icu-project.org/formatparse/messages) for the format. Messageformat supports and extends all parts of the [standard](http://icu-project.org/apiref/icu4j/com/ibm/icu/text/MessageFormat.html), with the exception of the deprecated ChoiceFormat.
|
10 |
|
11 | There is a good slide-deck on [Plural and Gender in Translated Messages](https://docs.google.com/presentation/d/1ZyN8-0VXmod5hbHveq-M1AeQ61Ga3BmVuahZjbmbBxo/pub?start=false&loop=false&delayms=3000#slide=id.g1bc43a82_2_14) by Markus Scherer and Mark Davis. But, again, remember that many of these problems apply even if you're only outputting english.
|
12 |
|
13 | ## What problems does it solve?
|
14 |
|
15 | Using messageformat, you can separate your code from your text formatting, while enabling much more humane expressions. In other words, you won't need to see this anymore in your output:
|
16 |
|
17 | > There are 1 results.<br>
|
18 | > There are 2 result(s).<br>
|
19 | > Number of results: 3.
|
20 |
|
21 | On a more fundamental level, messageformat and its associated tools can help you build an effective workflow for UI texts and translations, keeping message sources in human-friendly formats, compiling them into JavaScript during your build phase, and making them easy to use from your application code.
|
22 |
|
23 | ## What does it look like?
|
24 |
|
25 | With this message:
|
26 |
|
27 | ```js
|
28 | const msgSrc = `{GENDER, select,
|
29 | male {He}
|
30 | female {She}
|
31 | other {They}
|
32 | } found {RES, plural,
|
33 | =0 {no results}
|
34 | one {1 result}
|
35 | other {# results}
|
36 | }.`;
|
37 | ```
|
38 |
|
39 | You'll get these results:
|
40 |
|
41 | ```js
|
42 | const MessageFormat = require('messageformat');
|
43 | const mf = new MessageFormat('en');
|
44 | const msg = mf.compile(msgSrc);
|
45 |
|
46 | msg({ GENDER: 'male', RES: 1 }); // 'He found 1 result.'
|
47 | msg({ GENDER: 'female', RES: 1 }); // 'She found 1 result.'
|
48 | msg({ GENDER: 'male', RES: 0 }); // 'He found no results.'
|
49 | msg({ RES: 2 }); // 'They found 2 results.'
|
50 | ```
|
51 |
|
52 | ## Getting Started
|
53 |
|
54 | To install just the core package, use:
|
55 |
|
56 | ```
|
57 | npm install messageformat
|
58 | ```
|
59 |
|
60 | This includes the MessageFormat compiler and a runtime accessor class that provides a slightly nicer API for working with larger numbers of messages. Our [Format Guide] will help with the ICU MessageFormat Syntax, and the [Build-time Compilation Guide] provides some options for integrating messageformat to be a part of your workflow around UI texts and translations.
|
61 |
|
62 | [format guide]: https://messageformat.github.io/messageformat/page-guide
|
63 | [build-time compilation guide]: https://messageformat.github.io/messageformat/page-build
|