Intl.NumberFormat is used for numerical calculation

Keywords: Javascript Vue

Intl.NumberFormat is an international digital processing scheme. It can be used to show the preference of different countries for digital processing. However, in general, we still process more Chinese numbers, but I find this Intl.NumberFormat is also very useful.
Digital grouping

new Intl.NumberFormat('zh-CN',{useGrouping:true}).format(12345678);
"12,345,678"
new Intl.NumberFormat('zh-CN',{useGrouping:false}).format(12345678)
"12345678"

Digit control

new Intl.NumberFormat('zh-CN',{minimumIntegerDigits:2}).format(12345678);
"12"

minimumIntegerDigits indicates the minimum position of the integer part. The default is 1 and the range is [1,21]
minimumFractionDigits indicates the minimum number of decimal places. The default is 0 and the range is [0,20]
maximumFractionDigits indicates the maximum number of decimal places, and the range is [0,20]. Pure number defaults to 3, currency, and percentage defaults to 2.
minimumSignificantDigits indicates the minimum number of digits in the whole. The range is [1,21]. The default is 1
maximumSignificantDigits indicates the maximum number of digits in the whole, range [1,21]:
The control right of the whole digit is greater than that of the local digit.

Length representation

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'meter',
});
const res = formatter.format(8848.86);
// Output: 8848.86m
// If the language is set to 'en', the output is 8848.86m

Of course, there are other units in height or length, such as millimeter, centimeter, kilometer, inch, foot, yard, mile, mile Scandinavian, etc.

Byte unit representation
kB, MB, Gb and Tb are also common in daily life.

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'megabyte',
});
const res = formatter.format(1024);
// Output: 1024 MB

// other
// ...
// If unit is set to "gigabit", 1024 GB
// If unit is set to "terabit", 1024 TB
// ...

Composite unit representation
Unit connection combination, such as' 40 hours / week '(40 hours per week).

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'hour-per-week',
});
const res = formatter.format(40);
// Chinese output: 40 hours / week
// English output: 40 hr/w

Unit is a unit composed of hour and week. It also has km/h (km/h: km/h). You can set unit to 'kilometer per hour'. There is also a common current network speed, how many megabytes per second? Set 'megabyte per second' (5MB / s);

Percentage representation
Common statistical data will be expressed in percentage; If the success rate accounts for 95%, you can set unit to percent.

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'percent',
  // signDisplay: 'always',
  // signDisplay: 'exceptZero',
});
const res = formatter.format(95);
// Output: 95%
// Set signDisplay: 'always', then output: + 95% or - 95%

In some cases, such as displaying increments, it is helpful to display symbols explicitly even if the number is positive, such as: + 95% or - 95%. You can set signDisplay: 'always'. When excluding output + 0% or - 0%, set signDisplay: 'exceptZero'.

Monetary representation
For example, export RMB 5000000 (5 million).

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'currency',
  // Export RMB
  currency: 'CNY',
  // Output USD, language set to 'en'
  // currency: 'USD',
  // The currentysign option enables the accounting format
  currencySign: 'accounting',
});
const res = formatter.format(5000000);
//Output result: ¥ 5000000.00
// other
// RMB: output result: ¥ 5000000.00
// USD: output result: $5000000.00

Similarly, output US dollars in English, and set its language item and currency type. Such as RMB CNY, USD, Euro EUR, etc.

Quality representation
For example: output 500kg; Just set 'kilogram'.

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'kilogram',
});
const res = formatter.format(500);
// Output: 500kg

More units, such as gram,kilogram,ounce,pound,stone.

Temperature representation
For example, the temperature is 28 degrees today.

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'celsius',
});
const res = formatter.format(28);
// Output: 28 ° C

More units choose celsius,fahrenheit.

Volume representation

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'milliliter',
});
const res = formatter.format(28);
// Chinese output: 28ml
// English output: 28 mL

For more units, select liter, milliliter, gallon, and fluid ounce.

Angle representation

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'unit',
  unit: 'degree',
});
const res = formatter.format(90);
// Output: 90 °

Large number representation
For example, there are about 1400000000 people in Chinese mainland. How do we say that 1400000000 shows that it seems a little bit harder. In Chinese, we can say 1 billion 400 million.

const formatter = new Intl.NumberFormat('zh-CN', {
  notation: 'compact',
});
const res = formatter.format(1400000000);
// Output: 1.4 billion

Posted by advoor on Tue, 19 Oct 2021 10:47:18 -0700