VUE学习笔记——利用es6模板字符串实现时间格式化

本文利用es6的模板字符串来实现时间对象格式化为字符串

js中的时间对象Date的函数一览：

// date api
const date = new Date();
date.getFullYear();//获取时间对象的年份 4位数时间
// 2018
date.getMonth();//获取时间对象的月份（范围 0-11）
// 11
date.getDate();//获取时间对象的日期 
// 18
date.getDay();//获取时间对象的星期 （取值 0-6 周日作为开始日期）
// 0

我们将利用时间对象的这些函数配合模板字符串进行时间格式化

简单介绍一下模板字符串的用法

// 模板字符串
const test = `来自${window.location.host}:`;
const test2 = "来自"+window.location.host+":";

两行代码的作用是等效的 但对于模板字符串的写法更加简洁，使用``将字符串括起来并用${}插入自定代码即可（这个符号在键盘1号键的左边）

// 时间格式化api
export function dateFormat(date = new Date(), formatStr = "yyyy-MM-dd") {
  formatStr = formatStr.replace(new RegExp("yyyy"), `${date.getFullYear()}`);
  const month = date.getMonth() + 1;
  formatStr = formatStr.replace(new RegExp("MM"), `${month > 9 ? month : "0" + month}`)
  const day = date.getDate();
  formatStr = formatStr.replace(new RegExp("dd"), `${day > 9 ? day : "0" + day}`)
  const hour = date.getHours()
  formatStr = formatStr.replace(new RegExp("HH"), `${hour > 9 ? hour : "0" + hour}`)
  const min = date.getMinutes()
  formatStr = formatStr.replace(new RegExp("mm"), `${min > 9 ? min : "0" + min}`)
  const sec = date.getSeconds();
  formatStr = formatStr.replace(new RegExp("ss"), `${sec > 9 ? sec : "0" + sec}`)
  return formatStr;
} 

对于day hour 这些的取值为了避免重复取值操作将其先取值赋值再继续模板填充