toLocaleString 瞭解一下

hello~親愛的看官老爺們你們好~最近沉迷於學習其餘語言，有一段時間沒寫文章了。時間一晃就到了4月，再不寫就怕完全懶下去了。此次給你們分享 toLocaleString 的一點技巧，若是須要初始化數字或日期時，不妨考慮一下，會有偷懶奇效哦！

本文參考自 MDN 的文檔與平常使用所得，若是你對這個 API 已經至關熟悉，請幫我看下是否有遺漏（笑）；不瞭解的同窗能夠瀏覽一下，應該會對你有所幫助。

概述

toLocaleString 方法是用於返回格式化對象後的字符串，該字符串格式因不一樣語言而不一樣。能夠經過傳參決定返回的語言與具體的表現，某些場景下至關有用，語法以下：

object.toLocaleString([locales [, options]]);
複製代碼

locales 參數用於指定格式化對象時使用的語言環境，默認爲當前環境的語言，能夠不傳。該參數具體可選的值能夠參考 這裏，通常而言使用 en 或 zh 便可應付絕大多數狀況。例子以下：

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

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

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

最後則是兼容性問題，具體以下圖：

使用參數的狀況下兼容性稍差，這比較惋惜，但整體而言仍是比較樂觀的。

Number.prototype.toLocaleString

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

const num = 2333333;
num.toLocaleString();   // 2,333,333
複製代碼

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

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

const num = 2333333;
num.toLocaleString('zh', { style: 'decimal' });   //2,333,333
num.toLocaleString('zh', { style: 'percent' });   //233,333,300%
num.toLocaleString('zh', { style: 'currency' });    //報錯
複製代碼

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

const 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人民幣
複製代碼

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

let num = 2333.3;
num.toLocaleString('zh', { minimumIntegerDigits: 5 });        //02,333.3
//若是不想有分隔符，能夠指定useGrouping爲false
num.toLocaleString('zh', { minimumIntegerDigits: 5, useGrouping: false });        //02333.3
num.toLocaleString('zh', { minimumFractionDigits: 2, useGrouping: false });     //2333.30

num = 666.666
num.toLocaleString('zh', { maximumFractionDigits: 2, useGrouping: false });     //666.67
複製代碼

今後以後，補0與控制位數不再愁~

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

const num = 1234.5;
num.toLocaleString('zh', { minimumSignificantDigits: 6, useGrouping: false });      //1234.50
num.toLocaleString('zh', { maximumSignificantDigits: 4, useGrouping: false });      //1235
複製代碼

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

Date.prototype.toLocaleString

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

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

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
複製代碼

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

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

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
複製代碼

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

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

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

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
複製代碼

（比較奇怪的是 hour、minute 與 second 三個屬性，不管設置爲什麼值，表現都是同樣的，但願有大佬告知緣由，我換成 en 環境也是同樣的。）

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

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

小結

至此，關於 toLocaleString 的介紹就暫告一段落了。能夠看到，在某些場景下須要格式化對象成字符串時，能夠發揮極大的做用，再也不須要本身苦兮兮地寫函數作轉換。儘管這個 API 稍微冷門一點，但仍是頗有意思的。

感謝各位看官大人看到這裏，知易行難，但願本文對你有所幫助~謝謝！