金色小芝麻

vuePress-theme-reco 金色小芝麻    2021 - 2023
金色小芝麻 金色小芝麻

Choose mode

  • dark
  • auto
  • light
主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
author-avatar

金色小芝麻

83

文章

27

标签

主页
分类
  • JavaScript
  • BUG复盘
  • SVG笔记
  • TypeScript
  • 个人总结
  • CSS笔记
  • 开发工具
  • 前端入门
  • Vue2.0
  • 性能优化
  • 架构学习
  • 每日一题
标签
时间轴
社交
  • 掘金 (opens new window)
  • 前端入门

    • 博客搭建过程及相关配置
    • 数组中的16种常用方法
    • JS中的数据类型简析——基本数据类型值
    • JS中的数据类型object基础
    • JS中三种常见的判断
    • 数据类型之间的区别(堆内存Heap VS 栈内存Stack)
    • JS基础练习题及解析
    • 开关灯的小案例
    • JS中数据类型检测方法——typeof
    • 条件判断几个小练习
    • JS循环——for循环
    • 自定义属性实现选项卡小案例
    • 字符串中的12种常用方法
    • DOM操作的简单原理
    • JS实现隔行变色鼠标跟随小案例
    • JS中function的基础知识
    • JS中数组去重的三种方法
    • JS中时间格式化的三种方法
    • JS中URL参数处理的三种方法
    • JS小案例——获取随机验证码
    • DOM操作之——获取DOM标签的9种方式
    • DOM操作之——DOM节点类型及属性
    • DOM操作之——元素的增删改、样式修改、插入内容
    • JS中THIS相关问题梳理
    • JS中的变量提升机制
    • 在全局:私有上下文中:带VAR和不带VAR的区别
    • 作用域和作用域链查找机制
    • JS中堆栈内存的释放问题
    • JS中的闭包机制
    • ES3和ES6定义变量的区别
    • JS中的单例和工厂设计模式
    • JS中的面向对象OOP理论基础
    • 构造函数创建自定义类
    • JS中的原型和原型链
    • Math中常用的9种方法
    • 从一道阿里经典面试题剖析函数三种角色
    • 重写内置call
    • 重写一个内置new
    • 浏览器渲染页面的主体流程
    • 减少DOM的回流和重绘
    • JS中的多种继承方式
    • JS中数据类型检测四种方式的优缺点
    • JS中的正则表达式&&全面梳理
    • 非严格模式 🆚 严格模式的区别
    • 数组方法reduce、filter、flat
    • 获取数组中最大值/最小值的三种基础方法
    • 轮播图——渐隐渐显版
    • 深克隆 VS 浅克隆|深比较 VS 浅比较|回调函数
    • 轮播图——左右切换版
    • 事件及事件绑定、事件对象及事件传播
    • 从在地址栏输入网址到看到页面的过程&&AJAX基础
    • 想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS
    • 面试手写API系列
    • 30张脑图带你从零开始学VUE
    • JS中的盒子模型
    • 初识JS-基础中的基础
    • 前端发展简史
    • JS中的三大类输出方式

JS中时间格式化的三种方法

vuePress-theme-reco 金色小芝麻    2021 - 2023

JS中时间格式化的三种方法

金色小芝麻 2020-04-20

# 需求:

时间字符串格式化:

  • let time = '2020/3/11 14:10:0';
  • 把上面类型的时间日期字符串转化为我们想要的格式
    • =>"2020年03月11日 14时10分00秒"

# 一、正则处理(优)

(proto => {
    function formatTime(template = '{0}年{1}月{2}日 {3}时{4}分{5}秒') {
        let arr = this.match(/\d+/g);
        return template.replace(/\{(\d+)\}/g, (_, n) => {
            let item = arr[n] || '0';
            item.length < 2 ? item = '0' + item : null;
            return item;
        });
    }
    proto.formatTime = formatTime;
})(String.prototype);

let time = '2020-3-11 14:10:0';
console.log(time.formatTime());//=>2020年03月11日 14时10分00秒
console.log(time.formatTime('{1}-{2} {3}:{4}'));//=>03-11 14:10
console.log(time.formatTime('{0}年{1}月{2}日'));//=>2020年03月11日
  • 优点:灵活,万能(封装一个公共的,万能的时间格式化的方法)

# 二、字符串截取方式(良)

let time = '2020/3/11 14:10:0';

/* 1.把原始字符串中代表时间的值都获取到,最后拼接成为我们想要的即可 */
let arr = time.split(' '); //=>["2020/3/11", "14:10:0"]
let arrLeft = arr[0].split('/'); //=>["2020", "3", "11"]
let arrRight = arr[1].split(':'); //=>["14", "10", "0"]
arr = arrLeft.concat(arrRight); //=>["2020", "3", "11", "14", "10", "0"]

// 在拼接之前,需要把ARRLEFT和ARRRIGHT中不足两位的数字,前面补充零
arr = arr.map(item => item.length < 2 ? '0' + item : item);
time = `${arr[0]}年${arr[1]}月${arr[2]}日 ${arr[3]}时${arr[4]}分${arr[5]}秒`;

console.log(time);//=>"2020年03月11日 14时10分00秒"
  • 优缺点:思路简单,但不够灵活

# 字符串截取结合简单正则处理(1)

let time = '2020/3/11 14:10:0';

let arr = time.match(/\d+/g); //=>["2020", "3", "11", "14", "10", "0"]
arr = arr.map(item => item.length < 2 ? '0' + item : item);
time = `${arr[0]}年${arr[1]}月${arr[2]}日 ${arr[3]}时${arr[4]}分${arr[5]}秒`;

console.log(time);//=>2020年03月11日 14时10分00秒
  • 不够灵活

# 字符串截取结合简单正则处理(2)

let time = '2020/3/11 14:10:0';

// 不足十位补充零的操作封装为一个方法
function zero(val) {
    return val.length < 2 ? '0' + val : val;
}

let arr = time.split(/(?: |\/|:)/g); //=>["2020", "3", "11", "14", "10", "0"]
time = `${arr[0]}年${zero(arr[1])}月${zero(arr[2])}日 ${zero(arr[3])}时${zero(arr[4])}分${zero(arr[5])}秒`;

console.log(time);//=>2020年03月11日 14时10分00秒
  • 不够灵活

# 三、replace替换(差)

let time = '2020/3/11 14:10:0';

time = time.replace('/', '年').replace('/', '月').replace(' ', '日 ').replace(':', '时').replace(':', '分') + '秒';

console.log(time); //=>2020年3月11日 14时10分0秒
  • 缺点:没有实现不足十位数字的补充零

# 思维导图

欢迎来到 金色小芝麻
看板娘