Intl.numberformat set number format

MDN Intl.NumberFormat

The front-end interface is displayed , It is often necessary to convert figures into money （ USD EUR ） decimal point , Currency keeps two decimal places, etc , The usual method is string concatenation . Now there is a new API You can convert directly , It's very powerful ！

The Intl.NumberFormat object is a constructor for objects that enable language sensitive number formatting.

Here we can put ordinary numbers , Convert to different currency and format style strings .

locale It's a must pass parameter （ Support the number separator format of different countries ）;option Is an optional parameter is an object ,style,currency You can set the currency symbol or accuracy calculation ;unit Is an optional parameter , You can add units （ Length unit, etc ）

const number = 123456.789;

console.log(new Intl.NumberFormat('de-DE', {
     style: 'currency', currency: 'EUR' }).format(number));
// expected output: "123.456,79 €"

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', {
     style: 'currency', currency: 'JPY' }).format(number));
// expected output: "￥123,457"

// limit to three significant digits
console.log(new Intl.NumberFormat('en-IN', {
     maximumSignificantDigits: 3 }).format(number));
// expected output: "1,23,000"

Constructor method

Intl.NumberFormat() Creates a new NumberFormat object.

Static methods

• Intl.NumberFormat.supportedLocalesOf()

  Returns an array containing those of the provided locales that are supported without having to fall back to the runtime’s default locale. Returns an array , It contains an array of supported locales provided , Instead of going back to the default locale at runtime .

Example method

• Intl.NumberFormat.prototype.format()

  Getter function that formats a number according to the locale and formatting options of this NumberFormat object. According to the language, there are three option formats , Returns the format corresponding to the number .

• Intl.NumberFormat.prototype.formatToParts()

  Returns an Array of objects representing the number string in parts that can be used for custom locale-aware formatting.

  Returns an array of objects , This object array represents a partial numeric string , Can be used to customize locale formatting .

• Intl.NumberFormat.prototype.resolvedOptions()

  Returns a new object with properties reflecting the locale and collation options computed during initialization of the object. Return a new object , The properties of this object reflect the locale and collation options calculated during object initialization .

Example

Basic use

In basic use without specifying a locale, a formatted string in the default locale and with default options is returned.

You need to pass in a number , Then the converted string is generated according to the default configuration .

var number = 3500;

console.log(new Intl.NumberFormat().format(number));
// → '3,500' if in US English locale

Using locales

This example is a variation of the localized number format . To get the language format used in the application user interface , Please make sure to use locales Parameter specifies the language （ It may also include some backup languages ）.This example shows some of the variations in localized number formats. In order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument:

var number = 123456.789;

// German uses comma as decimal separator and period for thousands
console.log(new Intl.NumberFormat('de-DE').format(number));
// → 123.456,789

// Arabic in most Arabic speaking countries uses real Arabic digits
console.log(new Intl.NumberFormat('ar-EG').format(number));
// → ١٢٣٤٥٦٫٧٨٩

// India uses thousands/lakh/crore separators
console.log(new Intl.NumberFormat('en-IN').format(number));
// → 1,23,456.789

// the nu extension key requests a numbering system, e.g. Chinese decimal
console.log(new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(number));
// →  One, two, three , Four five six . 789 

// when requesting a language that may not be supported, such as
// Balinese, include a fallback language, in this case Indonesian
console.log(new Intl.NumberFormat(['ban', 'id']).format(number));
// → 123.456,789

Using options

We can use options Add parameters

The results can be customized using the options argument:

var number = 123456.789;

// request a currency format
console.log(new Intl.NumberFormat('de-DE', {
     style: 'currency', currency: 'EUR' }).format(number));
// → 123.456,79 €

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', {
     style: 'currency', currency: 'JPY' }).format(number));
// → ￥123,457

// limit to three significant digits  Limit to three significant digits 
console.log(new Intl.NumberFormat('en-IN', {
     maximumSignificantDigits: 3 }).format(number));
// → 1,23,000

Using style and unit

console.log(new Intl.NumberFormat("pt-PT",  {
    
    style: 'unit',
    unit: "mile-per-hour"
}).format(50));
// → 50 mi/h

console.log((16).toLocaleString('en-GB', {
    
    style: "unit",
    unit: "liter",
    unitDisplay: "long"
}));
// → 16 litres

The above is the main configuration . In the actual , I mainly use currency and decimal point , Mainly locale and format The choice of .

In case of time calculation （ It's not a pure number ）, have access to moment library , Please refer to moment The details of API.