下面给大家介绍我这个使用正则替换的方法,用于对时间戳进行自定义格式化。为了便于理解和减少代码量,以下代码基本使用ES6的语法。
一、需求:
后端一般返回时间戳让前端自主展示,如果每次都要引用一次时间类插件就过于麻烦,而且很多项目,特别是后台项目都要用到。因此需要一个好用的代码片段。
二、优势
- 体积小,不用引入任何插件,可直接使用;
- 代码可在本地随时修改,满足实际业务;
- 满足年份、月份、日期和时分秒等内容输出,且能最大限度自定义输出;
- 可以作为utils工具插件导出,在vue中还可以用于过滤器。
/**
* 格式化时间戳
* @param {String|Number} timestamp 毫秒时间戳
* @param {String} [format = 'YYYY-MM-DD HH:mm:ss'] 格式化类型正则
* @example
* // return '2022年04月29日 17:03:21:332'
* formatTime(1651223001332, 'YYYY年MM月DD日 HH:mm:ss:SSS');
* @returns {String}
*/
const formatTime = (timestamp, format) => {
// 设置默认格式,毫秒S/SS/SSS均显示三位数
format = format ? format.replace(/S+/, 'S') : 'YYYY-MM-DD HH:mm:ss';
let date = new Date(parseInt(timestamp));
// 正则映射
let data = {
'M+': date.getMonth() + 1, //月
'D+': date.getDate(), //日
'H+': date.getHours(), //小时
'm+': date.getMinutes(), //分
's+': date.getSeconds(), //秒
'q+': Math.floor((date.getMonth() + 3) / 3), //季度
S: date.getMilliseconds(), //毫秒
};
// 实际年份字符串
let yearStr = date.getFullYear() + '';
// 匹配年份y+
let [yearExp] = format.match(/Y+/) || [];
if (yearExp) {
let expLen = 4 - yearExp.length;
// 年份由右往左截取
let res = yearStr.substring(expLen);
// 替换年份内容
format = format.replace(yearExp, res);
}
// 遍历替换除了年份外的内容
format = Object.keys(data).reduce((pre, cur) => {
// 匹配的其他正则形式
let [dataExp] = pre.match(cur) || [];
// 匹配的其他时间字符串
let dataCont = data[cur] + '';
if (!dataExp) return pre;
// 部分单位填充左侧的0字符
let padding = dataCont.padStart(2, '0');
// 一位数或毫秒直接输出
let res = dataExp.length === 1 ? dataCont : padding;
return pre.replace(dataExp, res);
}, format);
return format;
};
// console.log(formatTime(new Date().getTime(), 'YYYY年MM月DD日'));
// console.log(formatTime(new Date().getTime(), 'YYYY年第q季度'));
// console.log(formatTime(new Date().getTime(), 'YYYY-MM-DD HH:mm:ss'));
// console.log(formatTime(new Date().getTime(), 'HH时mm分ss秒'));
// console.log(formatTime(new Date().getTime(), 'HH:mm:sss:SS'));