推荐22个实用的一行Javascript代码Date大全,建议收藏
lipiwang 2024-10-18 09:42 18 浏览 0 评论
日常开发中,Date对于我们来说是经常使用到的,平常使用的一些UI框架,如Antd、ElementUI等都会使用像moment.js、day.js的时间工具库去处理它们关于时间的组件,但当我们脱离这些框架,想去解决一个关于时间转换的问题,引入一个时间工具库就显得冗余了,由此这里给大家分享22个关于Date实用的一行Javascript与typescript代码大全,建议收藏阅读!
前置知识
Intl 对象是 ECMAScript 国际化 API 的一个命名空间,它提供了精确的字符串对比、数字格式化,和日期时间格式化。Collator,NumberFormat 和 DateTimeFormat 对象的构造函数是 Intl 对象的属性。了解更多
Intl.DateTimeFormat是根据语言来格式化日期和时间的对象的构造器
语法:
// locales为语言
new Intl.DateTimeFormat([locales[, options]])
Intl.DateTimeFormat.call(this[, locales[, options]])
// 格式化对应语言得日期,date为Date实例,返回日期字符串
new Intl.DateTimeFormat(locale).format(date)
// 获取时区
Intl.DateTimeFormat().resolvedOptions().timeZone
22个关于Date实用的一行Javascript与typescript代码大全
为小时添加AM/PM
JavaScript 版本
// `h` 是 0 到 23 之间的小时数
const suffixAmPm = (h) => `${h % 12 === 0 ? 12 : h % 12}${h < 12 ? 'am' : 'pm'}`;
TypeScript 版本
const suffixAmPm = (h: number): string => `${h % 12 === 0 ? 12 : h % 12}${h < 12 ? 'am' : 'pm'}`;
Demo
suffixAmPm(0); // '12am'
suffixAmPm(5); // '5am'
suffixAmPm(12); // '12pm'
suffixAmPm(15); // '3pm'
suffixAmPm(23); // '11pm'
计算两个日期之间的差异天数
JavaScript 版本
const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));
TypeScript 版本
const diffDays = (date: Date, otherDate: Date): number => Math.ceil(Math.abs(date.valueOf() - otherDate.valueOf()) / (1000 * 60 * 60 * 24));
Demo
diffDays(new Date('2014-12-19'), new Date('2020-01-01')); // 1839
计算两个日期之间的月数
JavaScript 版本
const monthDiff = (startDate, endDate) => Math.max(0, (endDate.getFullYear() - startDate.getFullYear()) * 12 - startDate.getMonth() + endDate.getMonth());
TypeScript 版本
const monthDiff = (startDate: Date, endDate: Date): number => Math.max(0, (endDate.getFullYear() - startDate.getFullYear()) * 12 - startDate.getMonth() + endDate.getMonth());
Demo
monthDiff(new Date('2020-01-01'), new Date('2021-01-01')); // 12
比较两个日期
JavaScript 版本
// `a` 和 `b` 是 `Date` 实例
const compare = (a, b) => a.getTime() > b.getTime();
TypeScript 版本
const compare = (a: Date, b: Date): boolean => a.getTime() > b.getTime();
Demo
compare(new Date('2020-03-30'), new Date('2020-01-01')); // true
将日期转换为 YYYY-MM-DD 格式
JavaScript 版本
// `date` 是对象实例
const formatYmd = (date) => date.toISOString().slice(0, 10);
TypeScript 版本
const formatYmd = (date: Date): string => date.toISOString().slice(0, 10);
Demo
formatYmd(new Date()); // 2020-05-06
将秒转换为 hh:mm:ss 格式
JavaScript 版本
// `s` 秒数
const formatSeconds = (s) => new Date(s * 1000).toISOString().substr(11, 8);
// Or
const formatSeconds = (s) => new Date(s * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
// Or
const formatSeconds = (s) => [parseInt(s / 60 / 60), parseInt((s / 60) % 60), parseInt(s % 60)].join(':').replace(/\b(\d)\b/g, '0$1');
TypeScript 版本
const formatSeconds = (s: number): string => new Date(s * 1000).toISOString().substr(11, 8);
// Or
const formatSeconds = (s: number): string => (new Date(s * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/) as string[])[0];
// Or
const formatSeconds = (s: number): string => (
[parseInt(`${s / 3600}`), parseInt(`${(s / 60) % 60}`), parseInt(`${s % 60}`)].join(':').replace(/\b(\d)\b/g, '0$1')
);
Demo
formatSeconds(200); // 00:03:20
formatSeconds(500); // 00:08:20
从日期中提取年、月、日、时、分、秒和毫秒
JavaScript 版本
// `date` 是一个 `Date` 对象
const extract = (date) =>
date
.toISOString()
.split(/[^0-9]/)
.slice(0, -1);
// `extract` 是一个 [年、月、日、小时、分钟、秒、毫秒] 的数组
TypeScript 版本
const extract = (date: Date): string[] =>
date
.toISOString()
.split(/[^0-9]/)
.slice(0, -1);
Demo
extract(new Date()); // ['2021', '12', '09', '04', '48', '36', '600']
格式化给定语言环境的日期
JavaScript 版本
// `date` 是一个 `Date` 对象
// `locale` 是一个语言环境(例如 en-US、pt-BR)
const format = (date, locale) => new Intl.DateTimeFormat(locale).format(date);
TypeScript 版本
const format = (date: Date, locale: string): string => new Intl.DateTimeFormat(locale).format(date);
Demo
format(new Date(), 'pt-BR'); // 06/05/2020
获取日期的当前季度
JavaScript 版本
const getQuarter = (d = new Date()) => Math.ceil((d.getMonth() + 1) / 3);
TypeScript 版本
const getQuarter = (d = new Date()): number => Math.ceil((d.getMonth() + 1) / 3);
以秒为单位获取当前时间戳
JavaScript 版本
const ts = () => Math.floor(new Date().getTime() / 1000);
TypeScript 版本
const ts = (): number => Math.floor(new Date().getTime() / 1000);
从日期获取一年中的哪一天
JavaScript 版本
// `date` 是一个 `Date` 对象
const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24));
TypeScript 版本
const dayOfYear = (date: Date): number => Math.floor((date.valueOf() - new Date(date.getFullYear(), 0, 0).valueOf()) / (1000 * 60 * 60 * 24));
Demo
dayOfYear(new Date(2020, 04, 16)); // 137
获取日期所在月份的第一个日期
JavaScript 版本
const getFirstDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth(), 1);
TypeScript 版本
const getFirstDate = (d = new Date()): Date => new Date(d.getFullYear(), d.getMonth(), 1);
获取日期所在月份的最后一个日期
JavaScript 版本
const getLastDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth() + 1, 0);
TypeScript 版本
const getLastDate = (d = new Date()): Date => new Date(d.getFullYear(), d.getMonth() + 1, 0);
获取日期的月份名称
JavaScript 版本
// `date` 是一个 Date 对象
const getMonthName = (date) => ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', ' November', 'December'][date.getMonth()];
TypeScript 版本
const getMonthName = (date: Date): string => ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', ' November', 'December'][date.getMonth()];
获取给定月份的天数
JavaScript 版本
// `month` 是从零开始的索引
const daysInMonth = (month, year) => new Date(year, month, 0).getDate();
TypeScript 版本
const daysInMonth = (month: number, year: number): number => new Date(year, month, 0).getDate();
获取时区字符串
JavaScript 版本
const getTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
TypeScript 版本
const getTimezone = (): string => Intl.DateTimeFormat().resolvedOptions().timeZone;
Demo
getTimezone(); // 'Asia/Saigon'
获取明天的日期
JavaScript 版本
const tomorrow = ((d) => new Date(d.setDate(d.getDate() + 1)))(new Date());
// Or
const tomorrow = new Date(new Date().valueOf() + 1000 * 60 * 60 * 24);
TypeScript 版本
const tomorrow: Date = ((d) => new Date(d.setDate(d.getDate() + 1)))(new Date());
// Or
const tomorrow: Date = new Date(new Date().valueOf() + 1000 * 60 * 60 * 24);
获取一年中的总天数
JavaScript 版本
const numberOfDays = (year) => ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 366 : 365);
// Or
const numberOfDays = (year) => (new Date(year, 1, 29).getDate() === 29 ? 366 : 365);
TypeScript 版本
const numberOfDays = (year: number): number => ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 366 : 365);
// Or
const numberOfDays = (year: number): number => (new Date(year, 1, 29).getDate() === 29 ? 366 : 365);
获取日期的工作日
JavaScript 版本
// `date` is a Date object
const getWeekday = (date) => ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][date.getDay()];
TypeScript 版本
const getWeekday = (date: Date): string => ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][date.getDay()];
获取昨天的日期
JavaScript 版本
const yesterday = ((d) => new Date(d.setDate(d.getDate() - 1)))(new Date());
// Or
const yesterday = new Date(new Date().valueOf() - 1000 * 60 * 60 * 24);
TypeScript 版本
const yesterday: Date = ((d) => new Date(d.setDate(d.getDate() - 1)))(new Date());
// Or
const yesterday: Date = new Date(new Date().valueOf() - 1000 * 60 * 60 * 24);
初始化当前日期但将时间设置为午夜
JavaScript 版本
const midnightOfToday = () => new Date(new Date().setHours(0, 0, 0, 0));
TypeScript 版本
const midnightOfToday = (): Date => new Date(new Date().setHours(0, 0, 0, 0));
对日期数组进行排序
JavaScript 版本
// `arr` 是一个包含 `Date` 项的数组
const sortDescending = (arr) => arr.sort((a, b) => a.getTime() > b.getTime());
const sortAscending = (arr) => arr.sort((a, b) => a.getTime() < b.getTime());
TypeScript 版本
const sortDescending = (arr: Date[]): Date[] => arr.sort((a, b) => a.getTime() - b.getTime());
const sortAscending = (arr: Date[]): Date[] => arr.sort((a, b) => b.getTime() - a.getTime());
相关推荐
- 前端入门——css 网格轨道详细介绍
-
上篇前端入门——cssGrid网格基础知识整体大概介绍了cssgrid的基本概念及使用方法,本文将介绍创建网格容器时会发生什么?以及在网格容器上使用行、列属性如何定位元素。在本文中,将介绍:...
- Islands Architecture(孤岛架构)在携程新版首页的实践
-
一、项目背景2022,携程PC版首页终于迎来了首次改版,完成了用户体验与技术栈的全面升级。作为与用户连接的重要入口,旧版PC首页已经陪伴携程走过了22年,承担着重要使命的同时,也遇到了很多问题:维护/...
- HTML中script标签中的那些属性
-
HTML中的<script>标签详解在HTML中,<script>标签用于包含或引用JavaScript代码,是前端开发中不可或缺的一部分。通过合理使用<scrip...
- CSS 中各种居中你真的玩明白了么
-
页面布局中最常见的需求就是元素或者文字居中了,但是根据场景的不同,居中也有简单到复杂各种不同的实现方式,本篇就带大家一起了解下,各种场景下,该如何使用CSS实现居中前言页面布局中最常见的需求就是元...
- CSS样式更改——列表、表格和轮廓
-
上篇文章主要介绍了CSS样式更改篇中的字体设置Font&边框Border设置,这篇文章分享列表、表格和轮廓,一起来看看吧。1.列表List1).列表的类型<ulstyle='list-...
- 一文吃透 CSS Flex 布局
-
原文链接:一文吃透CSSFlex布局教学游戏这里有两个小游戏,可用来练习flex布局。塔防游戏送小青蛙回家Flexbox概述Flexbox布局也叫Flex布局,弹性盒子布局。它决定了...
- css实现多行文本的展开收起
-
背景在我们写需求时可能会遇到类似于这样的多行文本展开与收起的场景:那么,如何通过纯css实现这样的效果呢?实现的难点(1)位于多行文本右下角的展开收起按钮。(2)展开和收起两种状态的切换。(3)文本...
- css 垂直居中的几种实现方式
-
前言设计是带有主观色彩的,同样网页设计中的css一样让人摸不头脑。网上列举的实现方式一大把,或许在这里你都看到过,但既然来到这里我希望这篇能让你看有所收获,毕竟这也是前端面试的基础。实现方式备注:...
- WordPress固定链接设置
-
WordPress设置里的最后一项就是固定链接设置,固定链接设置是决定WordPress文章及静态页面URL的重要步骤,从站点的SEO角度来讲也是。固定链接设置决定网站URL,当页面数少的时候,可以一...
- 面试发愁!吃透 20 道 CSS 核心题,大厂 Offer 轻松拿
-
前端小伙伴们,是不是一想到面试里的CSS布局题就发愁?写代码时布局总是对不齐,面试官追问兼容性就卡壳,想跳槽却总被“多列等高”“响应式布局”这些问题难住——别担心!从今天起,咱们每天拆解一...
- 3种CSS清除浮动的方法
-
今天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。首先,这里就不讲为什么我们要清楚浮动,反正不清除浮动事多多。下面我就讲3种常用清除浮动的...
- 2025 年 CSS 终于要支持强大的自定义函数了?
-
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!1.什么是CSS自定义属性CSS自...
- css3属性(transform)的一个css3动画小应用
-
闲言碎语不多讲,咱们说说css3的transform属性:先上效果:效果说明:当鼠标移到a标签的时候,从右上角滑出二维码。实现方法:HTML代码如下:需要说明的一点是,a链接的跳转需要用javasc...
- CSS基础知识(七)CSS背景
-
一、CSS背景属性1.背景颜色(background-color)属性值:transparent(透明的)或color(颜色)2.背景图片(background-image)属性值:none(没有)...
- CSS 水平居中方式二
-
<divid="parent"><!--定义子级元素--><divid="child">居中布局</div>...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- maven镜像 (69)
- undefined reference to (60)
- zip格式 (63)
- oracle over (62)
- date_format函数用法 (67)
- 在线代理服务器 (60)
- shell 字符串比较 (74)
- x509证书 (61)
- localhost (65)
- java.awt.headless (66)
- syn_sent (64)
- settings.xml (59)
- 弹出窗口 (56)
- applicationcontextaware (72)
- my.cnf (73)
- httpsession (62)
- pkcs7 (62)
- session cookie (63)
- java 生成uuid (58)
- could not initialize class (58)
- beanpropertyrowmapper (58)
- word空格下划线不显示 (73)
- jar文件 (60)
- jsp内置对象 (58)
- makefile编写规则 (58)