迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中将字符串转换为日期

作者:迹忆客 最近更新:2023/03/24 浏览次数:

有时需要将字符串转换为日期格式。该字符串可以是作为字符串存储在数据库中的日期值,也可以是从 API 返回的值。无论哪种情况,都不能在日期选择器或输入类型 date 中直接使用此字符串值。因此,需要将字符串转换为日期对象才能在 HTML UI 中显示。由于采用字符串格式,因此无法执行特定于日期的操作。因此,我们需要将字符串转换为日期对象。在这里,我们列出了几种将字符串转换为日期的方法:

  • new Date()
  • Date.parse()
  • 拆分并转换为日期

在 JavaScript 中使用 new Date() 函数将字符串转换为日期

将字符串转换为日期的最常用方法是使用 new Date() 函数。new Date() 接受下面描述的各种形式的参数,但是返回一个日期对象。

  1. 没有参数作为参数。如果未将任何参数传递给 new Date() 函数,则 new Date() 将返回当前系统日期和时间,包括本地系统时间中的时区信息。
  2. 传递日期对象作为参数。new Date() 将返回一个日期对象,如作为参数传递的日期字符串所示。
  3. 传递字符串日期。new Date('2018-12-3') 函数最有趣的部分是,它可以将以字符串格式传递的日期作为参数转换为日期格式。我们将对此进行详细讨论。

将字符串日期作为参数传递

当我们以字符串格式将日期传递给 new Date() 时,它将转换为日期对象。字符串格式必须为 ISO 8601格式 - YYYY-MM-DD,才能正常使用。此方法可能无法将其他日期格式转换为日期对象。例如,参考以下代码:

new Date("2021-05-23");
new Date("2020/2/29");
new Date("2020-14-03");
new Date("14-02-2021");

输出:

Sun May 23 2021 05:30:00 GMT+0530 (India Standard Time)
Sat Feb 29 2020 00:00:00 GMT+0530 (India Standard Time)
Invalid Date
Invalid Date

从上面的示例中可以看到,日期唯一接受的字符串格式是 2021-05-232020/2/29new Date() 函数可以处理格式为 YYYY-MM-DDYYYY/MM/DD 的字符串。如果我们使用的其他字符串格式不符合 ISO 8601 标准,则 new Date() 将无法解析日期,并将返回为 Invalid date

备注

  • new Date() 仅可用于将符合 ISO 8601 格式 YYYY-MM-DD hh:mm:ss 的字符串转换为日期。
  • 对于 new Date() 无法理解的其他格式,最好将字符串拆分并将其作为参数传递给 new Date(),如本文中后续所介绍。
  • new Date() 也可以转换格式为 01 Mar 2020 12:30 或什至 MM DD YYYY HH:mm 的字符串。如果我们使用从后端通过 API 传递的值进行转换,则应确保传递的格式符合 new Date() 函数所理解的,最好检查 new Date() 返回有效的日期对象。否则,代码可能会中断。

在 JavaScript 中使用 Date.parse() 函数将字符串转换为日期

Date.parse() 是转换字符串日期的备选方案。它返回一个数字值而不是日期对象。因此,如果你希望使用日期对象,则需要进一步处理。它将解析的日期转换为一个数字,该数字表示自 1970 年 1 月 1 日午夜以来经过的毫秒数。它类似于时间戳格式,区别在于 Date.parse() 返回毫秒值,而不是秒。

Date.parse("2020-11-21")
Date.parse("2019-01-01T12:30:00.000Z")
Date.parse("20-11-2021")
Date.parse("11-20-2021")

输出:

1605916800000
1546345800000
NaN
1637346600000

值得注意的是,在可以接受的输入值类型方面,Date.parse()new Date() 相同,但是可以更好地手动检查日期是否为有效格式。这样的方法非常有用,特别是当我们处理 API 响应值时。在这种情况下,我们可能需要执行检查以确保后端返回的值符合 Date.parse()new Date() 函数所接受的日期格式。只需执行 isNaN() 检查,即可帮助识别并安全地使用日期转换方法。

let stringsFromAPI = ["2020-11-21", "20-11-2021"];

stringsFromAPI.forEach( (d) => {
    if (!isNaN(Date.parse(d))) {
        console.log(new Date(d));
    }    
})

输出:

Sat Nov 21 2020 05:30:00 GMT+0530 (India Standard Time)

请注意,此处的日期 20-11-2021 的格式为 DD-MM-YYYY。因此,Date.parse() 函数或 new Date() 函数将无法理解它。因此,如果 stringsFromAPI 是来自后端的值,则上述函数将仅转换那些符合可接受格式的日期。!isNaN(Date.parse(d)) 静默拒绝不正确的日期值,并记录成功转换的值。

备注

  • Date.parse()new Date() 相似,但返回类型不同,这使得它适合检查日期值的格式是否正确,还可以通过使用来分配日期 dateObj.setTime(Date.parse(DateString))
  • 与 Unix 时间戳相比,Date.parse() 返回的毫秒数可用于对日期进行精确比较,即使不使用 new Date() 将其转换为实际的日期对象也是如此。
  • Date.parse() 内部使用 new Date() 进行日期解析,因此 Date.parse() 函数也支持 new Date() 函数接受的格式。

在 JavaScript 中拆分字符串并将其转换为日期

Date.parse()new Date() 函数都是基于 ISO 8601 扩展日期格式设计的。有时,如果日期不符合预期的格式,我们将不得不通过拆分日期字符串,提取值并将其转换为日期对象来手动进行计算。令人惊讶的是,new Date() 还支持将 date 参数作为参数传递,并且我们将 date 对象作为输出。

根据参数创建日期的语法:

new Date(yearValue, IndexOfMonth, dayValue, hours, minutes, seconds)

其中,

  • yearValue:应符合 ISO 8061 YYYY 格式。例如 2021。如果我们以 YY 格式指定一个值,它将会被错误地接受。例如,仅将 2021 提到 21 会被认为是 1921 年而不是 2021 年。
  • IndexOfMonth:从索引 0 开始。因此,从 Month 值中减去 1。例如,对于 3 月,该值为 3,但 monthIndex 将为 2(即 3-1 = 2)。本月指数通常应在 0-11 范围内
  • dayValue:表示一个月中的某天。它应在 1-31 范围内,具体取决于一个月中的天数。例如:对于 21-05-2021,日期值为 21
  • hours:一天中的小时。例如 10 点。
  • minutes:过去一个小时的分钟数
  • seconds:保留超过一分钟的秒数。

以下是一个函数,该函数采用具有自定义日期格式的字符串-DD-MM-YYYYTHH:mm:SS,并返回一个日期对象。

function convertFromStringToDate(responseDate) {
    let dateComponents = responseDate.split('T');
    let datePieces = dateComponents[0].split("-");
    let timePieces = dateComponents[1].split(":");
    return(new Date(datePieces[2], (datePieces[1] - 1), datePieces[0],
                         timePieces[0], timePieces[1], timePieces[2]))
}

convertFromStringToDate("21-03-2020T11:20:30")

输出:

Sat Mar 21 2020 11:20:30 GMT+0530 (India Standard Time)

结论

只要字符串符合 ISO 8601 格式,最常用的 new Date() 函数对于将字符串日期转换为日期对象非常有用。与 new Date() 相比,Date.parse() 函数的不同之处在于,它返回一个数值,该数值包含自 1970 年 1 月 1 日以来经过的毫秒数,该毫秒数直到作为字符串参数传递的日期为止已经过去了。通过分割日期字符串并将日期组成部分作为参数传递给 new Date() 函数,可以转换不同的日期格式。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便