----javaScript toLocaleString用法----

Outline

toLocaleString The method is used to return the string formatting objects, the string format differ depending on the language. Can pass the language and specific performance parameters decided to return and, in some scenes very useful, the syntax is as follows:

object.toLocaleString([locales [, options]]);
Copy the code

locales Parameters for the locale to be used when formatting objects defaults to the current locale, may not pass. The parameter values may optionally particular reference  herein , using in general  en or  zh to cope with the vast majority of cases. Examples are as follows:

const date = new Date();
date.toLocaleString('zh'); // 2018-4-4 15:08:38
date.toLocaleString('en'); // 4/4/2018, 3:08:38 PM
Copy the code

Incidentally, this parameter is not case sensitive, has been verified in the browser and Node.

options Parameters for the output style of configuration items, according to  object have different options below will carefully explain the parameters of different types. But note that if you do not pass  locales the parameter, then the  options parameter will not take effect, in fact, the above syntax is already showing this point.

Finally, there is a compatibility problem, specifically as:

 

Case of compatibility parameters somewhat less, which is a pity, but overall is still relatively optimistic.

 

Number.prototype.toLocaleString

First introduced  toLocaleString in the digital type. Occasionally interview will be asked how to format numbers, the integer part of each of the three plus a comma, then may wish to:

cons num = 2333333;
num.toLocaleString(); // 2,333,333
Copy the code

In fact, after not require any regular kick out of - those who face problems, we take a look  toLocaleString at the digital type  options have properties useful parameters to facilitate our lazy use. Note that this article is not a translation of the document, which will introduce some common properties, please refer to the more specific options  MDN documentation.

style Formatting style to use when expressed, the default is  decimal that is purely digital, may also be  percent displayed as a percentage and  currency currency. Value  currency when at the same time must be specified  options in the  currency property, otherwise an error. Specific examples are as follows:

cons num = 2333333;
num.toLocaleString( 'zh', { style: 'decimal' }); //2,333,333
num.toLocaleString( 'zh', { style: 'percent' }); //233,333,300%
num.toLocaleString ( 'ZH', {style: 'Currency'}); // given
Copy the code

The next two attributes are  style set  currency only useful, they are  currency with  currencyDisplaythe former corresponding to the specified currency, such as  USD, EUR and  CNY the like, are measured case-insensitive. The latter is ShowStyle currency symbol, the default value  symbol, i.e., the corresponding symbol, such as  CNY a ¥. The value of this attribute may be  code with  name, but with less than look like a ~ example as follows:

cons num = 2333333;
num.toLocaleString( 'zh', { style: 'currency', currency: 'CNY' }); //￥2,333,333.00
num.toLocaleString( 'zh', { style: 'currency', currency: 'cny', currencyDisplay: 'code' }); //CNY2,333,333.00
num.toLocaleString( 'zh', { style: 'currency', currency: 'cny', currencyDisplay: 'name' }); //2,333,333.00人民币
Copy the code

Finally, two very powerful attributes, some scenes can bring great convenience. The first group  minimumIntegerDigits,  minimumFractionDigits and  maximumFractionDigitsto specify the minimum number of bits integer minimum and maximum number of decimal places, not with the 0 to compact. Simply put, automatically fill 0! Specific examples are as follows:

let num = 2333.3;
num.toLocaleString( 'zh', { minimumIntegerDigits: 5 }); //02,333.3
// If you do not have a delimiter, you can specify useGrouping is false
num.toLocaleString( 'zh', { minimumIntegerDigits: 5, useGrouping: false }); //02333.3
num.toLocaleString( 'zh', { minimumFractionDigits: 2, useGrouping: false }); //2333.30

a = 666 666
num.toLocaleString( 'zh', { maximumFractionDigits: 2, useGrouping: false }); //666.67
Copy the code

Since then, the number of control bits 0 and up can no longer worry about ~

Another group  minimumSignificantDigits with  maximumSignificantDigits, for controlling the number of significant digits, as long as the group attribute is set, the entire first set of attributes is not ignored, as follows:

cons num = 1234.5;
num.toLocaleString( 'zh', { minimumSignificantDigits: 6, useGrouping: false }); //1234.50
num.toLocaleString( 'zh', { maximumSignificantDigits: 4, useGrouping: false }); //1235
Copy the code

Note that maximumFractionDigits the  maximumSignificantDigits are rounding, need to pay attention when in use. Digital type of  toLocaleString presentation came to an end, let's take a look at the date type  toLocaleString of  options what is useful properties.

Date.prototype.toLocaleString

With different numeric types, date, type of  locales effect on the output of very large (in fact, the type of digital influence is large, but generally less than), and thus should select the appropriate language environment based on the actual situation. In general, the date display is required, the style aspects need to be unified. But if it is an internal project or allow pm, then using  toLocaleString formatted date is quite good. As with digital type, only describes the common properties, please refer to the detailed property description MDN documentation.

hour12 Representation is to use 12-hour clock or 24-hour clock, the default value depending on  locales availability. Examples are as follows:

const date = new Date();
date.toLocaleString( 'zh', { hour12: true }); //2018/4/4 下午6:57:36
date.toLocaleString( 'zh', { hour12: false }); //2018/4/4 18:57:36
Copy the code

After that week, minutes and seconds formatting options such as the date when, the MDN  documentation says must follow a certain set of packet attributes found in the actual use of each property alone is not an error, and therefore introduced separately by value of the property would be better understood.

Specific properties of a total of nine, respectively  weekday, era, year, month, day, hour, minute, second and  timeZoneName. Specific meaning, will be able to see the word evaluation seconds to understand, without too much explanation. However, it should be noted that they are optional. First discussions weekday with  era, they can be a value of  narrow, short or  long, simply is how short can be more than a short, abbreviated to normal performance, specific performance is as follows:

const date = new Date();
date.toLocaleString( 'en', { weekday: 'narrow', era: 'narrow' }); //W A
date.toLocaleString( 'en', { weekday: 'short', era: 'short' }); //Wed AD
date.toLocaleString( 'en', { weekday: 'long', era: 'long' }); //Wednesday Anno Domini
Copy the code

Followed by  timeZoneName attribute, only short or  long two values, performance is as follows:

const date = new Date();
date.toLocaleString( 'zh', { timeZoneName: 'short' }); //2018/4/5 GMT+8 下午7:18:26
Date.toLocaleString ( 'ZH', { TimeZoneName: 'Long'}); // 2018 /. 4 / Standard Time. 5 7:18:26 PM China
Copy the code

The rest of the property, can the value is  numeric and  2-digitsimply say whether only two digits, look at the code words:

const date = new Date();
date.toLocaleString( 'zh', { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', }); //2018/4/5 下午7:30:17
date.toLocaleString( 'zh', { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }); //18/04/05 下午7:30:17
Copy the code

(Rather strange  hour, minute and  second three properties, regardless of what value, the performance is the same, and I hope big brother informed of the reasons, I replaced  en the environment is the same.)

Finally,  month this attribute, the language of the month there is a different show, except  numeric with the  2-digit outside, it is an extra three attributes, namely  narrow, short and  long. It is shown below:

const date = new Date();
date.toLocaleString( 'en', { month: 'narrow' }); //A
date.toLocaleString( 'en', { month: 'short' }); //Apr
date.toLocaleString( 'en', { month: 'long' }); //April