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实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
JavaScript中isPrototypeOf函数
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
You might like
php的sso单点登录实现方法
2015/01/08 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
python中 logging的使用详解
2017/10/25 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
html5清空画布方法(三种)
2017/10/16 HTML / CSS
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
党性分析自查总结
2014/10/14 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
离婚协议书范文2016
2016/03/18 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
Java并发编程之Executor接口的使用
2021/06/21 Java/Android