toLocalDateString原来有如此之多的功能

简介: toLocalDateString原来有如此之多的功能

关于时间处理的插件


我收录了关于时间处理的插件,现在比较流行使用的


image.png

时间处理插件


toLocaleDateString



toLocaleDateString方法返回该日期对象日期部分的字符串,该字符串格式因不同语言而不同。新增的参数 locales 和 options 使程序能够指定使用哪种语言格式化规则,允许定制该方法的表现(behavior)。


在旧版本浏览器中, locales 和 options 参数被忽略,使用的语言环境和返回的字符串格式是各自独立实现的


关于兼容性插件MDN

image.png


Date.prototype.toLocaleDateString()


Dat


Date 实例转为表示本地时间的字符串,有常见三种方法


  1. Date.prototype.toLocaleString():完整的本地时间。
  2. Date.prototype.toLocaleDateString():本地日期(不含小时、分和秒)。
  3. Date.prototype.toLocaleTimeString():本地时间(不含年月日)


new Date().toLocaleTimeString() // "下午12:26:15"
new Date().toLocaleDateString() // "2020/10/18"
new Date().toLocaleString() // "2020/10/18 下午12:26:24"


这三个方法都有两个可选的参数


new Date().toLocaleString([locales[, options]])
new Date().toLocaleDateString([locales[, options]])
new Date().toLocaleTimeString([locales[, options]])


这两个参数中,locales是一个指定所用语言的字符串,options是一个配置对象


如何使用



我是在Vue环境中使用的


显示日期


<p>{{formatDate('2020/10/18')}}</p>
结果: 2020年10月18日
formatDate(date) {
     const options = { year: 'numeric', month: 'long', day: 'numeric' }
     return new Date(date).toLocaleDateString('zh-CN', options)
}


显示星期


<p>{{formatDate('2020/10/18')}}</p>
结果: 2020年10月18日星期日
formatDate(date) {
     const options = {  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
     return new Date(date).toLocaleDateString('zh-CN', options)
}


不同地区语言


<p>{{formatDate('2020/10/18')}}</p>
结果: Sunday, October 18, 2020
formatDate(date) {
     const options = {  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
     return new Date(date).toLocaleDateString('en-US', options)
}


参数options



  1. dateStyle:可能的值为full、long、medium、short。
  2. timeStyle:可能的值为full、long、medium、short。
  3. month:可能的值为numeric、2-digit、long、short、narrow。
  4. year:可能的值为numeric、2-digit。
  5. weekday:可能的值为long、short、narrow。
  6. day、hour、minute、second:可能的值为numeric、2-digit。
  7. timeZone:可能的值为 IANA 的时区数据库。
  8. timeZooneName:可能的值为long、short。
  9. hour12:24小时周期还是12小时周期,可能的值为true、false


列子


new Date().toLocaleDateString('zh-CN', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
})
// "2020年10月18日星期日"
new Date().toLocaleTimeString('zh-CN', {
  timeZone: 'Asia/Shanghai',  
  hour12: false,
  timeZoneName: 'long'
})
// "中国标准时间 12:20:18"
new Date().toLocaleTimeString('zh-CN', {
  timeZone: 'Asia/Shanghai',  
  hour12: true,
  day: 'numeric'
})
// "18日 下午12:21:29"


扩展一下


分割


在Number的原型上也有这个方法toLocaleString,即 Number.prototype.toLocaleString()


const price = 12345678;
price.toLocaleString(); // => "12,345,678"


显示不同单位


currency 单位列表,查看
var price = 2499;
price.toLocaleString('zh-CN', {
  style: 'currency',
  currency: 'RMB'
});
// "RMB 2,499.00"
var price = 2499;
price.toLocaleString('zh-CN', {
  style: 'currency',
  currency: 'USD'
});
// "US$2,499.00"


控制小数位


var price = 2499;
price.toLocaleString('zh-CN', {
  style: 'currency',
  currency: 'KNS',
  minimumFractionDigits:3
});
// "KNS 2,499.000"


相关文章
|
存储 消息中间件 缓存
相比游戏客户端,游戏服务端开发无关紧要吗
感觉游戏服务端,除了更新,保存数据啊、生成随机物品啊、都没什么了,好像游戏开发场景中,服务端已经无关紧要了。看着客户端忙成狗,正在摸鱼的你是否也有过这样的疑问?
480 0
相比游戏客户端,游戏服务端开发无关紧要吗
|
4月前
|
缓存 算法 Java
Linux内核新特性年终大盘点-安卓杀后台现象减少的背后功臣MGLRU算法简介
MGLRU是一种新型内存管理算法,它的出现是为了弥补传统LRU(Least Recently Used)和LFU(Least Frequently Used)算法在缓存替换选择上的不足,LRU和LFU的共同缺点就是在做内存页面替换时,只考虑内存页面在最近一段时间内被访问的次数和最后一次的访问时间,但是一个页面的最近访问次数少或者最近一次的访问时间较早,可能仅仅是因为这个内存页面新近才被创建,属于刚刚完成初始化的年代代页面,它的频繁访问往往会出现在初始化之后的一段时间里,那么这时候就把这种年轻代的页面迁移出去
|
9月前
|
存储 缓存 测试技术
三十、如何迅速分析出系统I/O的瓶颈在哪里?
最容易想到的是存储空间的使用情况,包括容量、使用量以及剩余空间等。我们通常也称这些为磁盘空间的使用量,因为文件系统的数据最终还是存储在磁盘上。
79 0
|
11月前
|
机器学习/深度学习 存储 人工智能
大厂的广告系统升级,怎能少了大模型的身影
大厂的广告系统升级,怎能少了大模型的身影
213 0
|
Windows
分享五款功能简单粗暴的小软件
今天分享几款功能简单的小软件,小伙伴们们可以来看一下有没有你需要的功能软件。
105 0
分享五款功能简单粗暴的小软件
|
缓存 监控 前端开发
项目维护几年了,为啥还这么卡?
前段时间有个客户问我,为啥你们项目都搞了好几年了,为啥线上还会经常反馈卡顿,呃呃呃。。
|
存储 SQL 缓存
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
157 0
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
|
Windows
五款好用到爆炸的小众软件,用过的都好说!建议收藏转发
今天推荐5款十分小众的软件,知道的人不多,但是每个都是非常非常好用的,有兴趣的小伙伴可以自行搜索下载。
168 0
五款好用到爆炸的小众软件,用过的都好说!建议收藏转发
大幅度提升工作效率的5款软件,个个都是小巧实用无广告
今天再来推荐5个超级好用的效率软件,无论是对你的学习还是办公都能有所帮助,每个都堪称神器中的神器,用完后觉得不好用你找我。
315 0
大幅度提升工作效率的5款软件,个个都是小巧实用无广告
降低悬赏平台源码复杂性,不可不知的四个小招数
降低悬赏平台源码复杂性,不可不知的四个小招数