SoFunction
Updated on 2024-11-20

JavaScript Internationalization API Formatted Data Usage Explained

introductory

I'm glad you're interested in Interested. is a program built into theJavaScript internationalizationAPI, which provides an easy way to format numbers for display in different language environments. In this blog, we will go into details about the and usage scenarios, with sample code as an illustration of its use.

What is it?

is a number used to format theJavaScript internalizationAPI. It enables developers to customize the number format according to the user's locale and region. This means you can use theAPI to format numbers for display in different languages and regions.

How does it work?

utilization Very simple. Here's a basic example of use for formatting a number:

const number = 123456.789
const formatter = new ()
((number))

In the above example, we first define a numeric variablenumber, which then creates ainstance and store it in the variableformatterin. Finally, we use the()method to format the number and print the result to the console.

The output result is:

123,456.789

In the above example, we didn't provide any parameters to create theinstance. This means that it will format the number using the default settings. However, you can use the following parameters to create a custom format:

  • locale: The locale used to format the number. The default value is the current user's locale.
  • style: The style of the numeric format. Can bedecimal(decimal),currency(currency) orpercent(percentage). The default value isdecimal。
  • currency: If the style iscurrencyThe currency code to use. The default value is the currency code of the current user.
  • currencyDisplay: If the style iscurrency, then the display position of the currency symbol. It can besymbol(Symbol),code(code) orname(name). The default value issymbol。
  • minimumIntegerDigits: The minimum number of integer digits for the number. The default value is 1.
  • minimumFractionDigits: The minimum number of decimal places for the number. The default value is 0.
  • maximumFractionDigits: The maximum number of decimal places for a number. The default value is 3.
  • minimumSignificantDigits: The least significant digit of the number. The default value is 1.
  • maximumSignificantDigits: The maximum number of significant digits for the number. The default value is 21.

The following is an example showing how to use these parameters to create a custom number format:

const number = 123456.789
const formatter = new ('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
})
((number))

The output result is:

$123,456.79

In the above example, we used theen-USas the locale and set the style tocurrency. We also specify the currency code asUSDThe minimum number of decimal places is 2, and the maximum number of decimal places is 2. This results in the output being in dollar currency format.

Usage Scenarios

Can be used in any scenario where numbers need to be formatted:

Supported type units refer to The types of number formatting supported by the object. Below are the Chinese explanations and code examples for each type:

1. Currency formatting

Currency formatting is the formatting of numbers into a specific currency. Currency formatting is the process of formatting numbers into a specific currency format using theYou can easily format numbers into any currency and display them in different language environments. For example, the following code will format a number into the US Dollar currency format:

const number = 1234.56
const formatter = new ('en-US', {
  style: 'currency',
  currency: 'USD',
})
((number))

The output result is:

$1,234.56

In the above example, we used theen-USas the locale and set the style tocurrency. We also specify the currency code asUSD. This causes the output to be in dollar currency format.

2. Decimal formatting

Decimal formatting is the formatting of numbers to a specific number of decimal places. It is possible to format a number to a specific number of decimal places using theYou can easily format numbers to any number of decimal places and display them in different language environments. For example, the following code will format a number to only two decimal places:

const number = 1234.567
const formatter = new ('en-US', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
})
((number))

The output result is:

1,234.57

In the above example, we used theen-USAs the locale, set the minimum and maximum number of decimal places to 2. This results in an output with only two decimal places.

3. Integer formatting

Integer formatting is the formatting of numbers to a specific number of integer digits. It is possible to format a number into a specific integer digit format using theYou can easily format numbers to any number of integer digits and display them in different language environments. For example, the following code will format the number to only four integer digits:

const number = 12345.6789
const formatter = new ('en-US', {
  minimumIntegerDigits: 4,
})
((number))

The output result is:

12,346

In the above example, we used theen-USas the locale and set the minimum number of integer digits to 4. This results in an output of only four integer digits.

4. Percentage formatting

Percentage formatting is the formatting of numbers into a percentage format. The percentage formatting is done using theYou can easily format numbers into any percentage format and display them in different language environments. For example, the following code will format a number into percentage format:

const number = 0.75
const formatter = new ('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
})
((number))

The output result is:

75.00%

In the above example, we used theen-USas the locale and set the style topercentWe also specify the minimum number of decimal places to be 2 and the maximum number of decimal places to be 2. We also specify the minimum number of decimal places to be 2 and the maximum number of decimal places to be 2. This makes the output in percentage format.

5. Formatting of counts

Count formatting is the formatting of numbers into counting form. It is possible to format a number into a counting format using theYou can easily format numbers into any counting format and display them in different language environments. For example, the following code will format a number into a counting form format:

const number = 12345
const formatter = new ('en-US', {
  notation: 'compact',
})
((number))

The output result is:

12K

In the above example, we used theen-USas a linguistic environment and will

6. Multilingual support

Multi-language is also supported. Use thisAPIYou can set the number format according to the user's locale. For example, the following code will format the number into the German currency format:

const number = 123456.789
const formatter = new ('de-DE', {
  style: 'currency',
  currency: 'EUR',
})
((number))

The output result is:

123.456,79 €

In the above example, we used thede-DEas the locale and set the style tocurrency. We also specify the currency code asEUR. This results in an output in German currency format.

summarize

It is a very usefulJavaScript internalizationAPI, which is used to format numbers for display in different languages and regions. Use thisAPIYou can easily create custom number formats and apply them to any scenario where you need to format numbers. I hope this blog has helped you understand The method of use and the scenarios of use.

These are the details of the above, more information about the please pay attention to my other related articles!