×

JavaScript:理解格式化属性toLocaleString()的应用

作者:andy0012021.11.05来源:Web前端之家浏览:278评论:0
关键词:js

JavaScript:理解格式化属性toLocaleString()的应用。

研究Object对象的时候,看到了 toLocaleString() 这个方法可以很简单的实现时间格式化。

时间格式化常规思路

正常思路是通过Date的实例依次获取年月日等,例如一个简单的格式化例子:

Date.prototype.format = function(dateStr) {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate().toString().padStart(2, "0");
    let hour = date.getHours();
    let minute = date.getMinutes();
    let second = date.getSeconds();
    dateStr = dateStr.replace("年", year)
        .replace("月", month)
        .replace("日", day)
        .replace("小时", hour)
        .replace("分钟", minute)
        .replace("秒", second);
    return dateStr;
};
 
// 使用上面的方法
console.log(new Date().format("年-月-日")); // 2021-11-04

时间格式化toLocaleString()

toLocaleString()和 toString()类似,也是返回对象的字符串,不过会根据本地化的执行环境处理。尤其是对时间对象的支持,可以转成一定的格式。

// 日期,输出当前时间
let date = new Date();
// 这个是格林威治时间格式
console.log(date.toString()); // Thu Nov 04 2021 10:11:35 GMT+0800 (中国标准时间)
// 这个是本地时间格式
console.log(date.toLocaleString()); // 2021/11/4 上午10:18:08

新版本浏览器可以支持 locales 和 options 参数:

let date = new Date();
// 24小时制
let options = {
    year: 'numeric', month: 'numeric', day: 'numeric',
    hour: 'numeric', minute: 'numeric', second: 'numeric',
    hour12: false
};
console.log(date.toLocaleString("zh-CN", options)); // 2021/11/4 10:33:01

获取星期几:

let date = new Date();
let options = {
    weekday: "long"
};
console.log(date.toLocaleString("zh-CN", options)); // 星期四

options 更多的参数可以参考文章尾部提供的链接。

缺陷:

如果要显示 x年x月x日 这样的格式,目前没有找合适的写法,相对来讲 toLocaleString() 功能比较局限一些。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20211105a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    可以的,有什么问题吗?...

  • 访客

    我就试试的...

  • a235

    不能比啊,老外赚钱就是多!...

  • Web前端之家

    备份是必须的,避免麻烦!...

  • a235

    总结得不错,正好用到,提前备份还是最靠谱啊!...

  • Web前端之家

    谢谢支持,请持续关注Web前端之家!...

  • 访客

    文章很棒,做即时通讯也可以试试【GoEasy】这个框架,官网文档详细还提供了各种demo,大大降低了...

  • Web前端之家

    是的,等其他人验证没问题再装吧,总会有第一个吃螃蟹的人,哈哈!!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1