SoFunction
Updated on 2025-04-03

Use and instructions for the amount and date formatting plug-in @formatjs/intl in Vue

Vue amount and date formatting plugin @formatjs/intl use

In the vue project, we can use a third-party plug-in for formatting date and amount numbers: @formatjs/intl

The official address of this plugin is:

/docs/intl/

What's more convenient is that this plug-in has a Flutter version, which can also be used in Flutter development.

Specific installation steps:

# npm installation stepsnpm i @formatjs/intl --save
 
# yarn installation steps are as followsyarn add @formatjs/intl
 
# All the above steps are saved to middle

Simple steps to use:

# Define an instance of a tool in script# Take the formatted amount as an exampleconst intl = new ('zh-CN', { style: 'currency', currency: 'RMB' })
 
# For more methods, please refer to the official link to learn about it.var value = 1000;
(value)
 
# The formatted result data style is： RMB 1,000.00

For digital calculations

It is an international digital processing solution, which can be used to show the preferences of different countries for digital processing. However, in general, we still process more Chinese numbers, but I find this is also very useful.

The official address of this plugin is:/docs/intl/

Digital grouping

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

digit control

new ('zh-CN',{minimumIntegerDigits:2}).format(12345678);
"12"
  • minimumIntegerDigitsIndicates the minimum position of the integer part, default 1, range [1,21]
  • minimumFractionDigitsIndicates how many digits are required for the smallest decimal part, default 0, range [0,20]
  • maximumFractionDigitsRepresents the maximum number of decimal parts, range [0,20]. Pure numbers default 3, currency default 2.
  • minimumSignificantDigitsRepresents the smallest number of digits in the overall range [1,21], default 1
  • maximumSignificantDigitsRepresents the largest number of digits in the overall range [1,21]:

The control of the overall number of digits is greater than the control of the local number of digits.

Length representation

const formatter = new ('zh-CN', {
  style: 'unit',
  unit: 'meter',
});
const res = (8848.86);
// Then output: 8,848.86 meters// If the language is set to'en'，Then output：8,848.86m

Of course, there are other units in terms of height or length, such as: millimeter, centimeter, meter, kilometer, inch, foot, yard, mile, mile-scandinavian.

Byte unit representation

The units of kB, MB, Gb, and Tb are also common in daily life.

const formatter = new ('zh-CN', {
  style: 'unit',
  unit: 'megabyte',
});
const res = (1024);
// Then output: 1,024 MB
// other// ...
// If unit is set "gigabit", then: 1,024 Gb// If unit sets "terabit", then: 1,024 Tb// ...

Compound unit representation

Unit connection combinations, such as: ‘40 hours/week’ (40 hours work per week).

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

Unit is composed of a unit composed of hour and week, and also has km/h (kilometer/hour: km/h), so the unit can be set to: ‘kilometer-per-hour’. There are also common current network speeds, how many megabytes per second, set ‘megabyte-per-second’ (5MB/second);

Percentage

Common statistical data will be expressed as percentages; if the success rate accounts for 95%, you can set unit to percent.

const formatter = new ('zh-CN', {
  style: 'unit',
  unit: 'percent',
  // signDisplay: 'always',
  // signDisplay: 'exceptZero',
});
const res = (95);
// Then output: 95%// set up signDisplay: 'always'，Then output：+95% or -95%

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

Currency representation

For example, export RMB 500,000 (5 million).

const formatter = new ('zh-CN', {
  style: 'currency',
  // Export RMB  currency: 'CNY',
  // Export USD, language set to 'en'  // currency: 'USD',
  // currencySign option enable accounting format  currencySign: 'accounting',
});
const res = (5000000);
//Output result: ¥5,000,000.00// other// RMB: Output result: ¥5,000,000.00// Dollar：Output result：$5,000,000.00

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

Quality representation

For example: output 500 kg; set kilogram to kilogram.

const formatter = new ('zh-CN', {
  style: 'unit',
  unit: 'kilogram',
});
const res = (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 ('zh-CN', {
  style: 'unit',
  unit: 'celsius',
});
const res = (28);
// Output：28°C

For more units, choose celsius, fahrenheit.

Volume representation

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

More units are selected for liter (liter), milliliter (ml), gallon (gallon), fluid-ounce (fill ounce).

Angle representation

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

Large numbers represent

For example: There are more than 1.4 billion people in mainland China, how to express it? 1.4 million shows like this, it seems a bit difficult. In Chinese, we can express it 1.4 billion.

const formatter = new ('zh-CN', {
  notation: 'compact',
});
const res = (1400000000);
// Output：14100 million

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.