toLocaleString

最近開發項目中涉及的大量的時間格式的處理，在處理過程中就接觸到了toLocaleString()這個方法，此篇是總結toLocaleString()方法的一些知識點。

概述

toLocale​String()用來返回格式化對象後字符串。它的語法如下：

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

這個方法有兩個參數: locale和options。

locale爲可選參數，它用來指定格式化對象時使用的語言環境。默認是瀏覽器當前的語言環境。該參數的可選值可以參考這裏。options也是一個可選參數，它是對象格式，用來設置對象格式化樣式的一些配置屬性。

Date.prototype.toLocaleString

先來介紹toLocale​String()在格式化日期時的使用。在格式化日期時，locale的值一般爲zh和en就能滿足大部分場景的使用。

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

options參數具體的可選值有

• localeMatcher
• timeZoneName
• hour12
• hourCycle
• formatMatcher
• weekday
• era
• year
• month
• day
• hour
• minute
• second

在這裏我們只介紹一些常用的屬性。

hour12

該屬性用來控制返回的時間是12小時制還是24小時制，它的值是布爾類型（true或false)。默認是true,即返回的時間是12小時制。

 var date = new Date();
 console.log(date.toLocaleString('zh', {hour12: true}));  // 2019/5/12 下午2:53:49
 console.log(date.toLocaleString('zh', {hour12: false})); //  2019/5/12 14:53:49

接下來是介紹格式化年月日時分秒的屬性，看上面的單詞，想必我們便能猜到是什麼意思，這裏來介紹一些這些屬性的可選值。

year， day， hour，minute， second這五個屬性的可選值是一樣的，只有兩個：numeric和2-digit。

numeric和2-digit簡單的說就是是否可以用兩個數字表示，可以看如下代碼：

  var date = new Date();
  console.log(date.toLocaleString('zh', {year: 'numeric', month: 'numeric',  day: 'numeric',  hour: 'numeric',  minute: 'numeric',  second: 'numeric'})); // 2019/5/12 下午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

除此之外， weekday的可選值有三個：long, short 和narrow，而month屬性除了上面兩個可選值之外，這三個值也是month屬性的可選值。
long, short 和narrow的區別，可以看如下代碼：

  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

這三個屬性簡單說就是: narrow:能有多短就有多短，short: 縮寫形式， long: 正常形式 。

最後一個要介紹的屬性是timeZoneName。它的可選值有兩個：short和long。這兩個值的區別如下：

  var date = new Date();
  console.log(date.toLocaleString('zh', { timeZoneName: 'long' })); // 2019/5/12 中國標準時間 下午3:23:59
  console.log(date.toLocaleString('zh', {  timeZoneName: 'short' })); // 2019/5/12 GMT+8 下午3:23:59

Number.prototype.toLocaleString

在格式化數字的時候，locales屬性的可選值可以參考這裏。而數字類型的options屬性的可選值有:

• localeMatcher
• style
• currency
• currencyDisplay
• useGrouping
• minimumIntegerDigits
• minimumFractionDigits
• maximumFractionDigits
• minimumSignificantDigits
• maximumSignificantDigits

同樣只介紹一些常用的屬性。

style

style用來設置格式化時使用的樣式，它有三個值：decimal表示純數字，percent表示百分比格式，currency表示貨幣。默認值是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'})); // 報錯

對於設置style的值爲currency時，需要配合currency屬性的設置，如果單獨使用會報錯。

currency和currencyDisplay

這兩個屬性只有在style的值是“currency”的時候纔會生效。currency屬性用來設置貨幣格式化中使用的貨幣符號。可能的值是ISO的貨幣代碼 ，"CNY"是人民幣，"USD" 表示美元，"EUR"表示歐元, 更多參考請點擊這裏。currencyDisplay屬性用來設置貨幣格式化中顯式貨幣。它的可能值有：symbol表示使用本地化的貨幣名稱，code使用國際標準組織貨幣代碼， name表示使用本地化的貨幣名稱。默認值是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 人民幣

minimumIntegerDigits、 minimumFractionDigits 與 maximumFractionDigits

這組屬性非常的強大，在某些場合會給我們帶來極大的便利。

• minimumIntegerDigits用來指定使用的整數數字的最小數目.可能的值是從1到21,默認值是1。
• minimumFractionDigits用來指定使用的小數位數的最小數目.可能的值是從0到20;默認爲普通的數字和百分比格式爲0。
• maximumFractionDigits用來指定使用的小數位數的最大數目。可能的值是從0到20。

這三個屬性簡單來說就是指定整數的最小位數和小數的最大位數和最小位數。不夠的位數的自動補零。具體例子如下：

  const num = 2333.3;
  console.log(num.toLocaleString('zh', { minimumIntegerDigits: 5 }));    //02,333.3
  //如果不想有分隔符，可以指定useGrouping爲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和maximumSignificantDigits

這一組也是很強大的一組屬性。

• minimumSignificantDigits 控制使用的有效數字的最小數目。可能的值是從1到21；默認值是1。
• maximumSignificantDigits 控制使用的有效數字的最大數量。可能的值是從1到21；

簡單的來說這組屬性就是用來控制數字的有效數字的位數的。只要設置了這一組屬性，上面那一組屬性全部忽略不算。具體示例：

  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

注意：maximumFractionDigits和maximumSignificantDigits均是四捨五入的，在使用的時候需要注意