|
| 1 | +--- |
| 2 | +title: Internationalization |
| 3 | +slug: Web/JavaScript/Guide/Internationalization |
| 4 | +page-type: guide |
| 5 | +--- |
| 6 | + |
| 7 | +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Iterators_and_generators", "Web/JavaScript/Guide/Meta_programming")}} |
| 8 | + |
| 9 | +The {{jsxref("Intl")}} object is the namespace for the ECMAScript Internationalization API, which provides a wide range of locale- and culture-sensitive data and operations. |
| 10 | + |
| 11 | +## Date and time formatting |
| 12 | + |
| 13 | +The {{jsxref("Intl.DateTimeFormat")}} object is useful for formatting date and time. The following formats a date for English as used in the United States. (The result is different in another time zone.) |
| 14 | + |
| 15 | +```js |
| 16 | +// July 17, 2014 00:00:00 UTC: |
| 17 | +const july172014 = new Date("2014-07-17"); |
| 18 | + |
| 19 | +const options = { |
| 20 | + year: "2-digit", |
| 21 | + month: "2-digit", |
| 22 | + day: "2-digit", |
| 23 | + hour: "2-digit", |
| 24 | + minute: "2-digit", |
| 25 | + timeZoneName: "short", |
| 26 | +}; |
| 27 | +const americanDateTime = new Intl.DateTimeFormat("en-US", options).format; |
| 28 | + |
| 29 | +// Local timezone vary depending on your settings |
| 30 | +// In CEST, logs: 07/17/14, 02:00 AM GMT+2 |
| 31 | +// In PDT, logs: 07/16/14, 05:00 PM GMT-7 |
| 32 | +console.log(americanDateTime(july172014)); |
| 33 | +``` |
| 34 | + |
| 35 | +## Number formatting |
| 36 | + |
| 37 | +The {{jsxref("Intl.NumberFormat")}} object is useful for formatting numbers, for example currencies. |
| 38 | + |
| 39 | +```js |
| 40 | +const gasPrice = new Intl.NumberFormat("en-US", { |
| 41 | + style: "currency", |
| 42 | + currency: "USD", |
| 43 | + minimumFractionDigits: 3, |
| 44 | +}); |
| 45 | + |
| 46 | +console.log(gasPrice.format(5.259)); // $5.259 |
| 47 | + |
| 48 | +const hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec", { |
| 49 | + style: "currency", |
| 50 | + currency: "CNY", |
| 51 | +}); |
| 52 | + |
| 53 | +console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五 |
| 54 | +``` |
| 55 | + |
| 56 | +## Collation |
| 57 | + |
| 58 | +The {{jsxref("Intl.Collator")}} object is useful for comparing and sorting strings. |
| 59 | + |
| 60 | +For example, there are actually two different sort orders in German, _phonebook_ and _dictionary_. Phonebook sort emphasizes sound, and it's as if "ä", "ö", and so on were expanded to "ae", "oe", and so on prior to sorting. |
| 61 | + |
| 62 | +```js |
| 63 | +const names = ["Hochberg", "Hönigswald", "Holzman"]; |
| 64 | + |
| 65 | +const germanPhonebook = new Intl.Collator("de-DE-u-co-phonebk"); |
| 66 | + |
| 67 | +// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]: |
| 68 | +console.log(names.sort(germanPhonebook.compare).join(", ")); |
| 69 | +// "Hochberg, Hönigswald, Holzman" |
| 70 | +``` |
| 71 | + |
| 72 | +Some German words conjugate with extra umlauts, so in dictionaries it's sensible to order ignoring umlauts (except when ordering words differing _only_ by umlauts: _schon_ before _schön_). |
| 73 | + |
| 74 | +```js |
| 75 | +const germanDictionary = new Intl.Collator("de-DE-u-co-dict"); |
| 76 | + |
| 77 | +// as if sorting ["Hochberg", "Honigswald", "Holzman"]: |
| 78 | +console.log(names.sort(germanDictionary.compare).join(", ")); |
| 79 | +// "Hochberg, Holzman, Hönigswald" |
| 80 | +``` |
| 81 | + |
| 82 | +For more information about the {{jsxref("Intl")}} API, see also [Introducing the JavaScript Internationalization API](https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/). |
| 83 | + |
| 84 | +{{PreviousNext("Web/JavaScript/Guide/Iterators_and_generators", "Web/JavaScript/Guide/Meta_programming")}} |
0 commit comments