react时间戳转换成需要格式

2023-11-16

后端返回前端日期时间,一般给你的都是时间戳,然后前端展示需要转换成需要格式。以下是我开发中常遇到需要转换成的格式,看代码。

class DateApi {
    /**
     * 将输入的毫秒字符串or毫秒数转换成指定的字符串格式
     * @param {string} msStr 毫秒字符串 or 毫秒数
     * @param {string} format yyyy-MM-dd or yyyy-MM-dd hh:mm:ss
     * @return {string} 转换后的字符串
     */
    static format(msStr, format) {
        const date = new Date(msStr / 1);
        let fmt = format;

        const obj = {
            '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(), // 毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (String(date.getFullYear())).substr(4 - RegExp.$1.length));
        }
        const keys = Object.keys(obj);
        for (let i = 0; i <= keys.length; i += 1) {
            const k = keys[i];
            if (new RegExp(`(${k})`).test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (obj[k]) : ((`00${obj[k]}`).substr((String(obj[k])).length)));
            }
        }

        return fmt;
    }

    /**
     * 获得传入的秒字符串msStr距离现在时间的字符串,格式为 昨天 今天 明天 当前年3月4日 其余2000-01-01
     * @param {string} msStr 毫秒字符串
     * @return {string} 可以显示用的字符串
     */
    static format2(msStr, showYear) {
        let ms = new Date(DateApi.format(msStr, 'yyyy/MM/dd')).getTime() / 1000;
        const now = new Date(DateApi.format(new Date().getTime(), 'yyyy/MM/dd')).getTime() / 1000;
        ms = now - ms;

        const min = 60;
        const hour = 60 * min;
        const day = 24 * hour;

        if (ms === 0) {
            return '今天';
        }

        if (ms === day) {
            return '昨天';
        }

        if (ms === -day) {
            return '明天';
        }


        const date = new Date((msStr / 1));
        const nowYear = new Date().getFullYear();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;

        if (showYear === false && year === nowYear) {
            return `${month}月${date.getDate()}日`;
        }

        return `${date.getFullYear()}年${month}月${date.getDate()}日`;
    }
    /**
    *获取当前天数之前或者之后的日期
    *@num 之前或者之后多少天数 - 表示之前
    */
    static getDate(num, format) {
        const today = new Date();
        const targetday = today.getTime() + (1000 * 60 * 60 * 24 * num);
        const target = new Date();
        target.setTime(targetday);
        if (format) {
            return this.format(target.getTime(), format);
        }
        return target;
    }

}

