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"


相关文章
|
7月前
|
缓存 算法 Java
Linux内核新特性年终大盘点-安卓杀后台现象减少的背后功臣MGLRU算法简介
MGLRU是一种新型内存管理算法,它的出现是为了弥补传统LRU(Least Recently Used)和LFU(Least Frequently Used)算法在缓存替换选择上的不足,LRU和LFU的共同缺点就是在做内存页面替换时,只考虑内存页面在最近一段时间内被访问的次数和最后一次的访问时间,但是一个页面的最近访问次数少或者最近一次的访问时间较早,可能仅仅是因为这个内存页面新近才被创建,属于刚刚完成初始化的年代代页面,它的频繁访问往往会出现在初始化之后的一段时间里,那么这时候就把这种年轻代的页面迁移出去
|
机器学习/深度学习 存储 人工智能
大厂的广告系统升级,怎能少了大模型的身影
大厂的广告系统升级,怎能少了大模型的身影
255 0
|
算法 机器人 区块链
数字货币量化机器人系统开发(项目案例)/功能说明/逻辑方案/源码平台
  简单地说,量化交易机器人就是能够自动执行交易策略的交易软件。它借助于计算机技术和数学模型,对市场行情进行分析预测,并根据程序设定的规则和条件自动执行交易策略,完成交易操作。Compared with traditional manual trading,quantitative trading robots have faster trading speed,lower transaction costs,and higher trading efficiency.
|
Windows
分享五款功能简单粗暴的小软件
今天分享几款功能简单的小软件,小伙伴们们可以来看一下有没有你需要的功能软件。
149 0
分享五款功能简单粗暴的小软件
|
存储 SQL 缓存
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
216 0
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
|
存储 缓存 运维
完爆 90% 的性能毛病,22 点通用绝招介绍(二)
完爆 90% 的性能毛病,22 点通用绝招介绍(二)
完爆 90% 的性能毛病,22 点通用绝招介绍(二)
|
存储 NoSQL 算法
完爆 90% 的性能毛病,22 点通用绝招介绍(一)
完爆 90% 的性能毛病,22 点通用绝招介绍(一)
完爆 90% 的性能毛病,22 点通用绝招介绍(一)
|
Windows
五款好用到爆炸的小众软件,用过的都好说!建议收藏转发
今天推荐5款十分小众的软件,知道的人不多,但是每个都是非常非常好用的,有兴趣的小伙伴可以自行搜索下载。
221 0
五款好用到爆炸的小众软件,用过的都好说!建议收藏转发
降低悬赏平台源码复杂性,不可不知的四个小招数
降低悬赏平台源码复杂性,不可不知的四个小招数
1对1视频软件源码,系统实现了哪些盈利方式
1对1视频软件源码的优势之一,就是强大的引流变现能力,不仅能让平台实现盈利目的,还能满足用户引流变现的需求,那么在一对一直播系统中,主要有哪些盈利功能呢?