项目中需要将后端返回的xx:xx根据需求转成xx小时xx分钟显示页面

前言

例如：项目中需要将后端返回的xx:xx根据需求转成xx小时xx分钟显示页面

---

一、使用步骤

1.在utils的date.js中定义方法

代码如下：

/**
 * @desc 将 xx:xx 转成xx小时xx分钟的处理
 * @param {} time 时间
 * @return {}
 */
export function convertTime(time) {
  // 将时间时分已 ： 分割并解构取值
  const [hour, minute] = time.split(':');
  // 判断小时是否以0开头
  if (hour.startsWith('0')) {
    // 判断分钟是否以0开头
    return minute.startsWith('0')
      ? `${hour.substr(1, 1)}小时${minute.substr(1, 1)}分钟`
      : `${hour.substr(1, 1)}小时${minute.substr(0, 2)}分钟`;
  } else {
    // 判断分钟是否以0开头
    return minute.startsWith('0')
      ? `${hour.substr(0, 2)}小时${minute.substr(1, 1)}分钟`
      : `${hour.substr(0, 2)}小时${minute.substr(0, 2)}分钟`;
  }
}

2.引入定义的方法

代码如下：

// 引入方法
import { convertTime } from '@/utils/date';
// 使用
let date = convertTime(02:02)
console.log("2小时2分钟")

let date = convertTime(12:12)
console.log("12小时12分钟")

总结

记录一下在项目中遇到的获取到后端的数据需要转换才能显示到页面，类似这种公共的方法抽离出去定义，这样别处引用或者以后封装函数库的时候比较方便。