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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
jquery的颜色选择插件实例代码
Oct 02 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
js计算精度问题小结
Apr 22 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
JavaScript中isPrototypeOf函数
JavaScript原型链详解
JavaScript组合继承详解
详细聊聊vue中组件的props属性
教你一步步实现一个简易promise
Nov 02 #Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
You might like
PHP用户指南-cookies部分
2006/10/09 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
react 生命周期实例分析
2020/05/18 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python制作websocket服务器实例分享
2016/11/20 Python
Python随机函数random()使用方法小结
2018/04/29 Python
django框架模板语言使用方法详解
2019/07/18 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python实现宿舍管理系统
2019/11/22 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
2019年Java面试必问之经典试题
2012/09/12 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
电台实习生求职信
2014/02/25 职场文书
数据保密承诺书
2014/06/03 职场文书
绿色环保标语
2014/06/12 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
2015个人半年总结范文
2015/03/09 职场文书
经营场所证明范本
2015/06/19 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书