During the processing of a large number of time formats involved in recent development projects, the toLocaleString() method was encountered during the processing. This article summarizes some knowledge points of the toLocaleString() method.
Overview
toLocale?String() is used to return the string after formatting the object. Its syntax is as follows:
dateObj.toLocaleString([locales [, options]])
This method has two parameters: locale and options.
locale is an optional parameter, which is used to specify the locale used when formatting objects. The default is the browser’s current locale. The optional values of this parameter can be found here.
options is also an optional parameter, which is an object format, which is used to set some configuration properties of the object formatting style.
Date.prototype.toLocaleString
Let’s first introduce the use of toLocale?String() when formatting dates. When formatting a date, the value of locale is generally zh and en, which can be used in most scenarios.
var date = new Date();
console.log(date.toLocaleString('zh')); // 2019-5-12 14:29:34
console.log(date.toLocaleString('en')); // 5/12/2019, 2:29:34 PM
- The specific optional values of the
options parameter are localeMatchertimeZoneNamehour12hourCycleformatMatcherweekdayerayearmonthdayhourminutesecond
Here we only introduce some commonly used properties.
hour12
This attribute is used to control whether the returned time is in 12-hour or 24-hour format, and its value is Boolean (true or false). The default is true, that is, the returned time is in 12-hour format.
var date = new Date();
console.log(date.toLocaleString('zh', {<!-- -->hour12: true})); // 2019/5/12 2:53:49 PM
console.log(date.toLocaleString('zh', {<!-- -->hour12: false})); // 2019/5/12 14:53:49
The next step is to introduce the attributes of formatting the year, month, day, hour, minute, and second. Looking at the words above, we must be able to guess what it means. Here are some optional values of these attributes.
year, day, hour, minute, second are available The options are the same, only two: numeric and 2-digit.
numeric and 2-digit simply mean whether it can be represented by two numbers, you can see the following code:
var date = new Date();
console.log(date.toLocaleString('zh', {<!-- -->year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric'})); // 2019/5/12 pm 3:05:27
console.log(date.toLocaleString('zh', {<!-- -->year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit ', minute: '2-digit', second: '2-digit'})); // 19/05/12 3:05:27 PM
Besides, weekday has three optional values: long, short and narrow, and month attribute, these three values are also optional values for the month attribute.
The difference between long, short and narrow can be seen in the following code:
var date = new Date();
console.log(date.toLocaleString('en', {<!-- --> month: 'narrow' })); // M
console.log(date.toLocaleString('en', {<!-- --> month: 'short' })); // May
console.log(date.toLocaleString('en', {<!-- --> month: 'long' })); .// May
console.log(date.toLocaleString('en', {<!-- --> weekday: 'narrow'})); // S
console.log(date.toLocaleString('en', {<!-- --> weekday: 'short'})); // Sun
console.log(date.toLocaleString('en', {<!-- --> weekday: 'long'})); // Sunday
These three attributes are simply: narrow: as short as possible, short: abbreviated form, long: normal form.
The last attribute to introduce is timeZoneName. It has two optional values: short and long. The difference between these two values is as follows:
var date = new Date();
console.log(date.toLocaleString('zh', {<!-- --> timeZoneName: 'long' })); // 2019/5/12 China Standard Time 3:23:59 PM
console.log(date.toLocaleString('zh', {<!-- --> timeZoneName: 'short' })); // 2019/5/12 GMT+8 3:23:59 PM
Number.prototype.toLocaleString
When formatting numbers, the optional values of the locales attribute can refer to here. The optional values of the options attribute of the numeric type are:
localeMatcherstylecurrencycurrencyDisplayuseGroupingminimumIntegerDigitsminimum Fraction Digitsmaximum Fraction DigitsminimumSignificantDigitsmaximumSignificantDigits
Also only some commonly used attributes are introduced.
style
style is used to set the style used when formatting, it has three values: decimal means pure number, percent means percentage format, currency indicates currency. The default value is decimal.
const num = 2444222;
console.log(num.toLocaleString('zh', {<!-- -->style: 'decimal'})); // 2,444,222
console.log(num.toLocaleString('zh', {<!-- -->style: 'percent'})); // 244,422,200%
console.log(num.toLocaleString('zh', {<!-- -->style: 'currency'})); // error
When setting the value of style to currency, it needs to cooperate with the setting of the currency attribute. If it is used alone, an error will be reported.
currency and currencyDisplay
These two attributes will only take effect when the value of style is "currency". The currency attribute is used to set the currency symbol used in currency formatting. Possible values are ISO currency codes, "CNY" is RMB, "USD" is US dollar, “EUR” is Euro, more references please click here. The currencyDisplay attribute is used to set the explicit currency in currency formatting. Its possible values are: symbol means use the localized currency name, code uses the ISO currency code, name means use the localized Currency name. The default value is symbol.
const num = 2444222;
console.log(num.toLocaleString('zh', {<!-- -->style: 'currency', currency: 'CNY'})); // ￥2,444,222.00
console.log(num.toLocaleString('zh', {<!-- --> style: 'currency', currency: 'cny', currencyDisplay: 'code' })); // CNY 2,444,222.00
console.log(num.toLocaleString('zh', {<!-- --> style: 'currency', currency: 'cny', currencyDisplay: 'name' })); // 2,444,222.00 RMB
minimumIntegerDigits, minimumFractionDigits and maximumFractionDigits
This group of attributes is very powerful and will bring us great convenience in some occasions.
minimumIntegerDigits is used to specify the minimum number of integer digits used. Possible values are from 1 to 21, and the default value is 1.
minimumFractionDigits is used to specify the minimum number of decimal places to use. Possible values are from 0 to 20; the default is 0 for normal number and percentage formats.
maximumFractionDigits is used to specify the maximum number of decimal places used. Possible values are from 0 to 20.
These three attributes simply specify the minimum number of digits for an integer and the maximum and minimum number of digits for a decimal. Automatic zero padding for insufficient digits. Specific examples are as follows:
const num = 2333.3;
console.log(num.toLocaleString('zh', {<!-- --> minimumIntegerDigits: 5 })); //02,333.3
//If you don't want to have a separator, you can specify useGrouping to be false
console.log(num.toLocaleString('zh', {<!-- --> minimumIntegerDigits: 5, useGrouping: false })); //02333.3
console.log(num.toLocaleString('zh', {<!-- --> minimumFractionDigits: 2, useGrouping: false })); //2333.30
const num2 = 666.666;
console.log(num2.toLocaleString('zh', {<!-- --> maximumFractionDigits: 2, useGrouping: false })); //666.67
minimumSignificantDigits and maximumSignificantDigits
This group is also a very powerful set of attributes.
minimumSignificantDigits controls the minimum number of significant digits used. Possible values are from 1 to 21; the default is 1.
maximumSignificantDigits controls the maximum number of significant digits used. Possible values are from 1 to 21;
Simply put, this group of properties is used to control the number of valid digits of a number. As long as this set of attributes is set, all the above set of attributes are ignored. Concrete example:
const num = 1234.5;
console.log(num.toLocaleString('zh', {<!-- --> minimumSignificantDigits: 6, useGrouping: false })); //1234.50
console.log(num.toLocaleString('zh', {<!-- --> maximumSignificantDigits: 4, useGrouping: false })); //1235
Note: both maximumFractionDigits and maximumSignificantDigits are rounded, so you need to pay attention when using them