module.exports = DateApi;

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react时间戳转换成需要格式 的相关文章

  • 在校学生如何白嫖黑群辉虚拟机和内网穿透,实现海量资源的公网访问?(小白专用)

    文章目录 前言 本教程解决的问题是 按照本教程方法操作后 达到的效果是 前排提醒 1 搭建群辉虚拟机 1 1 下载黑群辉文件 vmvare虚拟机安装包 1 2 安装VMware虚拟机 1 3 解压黑 群辉虚拟机文件 1 4 虚拟机初始化 1
  • vue 全局组件注册_如何注册vue3全局组件

    vue 全局组件注册 With the new versions of Vue3 out now it s useful to start learning how the new updates will change the way w
  • styled-components 的用法

    用于给标签或组件添加样式 给标签或组件添加样式 import styled from styled components styled button 给button标签添加样式 const Button styled button back
  • react基础--组件通讯:props基础、子传父、父传子、兄弟组件通讯、context跨级组件、props进阶

    目录 一 props基础 1 1 概述 1 2 函数组件通讯 1 2 1 基本用法 1 2 1 对象数据传递 1 3 类组件通讯 1 4 props的特点 二 组件通讯三种方式 2 1 父传子 2 2 子传父 2 3 兄弟组件通讯 三 co
  • Ionic3开发教程 - 开发(2)

    Ionic3开发系列教程Ionic3开发教程 环境准备 1 Ionic3开发教程 开发 2 Ionic3开发教程 发布Android版本 3 Ionic3开发教程 发布IOS版本 4 Ionic3开发教程 更新 5 本文中介绍的Ionic3
  • chrome浏览器安装redux-devtools调试工具

    chrome浏览器安装redux devtools调试工具 1 点击进入https www chromefor com 2 在搜索框搜索redux 3 找到最新版本 Redux DevTools v2 17 0 进行下载 4 选择下载线路
  • 为什么程序员都喜欢安静?

    大家回顾一下上学期间 你在上晚自习想完成今天老师布置的作业 但是你的班级却非常的吵闹 跟置身在菜市场一样 你能专心完成作业吗 不受周围吵闹环境的影响吗 相信大部分的人都难以静下心来认真完成作业 有时候好不容易想到一个思路 结果旁边的人拍你一
  • 一文揭秘饿了么跨端技术的演进、实践与落地

    本文会先带领大家一起简单回顾下跨端技术背景与演进历程与在这一波儿接着一波儿的跨端浪潮中的饿了么跨端现状 以及在这个背景下 相较于业界基于 React Vue 研发习惯出发的各种跨端方案 饿了么为什么会选择走另外一条路 这个过程中我们的一些思
  • 【react】新旧生命周期对比

    componentWillUpdate componentWillReceiveProps componentWillMount 上述这三个生命周期在V18以上的版本中 使用时要加上UNSELF name
  • Notion笔记搭建博客网站 - NotionNext

    NotionNext是什么 NotionNext是我在Github上开源的基于Next js框架开发的博客生成器 目的是帮助写作爱好者们通过Notion笔记快速搭建一个独立站 从而专注于写作 而不需要操心网站的维护 它将您的Notion笔记
  • React的超详细讲解

    React React的重点 webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器 module bundler 当 webpack 处理应用程序时 它会递归地构建一个依赖关系图 dependency
  • react之纯函数、函数组件、类组件、纯组件

    一 纯函数 Pure Function 定义 一个函数的返回结果只依赖于它的参数 并且在执行的过程中没有副作用 我们就把该函数称作纯函数 特点 1 函数的返回结果只依赖与它的参数 同一个输入只能有同一个输出 let foo a b gt a
  • React(一):React的设计哲学 - 简单之美

    React 一 React的设计哲学 简单之美 React 二 React开发神器Webpack React 三 理解JSX和组件 React 四 虚拟DOM Diff算法解析 React 五 使用Flux搭建React应用程序架构 Rea
  • 前端学科面试题大全

    作用域和值类型引用类型的传递 变量作用域 作用域变量访问区域 变量值存在栈中 变量赋值相当于值赋值 值传递与引用传递有哪些区别 函数内部 变量会先声明 形式参数变量声明提升 整个函数体有var声明的变量 如果没有访问全局定义的num2 函数
  • React核心概念:状态提升

    上一节 表单 下一节 组合vs继承 React核心概念 状态提升 引言 添加第二个输入框 编写转换函数 状态提升 经验总结 引言 很多情况下我们使用的多个组件需要对同一个数据做出对应的反应 在这里我们推荐把这个共享的状态提升到距离这些组件最
  • React实现关键字高亮

    先看效果 实现很简单通过以下这个函数 highLight text keyword gt return text split keyword flatMap str gt span keyword span str slice 1 展示某段
  • hooks实践总结

    何为hooks 在React中hook是指不编写 class 的情况下使用 state 以及其他的 React 特性 而Vue3也推出了具有相同功能的组合式API 如果你用过Vue3就会知道在 setup 中你应该避免使用 this 因为h
  • 如何替换对象的key值

    发生的场景 现在用antd组件库 有些组件想渲染数据的话 我要根据他们官网给的字段名称对应起来才能渲染上去 这个是复选框选中 保存的时候 字段需要按照后台约定的传入code value 1 常规循环遍历 大招来了 哈哈哈 才疏学浅 我觉得是
  • React事件处理及事件流

    React事件处理 React事件处理是通过将事件处理器绑定到组建上处理事件 事件触发的同时更新组建的内部状态 内部状态更新会触发组件的重绘 React 元素的事件处理和 DOM 元素的事件处理很相似 但语法上的略有区别 在React中事件
  • 移动端H5开发遇到的问题

    移动端开发必会出现的问题和解决方案 H5开发过程中难免会遇到一些兼容性等爬过坑的问题 移动端 H5 相关问题汇总 1px 问题 响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白 页面件放大或缩小不确定性行为 click 点击

