html常用代碼大全匯總常用簡單的js代碼大全 _經(jīng)驗(yàn)分享

日常開發(fā)中， Date對(duì)于我們來說是經(jīng)常使用到的，平常使用的一些UI框架，如Antd、ElementUI等都會(huì)使用像moment.js、day.js的時(shí)間工具庫去處理它們關(guān)于時(shí)間的組件，但當(dāng)我們脫離這些框架，想去解決一個(gè)關(guān)于時(shí)間轉(zhuǎn)換的問題，引入一個(gè)時(shí)間工具庫就顯得冗余了，由此這里給大家分享22個(gè)關(guān)于Date實(shí)用的一行Javascript與typescript代碼大全，建議收藏閱讀！

前置知識(shí)

Intl 對(duì)象是 ECMAScript 國際化 API 的一個(gè)命名空間，它提供了精確的字符串對(duì)比、數(shù)字格式化，和日期時(shí)間格式化。Collator ， NumberFormat 和 DateTimeFormat 對(duì)象的構(gòu)造函數(shù)是 Intl 對(duì)象的屬性。了解更多

Intl.DateTimeFormat是根據(jù)語言來格式化日期和時(shí)間的對(duì)象的構(gòu)造器
語法：

// locales為語言new Intl.DateTimeFormat([locales[, options]])Intl.DateTimeFormat.call(this[, locales[, options]])// 格式化對(duì)應(yīng)語言得日期 ， date為Date實(shí)例 ， 返回日期字符串new Intl.DateTimeFormat(locale).format(date)// 獲取時(shí)區(qū)Intl.DateTimeFormat().resolvedOptions().timeZone

22個(gè)關(guān)于Date實(shí)用的一行Javascript與typescript代碼大全
為小時(shí)添加AM/PMJavaScript 版本

// `h` 是 0 到 23 之間的小時(shí)數(shù)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'

計(jì)算兩個(gè)日期之間的差異天數(shù)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計(jì)算兩個(gè)日期之間的月數(shù)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比較兩個(gè)日期JavaScript 版本
// `a` 和 `b` 是 `Date` 實(shí)例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將日期轉(zhuǎn)換為 YYYY-MM-DD 格式【html常用代碼大全匯總常用簡單的js代碼大全】JavaScript 版本
// `date` 是對(duì)象實(shí)例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將秒轉(zhuǎn)換為 hh:mm:ss 格式JavaScript 版本

// `s` 秒數(shù)const formatSeconds = (s) => new Date(s * 1000).toISOString().substr(11, 8);// Orconst formatSeconds = (s) => new Date(s * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];// Orconst 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);// Orconst formatSeconds = (s: number): string => (new Date(s * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/) as string[])[0];// Orconst 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:20formatSeconds(500); // 00:08:20從日期中提取年、月、日、時(shí)、分、秒和毫秒JavaScript 版本

// `date` 是一個(gè) `Date` 對(duì)象const extract = (date) =>date.toISOString().split(/[^0-9]/).slice(0, -1);// `extract` 是一個(gè) [年、月、日、小時(shí)、分鐘、秒、毫秒] 的數(shù)組

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']格式化給定語言環(huán)境的日期JavaScript 版本

// `date` 是一個(gè) `Date` 對(duì)象 // `locale` 是一個(gè)語言環(huán)境（例如 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獲取日期的當(dāng)前季度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);以秒為單位獲取當(dāng)前時(shí)間戳JavaScript 版本
const ts = () => Math.floor(new Date().getTime() / 1000);TypeScript 版本
const ts = (): number => Math.floor(new Date().getTime() / 1000);從日期獲取一年中的哪一天JavaScript 版本

// `date` 是一個(gè) `Date` 對(duì)象 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獲取日期所在月份的第一個(gè)日期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);獲取日期所在月份的最后一個(gè)日期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` 是一個(gè) Date 對(duì)象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()];

獲取給定月份的天數(shù)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();獲取時(shí)區(qū)字符串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());// Orconst tomorrow = new Date(new Date().valueOf() + 1000 * 60 * 60 * 24);

TypeScript 版本

const tomorrow: Date = ((d) => new Date(d.setDate(d.getDate() + 1)))(new Date());// Orconst tomorrow: Date = new Date(new Date().valueOf() + 1000 * 60 * 60 * 24);

獲取一年中的總天數(shù)JavaScript 版本

const numberOfDays = (year) => ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 366 : 365);// Orconst 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);// Orconst numberOfDays = (year: number): number => (new Date(year, 1, 29).getDate() === 29 ? 366 : 365);

獲取日期的工作日J(rèn)avaScript 版本

// `date` is a Date objectconst 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());// Orconst yesterday = new Date(new Date().valueOf() - 1000 * 60 * 60 * 24);

TypeScript 版本

const yesterday: Date = ((d) => new Date(d.setDate(d.getDate() - 1)))(new Date());// Orconst yesterday: Date = new Date(new Date().valueOf() - 1000 * 60 * 60 * 24);

初始化當(dāng)前日期但將時(shí)間設(shè)置為午夜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));對(duì)日期數(shù)組進(jìn)行排序JavaScript 版本

// `arr` 是一個(gè)包含 `Date` 項(xiàng)的數(shù)組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());