对于开发人员来说,处理日期和时间可能是最乏味和最复杂的任务之一。虽然基本操作和日期比较可能很简单,但除此之外的任何事情通常都需要额外的时间和考虑。幸运的是,大多数编程语言和框架都提供内置 API 来简化日期和时间操作。
JavaScript 提供了一个内置Date 对象,使您可以轻松地操作日期和时间,但操作只是我们所做的一部分。当我们需要格式化一个Date 对象以将其表示形式存储在数据库中或将其传输到另一个系统时,JavaScript 可以轻松处理这些情况。然而,用自定义格式表示Date 对象(向最终用户显示日期和时间时的常见要求)提出了挑战。
在本教程中,我们将深入研究将 JavaScript 对象格式化为常见格式的艺术Date ,为您提供有效应对日期和时间相关挑战的宝贵技能。
格式化为 ISO
国际标准化组织(通常称为 ISO)提供了一种广泛使用的格式,以人类和机器可读的格式表示日期和时间。它可用于各种目的,例如数据传输和存储,并且它确保跨各种系统和应用程序的日期和时间的一致且易于解释的表示。
遵循 ISO 8601 标准,格式显示为yyyy-mm-ddThh:mm:ss.sssZ ,其中“ T ”分隔日期和时间部分,“ sss ”表示毫秒,“ Z ”表示协调世界时 (UTC)。例如:
const date = new Date(2023, 5, 4, 13, 5, 34);
const formattedString = date.toISOString();
console.log(formattedString); // output: 2023-06-04T18:05:34.000Z
在此代码中,我们创建一个Date 表示 2023 年 6 月 4 日下午 1:05:34 的对象(假设当前时间为中部夏令时间)。通过调用该toISOString() 方法,我们将日期和时间格式化为 ISO 标准,并将结果字符串存储在 formattedString 变量中。在控制台中显示时,输出会显示 ISO 8601 格式的日期、时间(转换为 UTC)和毫秒。请记住,您的结果可能会因您的特定时区而异。
将日期格式设置为 yyyy-mm-dd
另一种有用的格式是年-月-日,或yyyy-mm-dd ,它通常用于数据库、API 和不需要时间组件的各种数据交换格式中。要实现此格式,您可以从 ISO 字符串中提取前十个字符。但是,请记住以toISOString() UTC 格式设置日期,这可能会产生预期的结果。为了确保结果可预测,建议您直接从对象中提取年、月和日Date 。此方法可保证一致且准确的表示,而不会出现潜在的 UTC 相关问题。考虑以下代码:
function formatYMD(date) {
const year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
return `${year}-${month}-${day}`;
}
此代码定义了一个名为的函数formatYMD() ,该函数接受一个Date 对象作为输入。在函数中,前三行提取year 、month 和day 值(需要注意的是,0 JavaScriptDate 对象中的月份从 开始)。接下来的行通过在单位数字前面添加“ ”来确保month 和值都表示为两位数字。然后,格式化的部分用连字符连接起来,组成最终的格式化字符串。day 0 yyyy-mm-dd
要使用此函数,您只需向其传递一个Date 对象即可,如以下示例所示:
const date = new Date(2023, 5, 4); // June 4, 2023
const output = formatYMD(date);
console.log(output); // 2023-06-04
格式为 mm/dd/yyyy 和 dd/mm/yyyy
以最终用户习惯的格式显示日期至关重要。虽然前面提到的格式是人类可读的,但该mm/dd/yyyy 格式在美国普遍使用。为了满足用户期望这种格式,我们可以编写以下函数:
function formatMDY(date) {
const year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
return `${month}/${day}/${year}`;
}
此代码定义了该函数,该函数与上一节中讨论的函数formatMDY() 具有类似的方法。formatYMD() 函数的开头提取日期值并将month 和day 值规范化为两个字符的字符串。该函数使用斜杠连接日期部分,从而产生mm/dd/yyyy 格式化字符串。
大多数其他***/地区都使用一种dd/mm/yyyy 格式,我们可以为这些用户提供类似的功能,如下所示:
function formatDMY(date) {
const year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (month < 10) {
month = '0' + month;
}
if (day < 10) {
day = '0' + day;
}
return `${day}/${month}/${year}`;
}
该函数再次遵循与前面示例相同的方法。然而,区别在于输出。在这里,我们使用斜杠连接day 、month 、 和year 来生成dd/mm/yyyy 格式化字符串。
格式化时间
与格式化日期不同,格式化时间在全球范围内相对一致。大多数***/地区都采用这种hh:mm 格式,但有些***/地区使用 12 小时制,而另一些***/地区则坚持 24 小时制。幸运的是,我们可以使用以下函数来容纳这两种格式:
function formatTime(date, clockType = 24) {
let hours = date.getHours();
let minutes = date.getMinutes();
let amPm = '';
if (clockType === 12) {
amPm = 'AM';
if (hours > 12) {
hours = hours - 12;
amPm = 'PM';
} else if (hours === 0) {
hours = 12;
}
}
if (hours < 10) {
hours = '0' + hours;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
return `${hours}:${minutes}${amPm}`;
}
此代码引入了该formatTime() 函数,该函数接受两个参数:一个 JavaScript Date 对象和一个数值,该数值指示时间应采用 12 小时 (AM/PM) 格式还是默认的 24 小时格式。
Date 该函数的开头分别使用getHours() 和方法从给定对象中提取小时和分钟getMinutes() 。它将amPm 变量初始化为空字符串,稍后将保存 12 小时格式的 AM/PM 指示器。对于 24 小时格式,该amPm 变量仍为空字符串。
然后该函数检查clockType 参数是否设置为12 。如果为 true,它将继续为 12 小时格式准备hours 和变量。amPm 它检查该hours 值是否大于12 ,表示下午或晚上。如果是,则减去 12hours 并将amPm 变量设置为“PM”。如果“小时”为0 (午夜),则将“小时”设置为12 代表上午 12 点。对于上午时间(上午 1 点到上午 11 点),该函数保持hours 不变,因为它已经代表了正确的时间。
接下来,该函数通过在需要时用前导零填充来确保 和 都hours 表示minutes 为两位数。这允许一致的格式。然后,该函数将它们与冒号 ( : ) 和amPm 变量连接起来,生成最终的格式化时间字符串。
formatTime( 您可以像这样使用) :
const date = new Date();
const time24 = formatTime(date);
const time12 = formatTime(date, 12);
console.log(time24); // hh:mm
console.log(time12); // hh:mmAM or hh:mmPM
结论
格式化日期和时间是 JavaScript 开发中的常见要求,但 Date 对象的内置格式化功能有其局限性。我们经常发现自己负责实施我们自己的自定义格式解决方案。无论是以yyyy-mm-dd 、 、格式显示日期mm/dd/yyyy ,还是以其他自定义格式格式化时间,该Date 对象的方法都成为不可或缺的工具。
|