JavaScript中时间格式化新思路toLocaleString()

 更新时间:2021年11月04日 17:25:44   作者:快乐编程  
这篇文章主要介绍了JavaScript中时间格式化新思路toLocaleString(),研究Object对象的时候,看到了 toLocaleString() 这个方法可以很简单的实现时间格式化,下面来看看toLocaleString() 的详细内容吧,需要的朋友可以参考一下

研究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()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序 tabs选项卡效果的实现

    微信小程序 tabs选项卡效果的实现

    这篇文章主要介绍了微信小程序 tabs选项卡效果的实现的相关资料,微信小程序内部组件没有Tabs 选项卡的功能,自己实现个类似的,需要的朋友可以参考下
    2017-01-01
  • 前端可视化搭建组件值校验规则详解

    前端可视化搭建组件值校验规则详解

    这篇文章主要为大家介绍了前端可视化搭建组件值校验规则详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JavaScript实现文本转换为文件示例详解

    JavaScript实现文本转换为文件示例详解

    这篇文章主要为大家介绍了JavaScript实现文本转换为文件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序 网络请求(post请求,get请求)

    微信小程序 网络请求(post请求,get请求)

    这篇文章主要介绍了微信小程序 网络请求(post请求,get请求)的相关资料,需要的朋友可以参考下
    2017-01-01
  • 微信小程序 高德地图SDK详解及简单实例(源码下载)

    微信小程序 高德地图SDK详解及简单实例(源码下载)

    这篇文章主要介绍了微信小程序 高德地图详解及简单实例(源码下载)的相关资料,需要的朋友可以参考下
    2017-01-01
  • 前端对接WebSocket与心跳重连实现

    前端对接WebSocket与心跳重连实现

    这篇文章主要为大家介绍了前端对接WebSocket与心跳重连实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 微信小程序 支付功能实现PHP实例详解

    微信小程序 支付功能实现PHP实例详解

    这篇文章主要介绍了微信小程序 支付功能实现PHP实例详解的相关资料,需要的朋友可以参考下
    2017-05-05
  • 详解JavaScript实现简单的词法分析器示例

    详解JavaScript实现简单的词法分析器示例

    这篇文章主要为大家介绍了详解JavaScript实现简单的词法分析器示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 17个JavaScript 单行程序

    17个JavaScript 单行程序

    这篇文章主要介绍了17个JavaScript 单行程序 ,在 JavaScript 代码的世界里,在保证代码易读性的前提下更少等于更好,下面文章将为大家分享17 个 JavaScript 单行程序代码,希望能帮助到大家
    2021-12-12
  • 13个JavaScript 一行程序,让你看起来就是个专家

    13个JavaScript 一行程序,让你看起来就是个专家

    JavaScript 可以做很多好玩的事, 从复杂的框架到处理API,有太多的东西需要学习。但是,它也能让我们只用一行就能做一些了不起的事情。今天的文章小编就为大家介绍13 个JavaScript 行程序,需要的朋友可以参考下
    2021-08-08

最新评论