Javascript 日期解析在 Chrome 中返回奇怪的结果

标签 javascript google-chrome date

我在 Chrome(版本 74.0.3729.131(官方构建)(64 位))中观察到一些奇怪的日期行为。 在 Chrome Dev Console 中执行了以下 javascript:

new Date('1894-01-01T00:00:00+01:00')
// result: Mon Jan 01 1894 00:00:00 GMT+0100 (Central European Standard Time)

new Date('1893-01-01T00:00:00+01:00')
// result: Sat Dec 31 1892 23:53:28 GMT+0053 (Central European Standard Time)

尽管提供了有效的 ISO8601 值,但我已经阅读过在不同浏览器中通过 Date ctor 进行非标准日期解析的内容。 但这不仅仅是奇怪o_o

在 Firefox(Quantum 66.0.3(64 位))中,相同的调用会产生预期的 Date 对象:

new Date('1894-01-01T00:00:00+01:00')
// result: > Date 1892-12-31T23:00:00.000Z

new Date('1893-01-01T00:00:00+01:00')
// result: > Date 1893-12-31T23:00:00.000Z
  • 这是 Chrome 中的错误吗?
  • 我猜我的输入是有效的 ISO8601?
  • 最重要的问题是,我该如何解决这个问题? (希望自己不解析输入字符串)

最佳答案

好吧,看来这种行为无法避免,所以你应该手动解析日期。但是解析它的方式非常简单。

如果我们解析 ISO 8601 格式的日期,日期字符串的掩码如下所示:

<yyyy>-<mm>-<dd>T<hh>:<mm>:<ss>(.<ms>)?(Z|(+|-)<hh>:<mm>)?

1。分别获取日期和时间

string 中的T 分隔日期和时间。所以,我们可以用 T

分割 ISO 字符串
var isoString = `2019-05-09T13:26:10.979Z`
var [dateString, timeString] = isoString.split("T")

2。从日期字符串中提取日期参数

因此,我们有 dateString == "2019-05-09"。现在单独获取这些参数非常简单

var [year, month, date] = dateString.split("-").map(Number)

3。处理时间字符串

对于时间字符串,由于它的可变性,我们应该做出更复杂的 Action 。
我们有 timeString == "13:26:10Z" 也有可能 timeString == "13:26:10"timeString == "13:26:10+01:00

var clearTimeString = timeString.split(/[Z+-]/)[0]
var [hours, minutes, seconds] = clearTimeString.split(":").map(Number)

var offset = 0 // we will store offset in minutes, but in negation of native JS Date getTimezoneOffset
if (timeString.includes("Z")) {
    // then clearTimeString references the UTC time
    offset = new Date().getTimezoneOffset() * -1
} else {
    var clearOffset = timeString.split(/[+-]/)[1]
    if (clearOffset) {
        // then we have offset tail
        var negation = timeString.includes("+") ? 1 : -1 // detecting is offset positive or negative
        var [offsetHours, offsetMinutes] = clearOffset.split(":").map(Number)
        offset = (offsetMinutes + offsetHours * 60) * negation
    } // otherwise we do nothing because there is no offset marker
}

至此,我们有了数字格式的数据表示:
日期小时分钟offset 以分钟为单位。

4。使用 ...原生 JS 日期构造函数

是的,我们无法避免它,因为它太酷了。 JS Date 自动匹配所有负值和过大值的日期。所以我们可以只传递原始格式的所有参数,JS Date 构造函数会自动为我们创建正确的日期!

new Date(year, month - 1, date, hours, minutes + offset, seconds)

瞧!这是完整的工作示例。

function convertHistoricalDate(isoString) {
  var [dateString, timeString] = isoString.split("T")
  var [year, month, date] = dateString.split("-").map(Number)
  
  var clearTimeString = timeString.split(/[Z+-]/)[0]
  var [hours, minutes, seconds] = clearTimeString.split(":").map(Number)
  
  var offset = 0 // we will store offset in minutes, but in negation of native JS Date getTimezoneOffset
  if (timeString.includes("Z")) {
    // then clearTimeString references the UTC time
    offset = new Date().getTimezoneOffset() * -1
  } else {
    var clearOffset = timeString.split(/[+-]/)[1]
    if (clearOffset) {
      // then we have offset tail
      var negation = timeString.includes("+") ? 1 : -1 // detecting is offset positive or negative
      var [offsetHours, offsetMinutes] =   clearOffset.split(":").map(Number)
      offset = (offsetMinutes + offsetHours * 60) * negation
    } // otherwise we do nothing because there is no offset marker
  }

  return new Date(year, month - 1, date, hours, minutes + offset, seconds)
}

var testDate1 = convertHistoricalDate("1894-01-01T00:00:00+01:00")
var testDate2 = convertHistoricalDate("1893-01-01T00:00:00+01:00")
var testDate3 = convertHistoricalDate("1894-01-01T00:00:00-01:00")
var testDate4 = convertHistoricalDate("1893-01-01T00:00:00-01:00")

console.log(testDate1.toLocaleDateString(), testDate1.toLocaleTimeString())
console.log(testDate2.toLocaleDateString(), testDate2.toLocaleTimeString())
console.log(testDate3.toLocaleDateString(), testDate3.toLocaleTimeString())
console.log(testDate4.toLocaleDateString(), testDate4.toLocaleTimeString())

注意事项

在这种情况下,我们正在获取 Date 实例,其所有值(如 .getHours())都被规范化,包括时区偏移. testDate1.toISOString 仍会返回奇怪的结果。但如果您正在使用这个日期,它可能会 100% 满足您的需求。

希望对您有所帮助:)

关于Javascript 日期解析在 Chrome 中返回奇怪的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56057128/

相关文章:

javascript - 处理使用 PeerConnection 时处理 ICE 候选人的过程?

IE8 中的 JavaScript 日期未定义/NaN

mysql - 错误代码 1292 日期不正确 |时间

javascript - .animate ScrollTop 可以工作但不流畅

javascript - 我需要帮助将重复性任务转化为递归函数 Javascript

javascript - Chrome 显示访问控制允许来源错误

html - Chrome 中的音频问题

php - 如何从 PHP 中的数字中获取月份名称?

javascript - 更改下拉选择的表单操作

javascript - 如何获取使用chartjs创建的canvas图表的data属性