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代码,浏览器现在都已经内置,我们不需要再引入第三方插件了。必竟浏览器内置的代码要比第三方插件在稳定性和性能上都要好一些。



你可能感兴趣的:(本地化,国际化,JS)