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

概述

toLocaleString 方法是用於返回格式化對象后的字符串，該字符串格式因不同語言而不同。可以通過傳參決定返回的語言與具體的表現，某些場景下相當有用，語法如下：

1.  
   object.toLocaleString([locales [, options]]);
2.  
   復制代碼

locales 參數用於指定格式化對象時使用的語言環境，默認為當前環境的語言，可以不傳。該參數具體可選的值可以參考 這里，一般而言使用 en 或 zh 即可應付絕大多數情況。例子如下：

1.  
   const date = new Date();
2.  
   date.toLocaleString('zh'); // 2018-4-4 15:08:38
3.  
   date.toLocaleString('en'); // 4/4/2018, 3:08:38 PM
4.  
   復制代碼

順帶一提，此參數大小寫不敏感，已經在瀏覽器與 Node 驗證過。

options 參數為輸出樣式的配置項，根據 object 類型不同會有不同選項，下文會仔細解釋這個參數。但需要注意的是如果不傳 locales 參數，那么 options 參數是不會生效的，其實上面的語法其實已經顯現出這點。

最后則是兼容性問題，具體如下圖：

 

使用參數的情況下兼容性稍差，這比較可惜，但總體而言還是比較樂觀的。

 

Number.prototype.toLocaleString

先介紹 toLocaleString 在數字類型上的使用。面試偶爾會問到如何格式化數字，使整數部分每三位加一個逗號，這時不妨：

1.  
   const num = 2333333;
2.  
   num.toLocaleString(); // 2,333,333
3.  
   復制代碼

其實是不需要任何正則的~打完出題者的臉后，我們一起看看 toLocaleString 在數字類型的 options 參數有好用屬性，以方便我們偷懶使用。注意，本文不是翻譯文檔，因而只會介紹一些常用的屬性，更具體的選項請查閱 MDN相關文檔。

style 表示格式化時使用的樣式，默認值是 decimal 也就是純數字，也可為 percent 百分比顯示與 currency 貨幣顯示。值為 currency 時必須同時指定 options 中的 currency 屬性，否則報錯。具體例子如下：

1.  
   const num = 2333333;
2.  
   num.toLocaleString( 'zh', { style: 'decimal' }); //2,333,333
3.  
   num.toLocaleString( 'zh', { style: 'percent' }); //233,333,300%
4.  
   num.toLocaleString( 'zh', { style: 'currency' }); //報錯
5.  
   復制代碼

接下來的兩個屬性是 style 設為 currency 時才有用的，它們分別是 currency 與 currencyDisplay，前者指定對應的貨幣，如 USD、EUR 與 CNY 等，實測也是不區分大小寫的。后者是貨幣符號的展示樣式，默認值是 symbol，即對應的符號，如 CNY 是 ￥。該屬性的值也可以是 code 與 name，只是用得比較少，看看例子就好了~具體如下：

1.  
   const num = 2333333;
2.  
   num.toLocaleString( 'zh', { style: 'currency', currency: 'CNY' }); //￥2,333,333.00
3.  
   num.toLocaleString( 'zh', { style: 'currency', currency: 'cny', currencyDisplay: 'code' }); //CNY2,333,333.00
4.  
   num.toLocaleString( 'zh', { style: 'currency', currency: 'cny', currencyDisplay: 'name' }); //2,333,333.00人民幣
5.  
   復制代碼

最后是兩組相當強大的屬性，某些場景下能帶來極大的便利。第一組是 minimumIntegerDigits、 minimumFractionDigits 與 maximumFractionDigits，用於指定整數最少位數與小數的最少和最多位數，不夠則用0去湊。簡單說，自動補0！具體例子如下：

1.  
   let num = 2333.3;
2.  
   num.toLocaleString( 'zh', { minimumIntegerDigits: 5 }); //02,333.3
3.  
   //如果不想有分隔符，可以指定useGrouping為false
4.  
   num.toLocaleString( 'zh', { minimumIntegerDigits: 5, useGrouping: false }); //02333.3
