JavaScript中时间格式化新思路toLocaleString()


Posted in Javascript onNovember 07, 2021

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

1、时间格式化常规思路

正常思路是通过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

2、时间格式化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() 功能比较局限一些。

到此这篇关于JavaScript中时间格式化新思路toLocaleString()的文章就介绍到这了,更多相关JavaScript toLocaleString()内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript String 对象
Apr 25 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
JSONP基础知识详解
Mar 19 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
JavaScript中isPrototypeOf函数
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
You might like
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Pycharm修改python路径过程图解
2020/05/22 Python
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
ktv收银员岗位职责
2013/12/16 职场文书
成品仓管员工作职责
2013/12/29 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
买房委托公证书
2014/04/08 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
离婚协议书范文2015
2015/01/26 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
2015年党总支工作总结
2015/05/25 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书