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 相关文章推荐
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
node 文件上传接口的转发的实现
Sep 23 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
JavaScript中isPrototypeOf函数
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
You might like
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php实现递归的三种基本方式
2020/07/04 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
详解django中使用定时任务的方法
2018/09/27 Python
django2.0扩展用户字段示例
2019/02/13 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
Python生成器generator原理及用法解析
2020/07/20 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
市场营销专业个人自荐信格式
2013/09/21 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
出售房屋协议书范本
2014/10/06 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
详解python的内存分配机制
2021/05/10 Python