5.  
   num.toLocaleString( 'zh', { minimumFractionDigits: 2, useGrouping: false }); //2333.30
6.  
    
7.  
   num = 666.666
8.  
   num.toLocaleString( 'zh', { maximumFractionDigits: 2, useGrouping: false }); //666.67
9.  
   復制代碼

從此之后，補0與控制位數再也不愁~

另一組是 minimumSignificantDigits 與 maximumSignificantDigits，用於控制有效數字位數，只要設置了這一組屬性，第一組屬性全部忽略不算，具體如下：

1.  
   const num = 1234.5;
2.  
   num.toLocaleString( 'zh', { minimumSignificantDigits: 6, useGrouping: false }); //1234.50
3.  
   num.toLocaleString( 'zh', { maximumSignificantDigits: 4, useGrouping: false }); //1235
4.  
   復制代碼

注意，maximumFractionDigits 與 maximumSignificantDigits 均是四舍五入，使用時需要注意。數字類型的 toLocaleString 介紹就告一段落，下面讓我們看看日期類型的 toLocaleString 的 options 有什么好用的屬性。

Date.prototype.toLocaleString

與數字類型不同，日期類型的 locales 對輸出的影響十分之大（其實數字類型影響也大，只是一般用不到），因而應該根據實際情況選擇合適的語言環境。一般而言，日期顯示是有要求的，樣式方面需要統一。但如果是內部項目或者是 pm 允許，那么使用 toLocaleString 格式化日期就相當好了。與數字類型一樣，只介紹常用屬性，詳細的屬性介紹請查閱MDN文檔。

hour12 表示是使用十二小時制還是二十四小時制，默認值視 locales 而定。例子如下：

1.  
   const date = new Date();
2.  
   date.toLocaleString( 'zh', { hour12: true }); //2018/4/4 下午6:57:36
3.  
   date.toLocaleString( 'zh', { hour12: false }); //2018/4/4 18:57:36
4.  
   復制代碼

之后就是格式化年月日時分秒星期等選項了，MDN 文檔說必須按照一定的分組設置屬性，實際使用中發現每個屬性單獨使用並不報錯，因而按屬性的值分開介紹會比較好理解。

具體的屬性一共有 9 個，分別是 weekday、era、year、month、day、hour、minute、second 與 timeZoneName。具體的意思，看單詞估計就能秒懂，不作過多解釋。然而需要留意的是他們的可選值。先討論weekday 與 era，它們均可以取值為 narrow、short 或 long，簡單說就是能有多短多短，縮寫與正常表現，具體表現如下：

1.  
   const date = new Date();
2.  
   date.toLocaleString( 'en', { weekday: 'narrow', era: 'narrow' }); //W A
3.  
   date.toLocaleString( 'en', { weekday: 'short', era: 'short' }); //Wed AD
4.  
   date.toLocaleString( 'en', { weekday: 'long', era: 'long' }); //Wednesday Anno Domini
5.  
   復制代碼

跟着是 timeZoneName 屬性，這個屬性只有short 或 long 兩個值，表現如下：

1.  
   const date = new Date();
2.  
   date.toLocaleString( 'zh', { timeZoneName: 'short' }); //2018/4/5 GMT+8 下午7:18:26
3.  
   date.toLocaleString( 'zh', { timeZoneName: 'long' }); //2018/4/5 中國標准時間 下午7:18:26
4.  
   復制代碼

剩下的屬性，均可以取值為 numeric 與 2-digit，簡單說就是否僅用兩位數字表示，看碼說話：

1.  
   const date = new Date();
2.  
   date.toLocaleString( 'zh', { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', }); //2018/4/5 下午7:30:17
3.  
   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
4.  
   復制代碼

（比較奇怪的是 hour、minute 與 second 三個屬性，無論設置為何值，表現都是一樣的，希望有大佬告知原因，我換成 en 環境也是一樣的。）

最后是 month 這個屬性，語言對月份有不同的展現，除去 numeric 與 2-digit 外，它額外多三個屬性，分別是 narrow、short 與 long。展示如下：

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