JS的本地化

本地化中主要的是日期、貨幣、數字等相關的顯示。很多文章介紹一些控件如moment.js, format.js等來做這些事情,實際上在新的JS規範中已經考慮了這些情況,並且提供了相關的函數等,完全沒有必要使用第三方控件。詳細內容請參考MDN中的說明:

https://developer.mozilla.org/en-US/docs/Web/JavaScript

下面簡單介紹一下使用方法

日期本地化

最簡單的方法就是使用 toLocaleXxx的接口,包括下面本個接口,其中localeId可以不傳,使用瀏覽器本地的格式

.toLocaleTimeString(localeId);    // h:m:s
.toLocaleDateString(localeId);    // Y:M:D

.toLocaleString(localeId);            // Y:M:D h:m:s

上面的三個接口的缺點是對於只有一位數字時沒有前導0。如果需要0對齊,則要用到Intl.DateTimeFormat,設置option相關的屬性值,主要有"numeric"(不帶前導0)"2-digit"(帶前導0)。下面是基於MDN中的樣例代碼稍做修改後的樣子,主要是爲了說明前導0的使用

var date = new Date(Date.UTC(2018, 5, 20, 3, 0, 0));

// sometimes even the US needs 24-hour time
options = {
  year: 'numeric', month: '2-digit', day: 'numeric',
  hour: 'numeric', minute: 'numeric', second: 'numeric',
  hour12: false,了// 使用24小時制
  timeZone: 'America/Los_Angeles' 
};
console.log(new Intl.DateTimeFormat('en-US', options).format(date));
// → "05/19/2018, 19:00:00"

數字本地化

數字本地化和日期類似,對簡單的使用可以通過 Number.toLocaleString完成,如

(new Number(123456.789)).toLocaleString('zh-CN');

對於更靈活的用法可以使用 Intl.NumberFormat來完成

貨幣本地化

貨幣也屬於數字,因此被合併到Intl.NumberFormat中通過兩個屬性style: 'currency', currency: 'XXX' 完成。但顯示的貨幣符號不太合適,如美元一般用 $,但顯示爲USA,人民幣使用¥,但顯示爲RMB


瀏覽器兼容問題

目前流行的主要瀏覽在新版本上都是支持的,包括IE11, Edge, chrome, firefox


結束語

做爲一個項目可以對這些進行簡單封裝在使用,讓每個頁面自己寫上面的代碼是不合適的。有需要的可以留言

最後想說一點,隨着JS的廣泛應用,很多在10年前或者5年前都需要自己寫的JS代碼,瀏覽器現在都已經內置,我們不需要再引入第三方插件了。必竟瀏覽器內置的代碼要比第三方插件在穩定性和性能上都要好一些。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章