Skip to content
Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
b9446d3
Intl.NumberFormat - flyby fixes
hamishwillee Jul 12, 2022
bb388ae
Intl.NumberFormat.formatRange() is experimental
hamishwillee Jul 12, 2022
fb5ad81
Apply suggestions from code review
hamishwillee Jul 12, 2022
870407e
Intl.PluralRules.selectRange() is experimental
hamishwillee Jul 12, 2022
5341b2c
Merge branch 'intl_numberformat_flyby' of https://github.com/hamishwi…
hamishwillee Jul 12, 2022
311069d
Update files/en-us/web/javascript/reference/global_objects/intl/numbe…
hamishwillee Jul 12, 2022
1e0c7e8
NumberFormat.resolvedOptions() - link to the actual options
hamishwillee Jul 12, 2022
339a747
Add information about formatRangeToParts() source property in returne…
hamishwillee Jul 12, 2022
ee1e843
formatRange/formatRangeToParts can throw range error
hamishwillee Jul 12, 2022
35bb2b4
NumberFormat.format() - add info on string handlign
hamishwillee Jul 12, 2022
ea804f0
Update index.md
Josh-Cena Jul 12, 2022
b2712f5
Update index.md
Josh-Cena Jul 12, 2022
600c399
Merge branch 'main' into intl_numberformat_flyby
hamishwillee Jul 18, 2022
3d5fcca
format() clarify string format
hamishwillee Jul 18, 2022
14a16d4
Update files/en-us/web/javascript/reference/global_objects/intl/numbe…
hamishwillee Jul 18, 2022
51cfe41
Update files/en-us/web/javascript/reference/global_objects/intl/numbe…
hamishwillee Jul 18, 2022
fb6033b
Update files/en-us/web/javascript/reference/global_objects/intl/numbe…
hamishwillee Jul 18, 2022
efc0a37
Update files/en-us/web/javascript/reference/global_objects/intl/numbe…
hamishwillee Jul 18, 2022
d1477d4
Update files/en-us/web/javascript/reference/global_objects/intl/numbe…
hamishwillee Jul 18, 2022
3306d17
Update files/en-us/web/javascript/reference/global_objects/intl/numbe…
hamishwillee Jul 18, 2022
1e9a580
formatrangetoparts - fix up return section
hamishwillee Jul 18, 2022
a55b388
Merge branch 'intl_numberformat_flyby' of https://github.com/hamishwi…
hamishwillee Jul 18, 2022
a87bcb3
resolvedOptions - put options into return value
hamishwillee Jul 18, 2022
6c4971c
Numerous minor layout changes
hamishwillee Jul 18, 2022
273d63c
Apply suggestions from code review
hamishwillee Jul 18, 2022
a7feb57
Fix using format anglicization
hamishwillee Jul 18, 2022
62729c4
Layout changes for consistency
hamishwillee Jul 18, 2022
558cd4e
Update files/en-us/web/javascript/reference/global_objects/intl/numbe…
hamishwillee Jul 18, 2022
87f9adf
Update files/en-us/web/javascript/reference/global_objects/intl/numbe…
hamishwillee Jul 18, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ browser-compat: javascript.builtins.Intl.NumberFormat.format
---
{{JSRef}}

