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 NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
JavaScript中isPrototypeOf函数
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
You might like
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
js 异步处理进度条
2010/04/01 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Tensorflow累加的实现案例
2020/02/05 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
Python中pass的作用与使用教程
2020/11/13 Python
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
运动会入场解说词
2014/02/07 职场文书
趣味活动策划方案
2014/02/08 职场文书
银行委托书范本
2014/04/04 职场文书
学校创先争优活动总结
2014/08/28 职场文书
歌咏比赛主持词
2015/06/29 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python