JavaScript Array.toLocaleString() Method

Array 对象参考手册JavaScript Array Object

Example

Format to various regional formats:

const prices = [1234.56, 7890.12, 3456.78]; const dateArray = [new Date(), new Date('2023-01-01')]; //Number arrays use localized format console.log(prices.toLocaleString('en-US')); //Output similar to: "1,234.56,7,890.12,3,456.78" (English format) console.log(prices.toLocaleString('de-DE')); //Output similar to: "1.234,56,7.890,12,3.456,78" (German format) //Date arrays use localized format console.log(dateArray.toLocaleString('en-US')); //Output similar to: "5/6/2023, 1/1/2023" (English date format) console.log(dateArray.toLocaleString('ja-JP')); //Output similar to: "2023/5/6, 2023/1/1" (Japanese date format)

Try it Yourself »

Definition and Usage

Array.toLocaleString()It is a built-in method of the JavaScript array object that returns a string representing the array elements.

Array.toLocaleString()The special feature of this method is that it formats each element in the array according to the current environment's locale settings.

In simple terms, this method:

  • Converts an array to a string
  • Automatically handles localized formats (such as dates, numbers, etc.)
  • Elements are separated by commas

Basic Syntax

array.toLocaleString([locales[, options]])

Parameter Description

  • locales(Optional): A string or an array of strings representing the language code (e.g., "en-US", "zh-CN")
  • options(Optional): A configuration object used to specify formatting options

How to Use

Basic Usage

Example

const numbers = [12345.67, 1000, 3.14159];
console.log(numbers.toLocaleString('en-US'));
// Output: "12,345.67,1,000,3.142"

console.log(numbers.toLocaleString('de-DE'));
// Output: "12.345,67,1.000,3,142"

Handling Date Objects

Example

const dates = [new Date(), new Date('2023-01-01')];
console.log(dates.toLocaleString('en-US'));
// Possible output: "1/2/2024, 2:30:45 PM,1/1/2023, 12:00:00 AM"

Advanced Usage

Using the options Parameter

Example

const numbers = [12345.67, 1000, 3.14159];

// Specify currency format
console.log(numbers.toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD'
}));
// Output: "$12,345.67,$1,000.00,$3.14"

// Specify percentage format
console.log([0.25, 0.5, 0.75].toLocaleString('en-US', {
  style: 'percent'
}));
// Output: "25%,50%,75%"

Difference from toString()

Method Localization handling Date formatting Number formatting
toString() None Converts to default string No special handling
toLocaleString() Yes According to local format According to local format

Example

const arr = [1000, new Date()];

console.log(arr.toString());
// Output: "1000,Wed Jan 03 2024 14:30:00 GMT+0800 (China Standard Time)"

console.log(arr.toLocaleString('zh-CN'));
// Output: "1,000,2024/1/3 14:30:00"

Practical Application Scenarios

  1. Multilingual websites: Display formatted data based on user language preferences
  2. Financial applications: Correctly display currency formats for different regions
  3. Data analysis: Display numbers and dates in familiar formats
  4. Form display: Display data in localized formats in input fields

Notes

  1. Performance considerations: Frequent calls may affect performance, especially on large arrays
  2. Browser compatibility: Although modern browsers support it, some options may differ
  3. Default behavior: If the locales parameter is not specified, the default language settings of the runtime environment are used
  4. Element handling: For non-date/number objects, its toString() method will be called

Summary

Array.toLocaleString()It is a powerful localization tool, especially suitable for scenarios where formatted data needs to be displayed according to the user's region. It simplifies the implementation of internationalization (i18n), allowing developers to easily handle differences in number and date formats across regions.

Remember, when your application needs to serve global users, using this method can greatly enhance the user experience!

Array 对象参考手册JavaScript Array Object

Other extensions