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 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
利用python分析access日志的方法
Oct 26 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
layui实现三级导航菜单
Jul 26 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
JavaScript中isPrototypeOf函数
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
You might like
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
php实现插入排序
2015/03/29 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
domReady的实现案例
2016/11/23 Javascript
详解jQuery选择器
2016/12/21 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python中的各种装饰器详解
2015/04/11 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Python中文编码知识点
2019/02/18 Python
python中shell执行知识点
2020/05/06 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
软件测试笔试题
2012/10/25 面试题
求职简历推荐信范文
2013/12/02 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers