如何在 TypeScript 中格式化日期/时间
我们可以在 TypeScript 中格式化日期/时间,方法是使用 Date
对象上的任何内置方法,或者创建一个可重用的函数,通过利用 getFullYear
、getMonth
等内置方法根据要求格式化日期。
// ✅ 使用内置方法
const date = new Date();
console.log(date.toLocaleString()); // 👉️ "3/7/2022, 4:11:58 PM"
console.log(date.toLocaleDateString()); // 👉️ "3/7/2022"
console.log(date.toLocaleTimeString()); // 👉️ "3/7/2022"
console.log(date.toUTCString()); // 👉️ "Mon, 07 Mar 2022 14:12:34 GMT"
// ✅ Format using reusable function
function padTo2Digits(num: number) {
return num.toString().padStart(2, '0');
}
// 👇️ format as "YYYY-MM-DD hh:mm:ss"
// You can tweak formatting easily
function formatDate(date: Date) {
return (
[
date.getFullYear(),
padTo2Digits(date.getMonth() + 1),
padTo2Digits(date.getDate()),
].join('-') +
' ' +
[
padTo2Digits(date.getHours()),
padTo2Digits(date.getMinutes()),
padTo2Digits(date.getSeconds()),
].join(':')
);
}
const result = formatDate(new Date());
console.log(result); // 👉️ "2022-03-07 16:10:22"
代码片段中显示的第一种方法使用 Date
对象上的内置方法来格式化日期和时间。
Date
对象有许多内置方法。 将日期格式化为通常以 to*
开头的方法的名称,例如 toLocaleString
或 toUTCString()
。
如果没有内置方法提供我们需要的格式,我们可以创建一个可重用的函数,根据用例格式化日期。
以下函数使用内置方法获取特定日期的年、月、日、时、分和秒,并将其格式化为 YYYY-MM-DD hh:mm:ss
。
我们可以轻松调整日期和时间的格式,甚至删除时间组件。 我们可以简单地重新排序数组中的元素,删除不需要的元素,或从连字符 - 更改分隔符,例如 正斜杠 /
。
// ✅ Format using reusable function
function padTo2Digits(num: number) {
return num.toString().padStart(2, '0');
}
// 👇️ format as "YYYY-MM-DD hh:mm:ss"
// You can tweak formatting easily
function formatDate(date: Date) {
return (
[
date.getFullYear(),
padTo2Digits(date.getMonth() + 1),
padTo2Digits(date.getDate()),
].join('-') +
' ' +
[
padTo2Digits(date.getHours()),
padTo2Digits(date.getMinutes()),
padTo2Digits(date.getSeconds()),
].join(':')
);
}
const result = formatDate(new Date());
console.log(result); // 👉️ "2022-03-07 16:10:22"
我们做的第一件事是创建一个 padTo2Digits
函数,如果月、日、小时、分钟或秒只包含一个数字(小于 10),它将负责添加前导零。
我们要确保结果始终保持一致,并且有 2 位数字表示月、日、小时、分钟和秒,因此我们使用了 padStart
方法。
接下来,我们创建了一个函数,它接受一个日期并将其格式化为 yyyy-mm-dd hh:mm:ss
。
该函数使用以下 6 种与日期相关的方法。
- Date.getFullYear - 返回一个四位数字,表示对应于日期的年份。
- Date.getMonth - 返回一个介于 0(一月)和 11(十二月)之间的整数,表示给定日期的月份。是的,不幸的是 getMonth 方法关闭了 1。
- Date.getDate - 返回一个介于 1 到 31 之间的整数,表示特定日期的月份日期。
- Date.getHours - 返回指定日期的小时数。
- Date.getMinutes - 返回日期的分钟数。
- Date.getSeconds - 返回特定日期的秒数。
getMonth
方法返回从 0 到 11 的从零开始的月份索引,这意味着一月是 0,十二月是 11。
getMonth
方法是从零开始的,所以我们在它的返回值上加了 1。
我们将年、月和日放在一个数组中,因此我们可以用连字符分隔符将它们连接起来。
console.log(['2023', '04', '28'].join('-')); // 👉️ '2023-04-28'
console.log(['2025', '07', '19'].join('-')); // 👉️ '2025-07-19'
这让我们得到格式为 yyyy-mm-dd
的日期。
下一步是将时间相关方法的返回值放在一个数组中,并用冒号连接它们。
console.log(['07', '30', '45'].join(':')); // 👉️ '07:30:45'
console.log(['09', '16', '51'].join(':')); // 👉️ '09:16:51'
我们使用加法 (+)
运算符在字符串中间添加一个空格,以获取格式为 yyyy-mm-dd hh:mm:ss
的日期。
我们可以轻松地对两个数组中的元素重新排序,或者将分隔符从连字符更改为正斜杠,从而以不同的方式格式化日期。
相关文章
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 Angular 中使用 TypeScript 的 getElementById 替换
发布时间:2023/04/14 浏览次数:153 分类:Angular
-
本教程指南提供了有关使用 TypeScript 在 Angular 中替换 document.getElementById 的简要说明。这也提供了在 Angular 中 getElementById 的最佳方法。
在 TypeScript 中使用 try..catch..finally 处理异常
发布时间:2023/03/19 浏览次数:181 分类:TypeScript
-
本文详细介绍了如何在 TypeScript 中使用 try..catch..finally 进行异常处理,并附有示例。
在 TypeScript 中使用 declare 关键字
发布时间:2023/03/19 浏览次数:97 分类:TypeScript
-
本教程指南通过特定的实现和编码示例深入了解了 TypeScript 中 declare 关键字的用途。
在 TypeScript 中 get 和 set
发布时间:2023/03/19 浏览次数:172 分类:TypeScript
-
本篇文章演示了类的 get 和 set 属性以及如何在 TypeScript 中实现它。
在 TypeScript 中格式化日期和时间
发布时间:2023/03/19 浏览次数:161 分类:TypeScript
-
本教程介绍内置对象 Date() 并讨论在 Typescript 中获取、设置和格式化日期和时间的各种方法。
在 TypeScript 中返回一个 Promise
发布时间:2023/03/19 浏览次数:182 分类:TypeScript
-
本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。
在 TypeScript 中定义函数回调的类型
发布时间:2023/03/19 浏览次数:221 分类:TypeScript
-
本教程说明了在 TypeScript 中为函数回调定义类型的解决方案。为了程序员的方便和方便,实施了不同的编码实践指南。
在 TypeScript 中把 JSON 对象转换为一个类
发布时间:2023/03/19 浏览次数:110 分类:TypeScript
-
本教程演示了如何将 JSON 对象转换为 TypeScript 中的类。