The **`Intl.NumberFormat.prototype.format()`** method formats a
number according to the locale and formatting options of this
{{jsxref("Intl.NumberFormat")}} object.
The **`Intl.NumberFormat.prototype.format()`** method formats a number according to the [locale and formatting options](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#parameters) of this {{jsxref("Intl.NumberFormat")}} object.

{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-format.html", "taller")}}

Expand All @@ -31,19 +29,29 @@ format(number)
### Parameters

- `number`
- : A {{jsxref("Number")}} or {{jsxref("BigInt")}} to format.
- : A {{jsxref("Number")}}, {{jsxref("BigInt")}}, or string, to format.

## Description

The `format` getter function formats a number into a string according to the
locale and formatting options of this {{jsxref("Intl.NumberFormat")}} object.
The `format()` method formats a number into a string according to the locale and formatting options of this {{jsxref("Intl.NumberFormat")}} object.

> **Note:** Numbers in JavaScript suffer from loss of precision if they are too big or too small, making the text representation inaccurate. If you are formatting an integer larger than {{jsxref("Number.MAX_SAFE_INTEGER")}}, prefer using a {{jsxref("BigInt")}} instead.
>
> ```js
> new Intl.NumberFormat('en-US').format(1234567891234567891) // 1,234,567,891,234,568,000
> new Intl.NumberFormat('en-US').format(1234567891234567891n) // 1,234,567,891,234,567,891
> ```
{{jsxref("Number")}} values in JavaScript suffer from loss of precision if they are too big or too small, making the text representation inaccurate.
If you are formatting an integer larger than {{jsxref("Number.MAX_SAFE_INTEGER")}}, prefer using a {{jsxref("BigInt")}} instead.

```js
new Intl.NumberFormat('en-US').format(1234567891234567891) // 1,234,567,891,234,568,000
new Intl.NumberFormat('en-US').format(1234567891234567891n) // 1,234,567,891,234,567,891
```

A string passed to `format()` should be treated as an arbitrary-precision decimal string.
This allows very large strings to be formatted (note that this is intended for pass-through: not as a generic method for computation):

```js
new Intl.NumberFormat('en-US').format("1234567891234567891") // 1,234,567,891,234,567,891
```

> **Note:** Older versions of the specification treated strings as a {{jsxref("Number")}} rather than as a decimal.
> Check the compatibility table for your browser.

## Examples

Expand All @@ -62,10 +70,7 @@ console.log(numberFormat.format(654321.987));
### Using format with map

Use the `format` getter function for formatting all numbers in an array.
Note that the function is bound to the {{jsxref("Intl.NumberFormat")}} from which it was
obtained, so it can be passed directly to {{jsxref("Array.prototype.map")}}. This is
considered a historical artefact, as part of a convention which is no longer followed
for new features, but is preserved to maintain compatibility with existing programs.
Note that the function is bound to the {{jsxref("Intl.NumberFormat")}} from which it was obtained, so it can be passed directly to {{jsxref("Array.prototype.map")}}. This is considered a historical artefact, as part of a convention which is no longer followed for new features, but is preserved to maintain compatibility with existing programs.

```js
const a = [123456.789, 987654.321, 456789.123];
Expand All @@ -75,6 +80,35 @@ console.log(formatted.join('; '));
// → "123.456,789; 987.654,321; 456.789,123"
```

### Using format with a string

Using a string we can specify very numbers that are larger than {{jsxref("Number.MAX_SAFE_INTEGER")}} without losing precision.

```js
let numberFormat = new Intl.NumberFormat("en-US");

// Here the value is converted to a Number
console.log(numberFormat.format(987654321987654321))
// → 987,654,321,987,654,300

console.log(numberFormat.format("987654321987654321"));
// → 987,654,321,987,654,321
```

The specific string formatting version supported is the ECMA-262 "StringNumericLiteral" grammar, which also allows non-base-10 numbers like hexadecimal and binary.
This supports, for example, the general syntax for decimal strings: `#.#E#`.

```js
numberFormat = new Intl.NumberFormat("en-US");
const bigNum = 1000000000000000110000n;
console.log(numberFormat.format(bigNum));
// → "1,000,000,000,000,000,110,000"

//We can format as a string using the `E` syntax:
console.log(numberFormat.format(bigNum + "E-6"));
// → "1,000,000,000,000,000.11"
```

## Specifications

{{Specifications}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,14 @@ tags:
- Localization
- Method
- NumberFormat
- Experimental
- Prototype
- Reference
browser-compat: javascript.builtins.Intl.NumberFormat.formatRange
---
{{JSRef}}
{{JSRef}} {{SeeCompatTable}}

The **`Intl.NumberFormat.prototype.formatRange()`** method formats a range of
numbers according to the locale and formatting options of the
{{jsxref("Intl.NumberFormat")}} object from which the method is called.
The **`Intl.NumberFormat.prototype.formatRange()`** method formats a range of numbers according to the locale and formatting options of the {{jsxref("Intl.NumberFormat")}} object from which the method is called.

## Syntax

Expand All @@ -32,10 +31,16 @@ formatRange(startRange, endRange)
- `endRange`
- : A {{jsxref("Number")}} or {{jsxref("BigInt")}}.

### Exceptions

- {{jsxref("RangeError")}}
- : Thrown if `startRange` is less than `endRange`, or either value is `NaN`.
- {{jsxref("TypeError")}}
- : Thrown if either `startRange` or `endRange` is undefined.

## Description

The `formatRange` getter function formats a range of numbers into a string according to the
locale and formatting options of this {{jsxref("Intl.NumberFormat")}} object from which it is called.
The `formatRange` getter function formats a range of numbers into a string according to the locale and formatting options of this {{jsxref("Intl.NumberFormat")}} object from which it is called.

## Examples

Expand All @@ -51,6 +56,9 @@ const nf = new Intl.NumberFormat("en-US", {
});

console.log(nf.formatRange(3, 5)); // → "€3 – €5"

// Note: the "approximately equals" symbol is added if
// startRange and endRange round to the same values.
console.log(nf.formatRange(2.9, 3.1)); // → "~€3"
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,11 @@ browser-compat: javascript.builtins.Intl.NumberFormat.formatRangeToParts
---
{{JSRef}}

The **`Intl.Numberformat.prototype.formatRangeToParts()`** method
allows locale-aware formatting of strings produced by `NumberFormat`
formatters.
The **`Intl.Numberformat.prototype.formatRangeToParts()`** method enables locale-aware formatting of strings produced by `NumberFormat` formatters.

## Syntax

```js
formatRangeToParts()
formatRangeToParts(startRange, endRange)
```

Expand All @@ -38,12 +35,18 @@ formatRangeToParts(startRange, endRange)

An {{jsxref("Array")}} of objects containing the formatted range of numbers in parts.

### Exceptions

- {{jsxref("RangeError")}}
- : Thrown if `startRange` is less than `endRange`, or either value is `NaN`.
- {{jsxref("TypeError")}}
- : Thrown if either `startRange` or `endRange` is undefined.

## Description

The `formatRangeToParts()` method is useful when custom formatting ranges of number
strings. It returns an {{jsxref("Array")}} of objects containing the locale-specific
tokens from which it is possible to build custom strings while preserving the
locale-specific parts. The structure of the array the `formatRangeToParts()` method returns looks like this:
The `formatRangeToParts()` method is useful when you need to provide locale aware custom formatting ranges of number strings.
It returns an {{jsxref("Array")}} of objects containing the locale-specific tokens from which it is possible to build custom strings while preserving the locale-specific parts.
The structure of the array the `formatRangeToParts()` method returns looks like this:

```js
[
Expand All @@ -56,41 +59,47 @@ locale-specific parts. The structure of the array the `formatRangeToParts()` met

```

Possible types are the following:
Possible values for the `type` property include:

- currency
- : The currency string, such as the symbols "$" and "€" or the name "Dollar", "Euro",
depending on how `currencyDisplay` is specified.
- decimal
- `currency`
- : The currency string, such as the symbols "$" and "€" or the name "Dollar", "Euro", depending on how `currencyDisplay` is specified.
- `decimal`
- : The decimal separator string (".").
- fraction
- `fraction`
- : The fraction number.
- group
- `group`
- : The group separator string (",").
- infinity
- `infinity`
- : The {{jsxref("Infinity")}} string ("∞").
- integer
- `integer`
- : The integer number.
- literal
- `literal`
- : Any literal strings or whitespace in the formatted number.
- minusSign
- `minusSign`
- : The minus sign string ("-").
- nan
- `nan`
- : The {{jsxref("NaN")}} string ("NaN").
- plusSign
- `plusSign`
- : The plus sign string ("+").
- percentSign
- `percentSign`
- : The percent sign string ("%").
- unit
- : The unit string, such as the "l" or "litres", depending on how
`unitDisplay` is specified.
- `unit`
- : The unit string, such as the "l" or "litres", depending on how `unitDisplay` is specified.

Possible values for the `source` property include:

- `startRange`
- : The object is the start part of the range.
- `endRange`
- : The object is the end part of the range
- `shared`
- : The object is a "shared" part of the range, such as a separator or currency.

## Examples

### Comparing formatRange and formatRangeToParts

`NumberFormat` outputs localized, opaque strings that cannot be manipulated
directly:
`NumberFormat` outputs localized, opaque strings that cannot be manipulated directly:

```js
const startRange = 3500;
Expand All @@ -105,10 +114,8 @@ formatter.formatRange(startRange, endRange)
// "3.500,00–9.500,00 €"
```

However, for many user interfaces there is a need to customize the formatting of this
string. The `formatRangeToParts` method enables locale-aware formatting of
strings produced by `NumberFormat` formatters by providing you the string
in parts:
However, for many user interfaces there is a need to customize the formatting of this string.
The `formatRangeToParts` method enables locale-aware formatting of strings produced by `NumberFormat` formatters by providing you the string in parts:

```js
formatter.formatRangeToParts(startRange, endRange)
Expand All @@ -131,6 +138,7 @@ formatter.formatRangeToParts(startRange, endRange)
]
```


## Specifications

{{Specifications}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ The **`Intl.NumberFormat`** object enables language-sensitive number formatting.
- : Getter function that formats a number according to the locale and formatting options of this {{jsxref("Intl.NumberFormat")}} object.
- {{jsxref("Intl/NumberFormat/formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}
- : Returns an {{jsxref("Array")}} of objects representing the number string in parts that can be used for custom locale-aware formatting.
- {{jsxref("Intl/NumberFormat/formatRange", "Intl.NumberFormat.prototype.formatRange()")}}
- {{jsxref("Intl/NumberFormat/formatRange", "Intl.NumberFormat.prototype.formatRange()")}} {{experimental_inline}}
- : Getter function that formats a range of numbers according to the locale and formatting options of the {{jsxref("Intl.NumberFormat")}} object from which the method is called.
- {{jsxref("Intl/NumberFormat/formatRangeToParts", "Intl.NumberFormat.prototype.formatRangeToParts()")}}
- {{jsxref("Intl/NumberFormat/formatRangeToParts", "Intl.NumberFormat.prototype.formatRangeToParts()")}} {{experimental_inline}}
- : Returns an {{jsxref("Array")}} of objects representing the range of number strings in parts that can be used for custom locale-aware formatting.
- {{jsxref("Intl/NumberFormat/resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}
- : Returns a new object with properties reflecting the locale and collation options computed during initialization of the object.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -193,9 +193,11 @@ new Intl.NumberFormat(locales, options)
- `roundingIncrement` {{experimental_inline}}
- : Specifies the rounding-increment precision. Must be one of the following integers:
"`1`", " `2`", "`5`", "`10`", "`20`", " `25`", "`50`", "`100`", "`200`", "`250`", "`500`", "`1000`", "`2000`", "`2500`", " `5000`".

> **Note:** The `roundingIncrement` option controls the rounding increment to be used when formatting numbers:
- It indicates the increment at which rounding should take place relative to the calculated rounding magnitude.
- It cannot be mixed with significant-digits rounding or any setting of `roundingPriority` other than `auto`.
>
> - It indicates the increment at which rounding should take place relative to the calculated rounding magnitude.
> - It cannot be mixed with significant-digits rounding or any setting of `roundingPriority` other than `auto`.
>
> For example, if `maximumFractionDigits` is 2 and `roundingIncrement` is 5, then the number is rounded to the nearest 0.05 ("nickel rounding").
>
Expand All @@ -214,7 +216,6 @@ new Intl.NumberFormat(locales, options)
> ```
>
> If you set `minimumFractionDigits` and `maximumFractionDigits`, they must set them to the same value; otherwise a `RangeError` is thrown.
>

- `trailingZeroDisplay` {{experimental_inline}}
- : A string expressing the strategy for displaying trailing zeros on whole numbers. The default is "`auto`".
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ browser-compat: javascript.builtins.Intl.NumberFormat.resolvedOptions
---
{{JSRef}}

The **`Intl.NumberFormat.prototype.resolvedOptions()`** method
returns a new object with properties reflecting the locale and number formatting
options computed during initialization of this {{jsxref("Intl.NumberFormat")}} object.
The **`Intl.NumberFormat.prototype.resolvedOptions()`** method returns a new object with properties reflecting the [locale and number formatting options](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#parameters) computed during initialization of this {{jsxref("Intl.NumberFormat")}} object.
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI This is the main change to this doc - it adds a link to the actual formatting options (as well as the final object - which isn't all that interesting when you're wondering what the options it might return are)


{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-resolvedoptions.html")}}

Expand All @@ -30,8 +28,7 @@ resolvedOptions()

### Return value

A new object with properties reflecting the locale and number formatting options
computed during the initialization of the given {{jsxref("Intl.NumberFormat")}} object.
A new object with properties reflecting the [locale and number formatting options](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#parameters) computed during the construction of the given {{jsxref("Intl.NumberFormat")}} object.

## Description

Expand Down Expand Up @@ -67,14 +64,10 @@ The resulting object has the following properties:
Only one of the following two groups of properties is included:

- `minimumIntegerDigits`, `minimumFractionDigits`, `maximumFractionDigits`
- : The values provided for these properties in the `options` argument or
filled in as defaults. These properties are present only if neither
`minimumSignificantDigits` nor `maximumSignificantDigits`
was provided in the `options` argument.
- : The values provided for these properties in the `options` argument or filled in as defaults. These properties are present only if neither `minimumSignificantDigits` nor `maximumSignificantDigits` was provided in the `options` argument.
- `minimumSignificantDigits`, `maximumSignificantDigits`
- : The values provided for these properties in the `options` argument or
filled in as defaults. These properties are present only if at least one of them
was provided in the `options` argument.
- : The values provided for these properties in the `options` argument or filled in as defaults.
These properties are present only if at least one of them was provided in the `options` argument.

## Examples

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ The **`Intl.PluralRules`** object enables plural-sensitive formatting and plural
- : Returns a new object with properties reflecting the locale and collation options computed during initialization of the object.
- {{jsxref("Intl/PluralRules/select", "Intl.PluralRules.prototype.select()")}}
- : Returns a string indicating which plural rule to use for locale-aware formatting.
- {{jsxref("Intl/PluralRules/selectRange", "Intl.PluralRules.prototype.selectRange()")}}
- {{jsxref("Intl/PluralRules/selectRange", "Intl.PluralRules.prototype.selectRange()")}} {{experimental_inline}}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note, I'm querying this in mdn/browser-compat-data#16923 - it looks like having FF in preview "counts" as support, in which case this would no longer be experimental.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But I wouldn't block this for merging, as it is true until that BCD goes in, at which point I will revert this if needed

- : This method receives two values and returns a string indicating which plural rule to use for locale-aware formatting.

## Examples
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,27 @@ tags:
- Prototype
- Reference
- selectRange
- Experimental
browser-compat: javascript.builtins.Intl.PluralRules.selectRange
---
{{JSRef}}
{{JSRef}} {{SeeCompatTable}}

The **`Intl.PluralRules.prototype.selectRange()`** method receives two values and returns a string indicating which plural rule to use for locale-aware formatting.

## Syntax

```js
formatRange(startRange, endRange)
selectRange(startRange, endRange)
```

### Return value

A string representing the pluralization category of the `number`; can be one
of `zero`, `one`, `two`, `few`,
`many` or `other`, that are relevant for the locale whose localization is specified in [LDML Language Plural Rules](https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_plural_rules.html#rules).
A string representing the pluralization category of the `number`.
This can be one of `zero`, `one`, `two`, `few`, `many` or `other`, that are relevant for the locale whose localization is specified in [LDML Language Plural Rules](https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_plural_rules.html#rules).

## Description

This function selects a pluralization category according to the locale and formatting
options of an {{jsxref("Intl.PluralRules")}} object.
This function selects a pluralization category according to the locale and formatting options of an {{jsxref("Intl.PluralRules")}} object.

## Examples

Expand Down