随机推荐

  • sudo apt-get update 报错(Ubuntu20.04)

    1 错误 今天运行 sudo apt get update 时报错 appstreamcli 10947 GLib ERROR 09 43 36 719 g variant new parsed 11 13 invalid GVariant
  • 分巧克力 蓝桥杯 99

    题目描述 儿童节那天有 K 位小朋友到小明家做客 小明拿出了珍藏的巧克力招待小朋友们 小明一共有 N 块巧克力 其中第 i 块是 Hi Wi 的方格组成的长方形 为了公平起见 小明需要从这N 块巧克力中切出 K 块巧克力分给小朋友们 切出的
  • OpenCV代码提取:dilate函数的实现

    Morphological Operations A set of operations that process images based on shapes Morphological operations apply a struct
  • 反汇编笔记

    1 OD中ctrl f9 运行到返回 就是运行到当前断点所在的函数末尾 retn xxx 处 若xxx 10 那么 10等于10进制的16 就是说这个函数有4个参数 一个参数默认是占4字节 所以就是retn 10 2 调试程序时 在OD内部
  • Windows-如何查看域用户的最终密码更改日期等详细信息

    有些公司的域用户密码是有期限的 比如1个月 3个月之类的 作为管理者或个人 你想查看自己或他人的域用户信息 比如上述的最终密码更改日期时间 就可以用下面这个命令 net user USERID domain 请把上面的红字改为你自己的用户名
  • 2022 ICPC Gran Premio de Mexico Repechaje 题解

    目录 A Average Walk 签到 题意 思路 代码 C Company Layoffs 签到 题意 思路 代码 D Denji1 模拟 二分 思路 代码 K Keypad Repetitions 签到 哈希 题意 思路 代码 L L
  • 【软件测试】备战秋招,数家公司的面经合集整理,总有一家你愿意去的,还不来赶紧学点经验。

    面经 前言 华为测试工程师 笔经 技术一面 技术二面 主管面 结果 大华测试 一面 二面 过了一两个小时就接到了 三面 下午3点接到hr电话 结果 中科创达 笔试 一面 技术面 二面 hr面 结果 恒生测试 安硕测试 恒生 安硕测试 深信服
  • java实现高校教务管理系统(带论文)

    xia基于java实现的高校教务管理系统 带论文 演示地址 教务系统登录 用户名 123456 密码 123456 论文 登录 学生管理 课程管理 学院管理 专业管理 下载地址 基于java实现的高校教务管理系统 带论文 源码世界
  • 以太坊私有链搭建

    https blog csdn net wxb880114 article details 79202378 以太坊私有链搭建
  • 包含中文的properties文件,第一行要空出来

    项目的配置文件中包含了中文 文件的编码格式为UTF 8 当读取properties文件时第一个Key总是失败 后面的Key则正常 Properties类API http docs oracle com javase 7 docs api j
  • setsockopt用法详解

    本文转载于 https www cnblogs com baiduboy p 8127913 html 最近做的一个程序用到了IOCP通信模型 里面用到了setsockopt对套接字进行设置 看源代码的时候最setsockopt函数很不理解
  • windows下用cygwin编译android版ijkplayer

    http blog csdn net ytzys article details 47302123
  • 向服务器请求数据的五种技术

    Ajax 在它最基本的层面 是一种与服务器通讯而不重载当前页面的方法 数据可从服务器获得或发送给服务器 有多种不同的方法构造这种通讯通道 每种方法都有自己的优势和限制 有五种常用技术用于向服务器请求数据 1 XMLHttpRequest X
  • 怎么解决ZBrush保存历史记录太多问题

    经常有用户反映说ZBrush 保存历史记录太多了 导致文件太大了 模型已经是降低级别保存了 在保存历史记录的时候还是很慢很慢 不知道怎么才能减少ZBrush保存的历史步骤的多少 针对这一问题 小编统一解答一下 造成保存历史记录过多的原因 当
  • 使用Python,OpenCV进行形态学操作

    使用Python OpenCV进行形态学操作 1 效果图 2 原理 3 源码 3 1 制作logo源码 https blog csdn net qq 40985985 article details 116025825 3 2 腐蚀膨胀打开
  • uni-app分享微信好友,朋友圈

    1 在mixin文件夹中创建一个 share js文件 export default data return 默认的全局分享内容 share title path 全局分享的路径 imageUrl 全局分享的图片 desc 定义全局分享 1
  • 【无人机】基于灰狼优化算法的无人机路径规划问题研究(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 1 概述 随着各种新兴技术的发展 无人机在灾后救援
  • 数据挖掘按技能划分,主要分为几类?

    数据挖掘技能从起初的单一门类的知识逐步发展成为一门综合性的多学科知识 并由此产生了很多的数据挖掘方法 这些方法种类多 类型也有很大的差别 为了满足用户的实际需要 现对数据挖掘技能进行如下几种分类 按挖掘的数据库类型分类 利用数据库对数据分类
  • 使用Chrome浏览器自带命令对web页面进行截图,生产高质量图片

    在平时工作中 我们对浏览器的web页面截图有很多方法 无论是Windows还是Mac操作系统 都自带截图工具 但是 如果我们打开的web页面非常的大 我使用操作系统自带的截屏工具就力不从心了 因为我们的显示屏幕不能显示web页面的所有内容
  • react时间戳转换成需要格式

    后端返回前端日期时间 一般给你的都是时间戳 然后前端展示需要转换成需要格式 以下是我开发中常遇到需要转换成的格式 看代码 class DateApi 将输入的毫秒字符串or毫秒数转换成指定的字符串格式 param string msStr