提升系列：4.获取格式化时间-4

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

提升系列

提升系列，我主要是想写一些平时工作上面，自己会用到的一些好的技巧或者方法。当然，这些技巧和方法是针对我自己的。

除此之外，还可能会写一些解决难点的方法。比如，遇到了某个难点，要通过什么方法来解决它？

正如它的名字一样--提升，通过学习一些好的技巧、方法，或者解决一些难题、难点，来提升我们的能力。

出这个提升系列，一方面，是提升自己的开发能力；另一方面，也希望这个提升系列，可以帮助到部分人，提升他们的开发能力。

在这个系列里，我能想到的或者实现方法，不一定是最好的。欢迎大家参与讨论。

问题

不过这没有吸引我的注意，看完标题后，往下看文章作者的头像时，发现名字下面有一排时间

我们前端开发的时候，经常会需要处理这些时间。比如后端返回一个时间戳给到我们前端，我们就需要把这个时间戳格式化为我们需要展示的时间。有些后端人可能比较好，会帮我们把时间的格式处理好了，返回给我们前端，我们前端直接使用就好了。但是大部分后端，可能没有这么好心，都是给一个时间戳给到我们前端，需要我们自己处理时间格式了。

前言

在提升系列前面几篇文章里，介绍了怎么利用原生javascript方式，或者使用第三方库moment.js或day.js来进行对时间的格式化。使用这几种方式，都可以对时间进行格式化处理。

除了这几种方式外，还有没有其它的方法来对时间格式进行处理呢？

有，后面我在开发的时候，又发现了一种新的方法来对时间进行格式化。它不用借助第三方依赖库，来进行处理。依然是使用原生的javascript来处理时间格式。

Date

在实现之前，先介绍一下要用到的Date类的实例方法

toLocaleDateString

这是MDN上，对toLocaleDateString方法的介绍

toLocaleDateString() 方法返回该日期对象日期部分的字符串，该字符串格式因不同语言而不同

toLocaleTimeString

这是MDN上，对toLocaleTimeString方法的介绍

The toLocaleTimeString() 方法返回该日期对象时间部分的字符串，该字符串格式因不同语言而不同

实现

创建一个index.html文件，在这个文件里实现我们的代码逻辑。

这里分为两部分进行处理，先是处理日期部分的格式，接着处理时间部分的格式。

日期部分格式处理

      let date = new Date();
      let time = date.toLocaleDateString();
      let arr = time.split("/");
      let joinArr = ["年", "月", "日"];
      let frontTime = arr.reduce((str, item) => {
        return (str += item + joinArr.shift());
      }, "");

• 先是声明一个Date的实例对象
• 调用Date的toLocaleDateString方法，获取日期格式
• 获取到的日期格式是字符串，把它分解为数组
• 定义我们想要的时间格式
• 利用数组的reduce方法进行遍历处理，拼接我们想要的时间格式

时间部分格式处理

调用Date的toLocaleTimeString方法，就可以获取到时间部分格式字符串了

date.toLocaleTimeString()

最后，把日期部分格式和时间部分格式拼接，打印输出

console.log(frontTime + " " + date.toLocaleTimeString())

查看打印结果

可以看到，时间格式化后结果打印出来了

放上我们的代码块

小结

本小节，主要是讲解了使用一种新的方法来处理时间格式。主要是使用Date对象的一些方法，可以快速获取到日期格式和时间格式的字符串。再按照我们想要的效果，进行对应的加工处理，就可以得到我们想要的时间格式了。

最后，放上自己比较喜欢的一句诗句：

千淘万漉虽辛苦，吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》