一行代码实现时间格式化—toLocaleString

平时经常会有时间格式化的需求，比如输出 2019-09-27 16:23:21 这样的时间格式。
下面我们分别通过传统的方式和通过 toLocaleString 接口来实现。

传统写法

我们先用传统的方式来实现，输出格式例如：2019-09-27 16:23:21

function currentTime() {
    var now = new Date();
    var zeroFill = function(value) {
        if (value < 10) {
            value = '0' + value
        }
        return value
    }

    var year = now.getFullYear();
    //年
    var month = zeroFill(now.getMonth() + 1);
    //月
    var day = zeroFill(now.getDate());
    //日
    var hh = zeroFill(now.getHours());
    //时
    var mm = zeroFill(now.getMinutes());
    //分
    var ss = zeroFill(now.getSeconds());

    return (`${year}-${month}-${day} ${hh}:${mm}:${ss}`);
}

使用 toLocaleString 接口

下面用浏览器提供的 toLocaleString 接口来实现。同样输出 2019-09-27 16:23:21 这样的格式。

new Date().toLocaleString('zh', { hour12: false }).replaceAll('/', '-')

如果只想获取日期也可以用 toLocaleDateString 接口，例如输出 2019-09-27 这样的格式

new Date().toLocaleDateString('zh').replaceAll('/', '-')

如果只想获取时间也可以用 toLocaleTimeString 接口，例如输出 16:23:21 这样的格式

new Date().toLocaleTimeString('zh', { hour12: false })

可以看出，用 toLocaleString、toLocaleDateString、toLocaleTimeString 等接口来获取日期时间确实比传统的写法更方便。

总结：

使用这个接口的好处当然是简单快捷，但也要注意以下几点。

注意⚠️：

1、该 API 不同浏览器需要考虑下参数兼容问题，如果对兼容性要求严格，建议还是使用 getFullYear… 等接口自行拼接或者使用现成库。

在 chrome 88、89 版本 toLocaleString 接口有一个bug， 就是获取的日期和时间之间少一个空格。
比如输出格式会变为 2019/09/2716:23:21
具体可以查看官方bug https://bugs.chromium.org/p/chromium/issues/detail?id=1170305&q=toLocaleString&can=2

2、如果用户是中文用户，不要忘记传 zh（不区分大小写） 参数。如果不传，默认会跟当前语言坏境输出不同的格式。

比如我在英文语言环境的操作系统下就会输出如下结果：

所以在不能确定用户使用操作系统的语言环境时，我们需要传 zh 参数确保格式解析不会出错。