JavaScript中字符串和Date的相互转换

2022-02-20 本文已影响0人 SpaceCat

JavaScript中格式化日期需要自己写，字符串转Date对象的方法效果上也有点诡异，分别介绍如下。

1、Date转字符串

JavaScript没有像Java一样提供方便的格式化日期字符串，只能是我们自己写。这里先写了一个数字左补零的函数，然后调用这个函数对日期中的各个时间成分格式化后拼接。具体如下：

//将num左补0为len长度的字符串
function lpadNum(num, len) {
    var l = num.toString().length;
    while(l < len) {
        num = "0" + num;
        l++;
    }
    return num;
}
//将传入的Date格式化为"yyyyMMdd HH:mm:ss.SSS"
function formatDate(d){
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var hours = d.getHours();
    var minutes = d.getMinutes();
    var seconds = d.getSeconds();
    var milliSeconds = d.getMilliseconds();
    var resStr = year + lpadNum(month, 2) + lpadNum(day, 2) + " " + lpadNum(hours,2) + ":" + lpadNum(minutes,2) + ":" + lpadNum(seconds,2) + "." + lpadNum(milliSeconds, 3);
    return resStr;
}

2、字符串转Date

2.1 介绍

2.1.1 语法

显式调用:

Date.parse(dateString)

隐式调用:

new Date(dateString)

2.1.2 参数

标准上来说，这个方法接收的参数是一个ISO 8601格式的字符串(实际上ISO 8601这个标准规定的时间格式非常送，这个函数也并不是所有的ISO 8601格式的字符串都支持，而是只支持比较严格的那种)。其他的格式可能也能接受，但是各个浏览器平台的支持可能有差异。

For example, "2011-10-10" (date-only form), "2011-10-10T14:48:00" (date-time form), or "2011-10-10T14:48:00.000+09:00" (date-time form with milliseconds and time zone) can be passed and will be parsed. When the time zone offset is absent, date-only forms are interpreted as a UTC time and date-time forms are interpreted as local time.

比如，支持2011-10-10(只有日期的时间形式)、2011-10-10T14:48:00(日期带时间的时间形式)、2011-10-10T14:48:00.000+09:00(日期带毫秒时间和时区偏移的时间形式)，如果没有带时区偏移，那么只有日期的时间形式表示的是UTC时间，日期带时间的形式表示的本地时间。

2.1.3 返回值

正常的话，这个函数返回从January 1, 1970, 00:00:00 UTC到对应时间点的毫秒数。如果传入的字符串没有被正确识别，返回的就是NaN

2.2 例子

在苹果电脑上测试了两个浏览器Chrome和Safari，结果如下。
Chrome（版本 98.0.4758.102（正式版本） (x86_64)）：

formatDate(new Date(Date.parse("2022-02-13 15:16:19.450")));
'20220213 15:16:19.450'
formatDate(new Date(Date.parse("2022-02-13T15:16:19.450")));
'20220213 15:16:19.450'

Safari（版本13.0.3 (15608.3.10.1.4)）：

> formatDate(new Date(Date.parse("2022-02-13 15:16:19.450")));
< "NaN NaN:NaN:NaN.NaN"
> formatDate(new Date(Date.parse("2022-02-13T15:16:19.450")));
< "20220213 23:16:19.450"

从上面的结果看来，Chrome的支持比较灵活，但是Safari就不行，只支持严格的"2022-02-13T15:16:19.450"格式(实际中也试过IE，运行效果和Safari一样)。

3、一个简单地获取服务器时间的jsp测试页面

代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  java.util.Date nowDate = new java.util.Date();
  //java格式化时间的字符串中，如果有其他非格式字符要加单引号
  java.text.SimpleDateFormat df = new java.text.SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS");
  String nowDateStr = df.format(nowDate);
%>
<html>
  <head>
    <title>Test Javascript Date and Time</title>
  </head>
  <body>
  </body>
  <script language="JavaScript">
      //将num左补0为len长度的字符串
      function lpadNum(num, len) {
          var l = num.toString().length;
          while(l < len) {
              num = "0" + num;
              l++;
          }
          return num;
      }
      //将传入的Date格式化为"yyyyMMdd HH:mm:ss.SSS"
      function formatDate(d){
          var year = d.getFullYear();
          var month = d.getMonth() + 1;
          var day = d.getDate();
          var hours = d.getHours();
          var minutes = d.getMinutes();
          var seconds = d.getSeconds();
          var milliSeconds = d.getMilliseconds();
          var resStr = year + lpadNum(month, 2) + lpadNum(day, 2) + " " + lpadNum(hours,2) + ":" + lpadNum(minutes,2) + ":" + lpadNum(seconds,2) + "." + lpadNum(milliSeconds, 3);
          return resStr;
      }
      var serverTimeStr = "<%=nowDateStr%>";
      console.log("ServerTimeStr:"+serverTimeStr);
      console.log("ClientTimeStr:"+formatDate(new Date()));
      var serverDate = new Date(Date.parse(serverTimeStr));
      console.log("ServerTimeStr, reformatted:"+formatDate(serverDate));
  </script>
</html>

参考资料

Date.parse()