JS的本地化

本文介绍了JavaScript中内置的日期、数字和货币本地化方法,包括toLocaleXxx接口和Intl对象的使用,强调了在新的JS规范中无需依赖第三方库如moment.js。详细讲解了如何利用这些接口进行本地化格式化,并指出当前主流浏览器对此的良好支持,建议在项目中适当封装以提高代码复用性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本地化中主要的是日期、货币、数字等相关的显示。很多文章介绍一些控件如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代码,浏览器现在都已经内置,我们不需要再引入第三方插件了。必竟浏览器内置的代码要比第三方插件在稳定性和性能上都要好一些。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值