Javascript Date 格式化日期

        我们在使用Javascript 进行日期的操作的时候经常会碰到将日期按特定格式显示和输出的需求。例如YYYY-MM-DD HH:mm:ss 形式的，市面上也有很多现成的库或者代码片段可以用。那么如果我们想自己更灵活的方式组织或者显示该怎么办呢？这里着重介绍一下与locale（即区域）相关的几个方法来解决这个问题。

铺垫

        首先，我们要知道Date 对象其实提供了3个与locale 相关的方法，他们分别是toLocaleString()， toLocaleDateString() 和 toLocaleTimeString(); 其实多数的时候我们是直接调用这几个方法获取并使用其的输出结果，其实他们都能接受2个可选参数locale 和 options，这使得其功能变得更强大。

接下来，调用这几个方法看看会输出什么？Example1.js

/**未提供 locale 和 options 参数**/
let today = new Date();
console.log(navigator.language);//看看当前浏览器的默认语言是啥，我这里是简体中文，即zh-CN
console.log(today.toLocaleString());//输出结果是： "2021/9/8 下午8:16:28"
console.log(today.toLocaleDateString());//输出结果是："2021/9/8"
console.log(today.toLocaleTimeString());//输出结果是："下午8:16:28"

        可以看的出，输出的结果是根据浏览器的默认语言对应的国家/地区的时间记录格式来输出的。而且可以的出一个结论，那就是toLocaleString()的输出是完全包含了另外两个方法的内容，确切的说是另外两个字符串的拼接。

        如果将浏览器的默认语言改成美式英文，那么运行上面的代码将得到完全不同的结果。那么我们怎么才能不手工改变浏览器的默认语言还能得到想要的另外一个国家的日期输出格式呢？这里就要用到我们前面提到的参数locale了，locale是用来指定区域的（例如：中国大陆地区-'zh-CN'，中国香港地区-'zh_HK'，中国台湾地区-'zh_TW'，英国-'en-GB'，德国-'de-DE'，日本-'ja'，韩国-'ko'等等...）。关于locale 的完整列表请见链接

        下面通过设置locale来获得当前日期的韩国语输出格式试试。Example2.js

/**仅提供 locale 参数**/
let today = new Date();
console.log(today.toLocaleString('ko'));//输出结果是： "2021. 9. 8. 오후 8:16:28"
console.log(today.toLocaleDateString('ko'));//输出结果是："2021. 9. 8."
console.log(today.toLocaleTimeString('ko'));//输出结果是："오후 8:16:28"

        那么前面提到的options参数是做什么用的呢?其实就是设置输出的日期字符串中每个字段（年月日时分秒）的格式。而且只有给定的项才被输出，未给定的项将不包括在返回的字符串中。见下面的例子Example3.js， 请根据输出的结果和Example1.js 中的输出比较一下。

/**提供了 locale 和 options 参数**/
let today = new Date();
let option1 = {year:'2-digit', month:'2-digit',day:'2-digit'};
let option2 = {year:'numeric', month:'numeric', day:'numeric', 'weekday':'long'};
let option3 = {hour:'2-digit'};
console.log(today.toLocaleString('zh-CN', option1));//输出结果是： "21/09/08"
console.log(today.toLocaleDateString('zh-CN', option2));//输出结果是："2021年9月8日星期三"
console.log(today.toLocaleTimeString('zh-CN', option3));//输出结果是："下午08时"

        到这里，就可以得出一个结论。使用Date 提供的这几个方法，可以得到某个区域（语言区）的日期输出格式，并且可以指定其中数据项以什么形式出现。那么控制这些数据输出项的参数都有哪些呢？请见以下列表中给出的数据项及其可用的选项值。

Property	说明	Values
weekday	星期	"narrow", "short", "long"
era	纪元；例如：公元	"narrow", "short", "long"
year	年	"2-digit", "numeric"
month	月	"2-digit", "numeric", "narrow", "short", "long"
day	日	"2-digit", "numeric"
hour	时	"2-digit", "numeric"
minute	分	"2-digit", "numeric"
second	秒	"2-digit", "numeric"
timeZoneName	时区名称	"short", "long"
timeZone	时区，将会把时间的输出 转换到这个时区的时间	给定的时区字符串， 例如:"America/Los_Angeles"，完整列表见
hour12	true: 12小时制式, 默认 false: 24小时制式	true,false
calendar	使用什么样的日历。 如果是chinese,则是中国农历 默认为“gregory”	“buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "iso8601", "japanese", "persian", "roc"
numberingSystem	数字的显示方式, 默认 "latn"	“arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".

使用

在了解了Date 对象的这些方法后，接下来试着解决一下实际问题。

1. 格式化时间输出

   • 输出成12小时制 YYYY-MM-DD hh:mm:ss 格式

     let today = new Date();//这里取了当前时间，可以是其他方式获取到的Date对象
     let option = {year:'numeric', month:'2-digit',day:'2-digit', hour:'2-digit',minute:'2-digit',second:'2-digit'};
     let data_str = today.toLocaleString('zh-CN',option);
     console.log(data_str);//2021/09/09 上午08:52:36
     ​
     let result = data_str.replace(/\//g,"-");//将分隔符'/'替换成'-'
     console.log(result);//2021-09-09 上午08:52:36
     ​

   • 输出成24小时制 YYYY-MM-DD HH:mm:ss 格式

     要达到这个目的，其实只需要在前面的例子上稍加改动即可，主要是在option里边将默认的12小时制改成24小时制即可。

     let today = new Date();//这里取了当前时间，可以是其他方式获取到的Date对象
     let option = {year:'numeric', month:'2-digit',day:'2-digit', hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:false}; //注意这里hour12 要给布尔值，而不是字符串'false'
     let data_str = today.toLocaleString('zh-CN',option);
     console.log(data_str);//2021/09/09 08:52:36
     ​
     let result = data_str.replace(/\//g,"-");//将分隔符'/'替换成'-'
     console.log(result);//2021-09-09 08:52:36
     ​

   • 输出成 xxxx年xx月xx日的格式

     let today = new Date();//这里取了当前时间，可以是其他方式获取到的Date对象
     let option = {year:'numeric', month:'long',day:'numeric'};
     let result = today.toLocaleDateString('zh-CN',option);
     console.log(result);//2021年9月9日

     ​

   • 带星期的输出

     如果需要将星期几也带入到输出的日期字符串中，那么需要将weekday 选项加入到option中。

     //假设需要输出的日期格式是 xxxx年xx月xx日星期x
     let today = new Date();//这里取了当前时间，可以是其他方式获取到的Date对象
     let option = {year:'numeric', month:'long',day:'numeric',weekday:'long'};
     let result = today.toLocaleDateString('zh-CN',option);
     console.log(result);//2021年9月9日星期四
     ​
     //如果要显示的是周x而不是星期x，那么可以通过下面的方式
     option = {year:'numeric', month:'long',day:'numeric',weekday:'short'};
     result = today.toLocaleDateString('zh-CN',option);
     console.log(result);//2021年9月9日周四

   • 时区相关的输出

     来看这么个需求，当需要在输出的日期字符串中带上当前的时区，可以考虑用下面的方式。

     let today = new Date();//这里取了当前时间，可以是其他方式获取到的Date对象
     //显示时区的完整名称信息用 timeZoneName:'long'
     let option = {year:'numeric', month:'2-digit',day:'2-digit', hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:false,timeZoneName:'long'}; 
     let data_str = today.toLocaleString('zh-CN',option);
     console.log(data_str);//2021/09/09 中国标准时间 08:42:56
     ​
     let result = data_str.replace(/\//g,"-");//将分隔符'/'替换成'-'
     console.log(result);//2021-09-09 中国标准时间 08:42:56
     ​
     //显示时区的简短名称信息用 timeZoneName:'short'
     option.timeZoneName = 'short';
     data_str = today.toLocaleString('zh-CN',option);
     console.log(data_str);//2021/09/09 GMT+8 08:42:56
     ​
     result = data_str.replace(/\//g,"-");//将分隔符'/'替换成'-'
     console.log(result);//2021-09-09 GMT+8 08:42:56

     那如果，需要将当前的时间转换成另外一个时区的时间输出改怎么办呢？option 参数里边提供了 timeZone 选项，它可以帮助完成这个需求。

     //本例中将当地时间(即北京时间)改成美国洛杉矶时间
     let option = {year:'numeric', month:'2-digit',day:'2-digit', hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:false,timeZoneName:'long',timeZone:'America/Los_Angeles'}; 
     let data_str = today.toLocaleString('zh-CN',option);
     console.log(data_str);//2021/09/08 北美太平洋夏令时间 17:42:56

     ​

2. 获取农历日期

        那么如何获取某个日期的农历呢？option 的 calendar 选项可以解决这个需求。

let today = new Date();//这里取了当前时间，可以是其他方式获取到的Date对象
let option = {year:'numeric', month:'numeric',day:'numeric',calendar:'chinese'}; 
let result = today.toLocaleString('zh-CN',option);
console.log(data_str);//2021年八月3

​

总结

1. 在使用Date 对象的 这几个locale 相关的方法的时候一定要注意一下浏览器兼容性。具体见这个链接。

2. 在调用toLocalexxx方法时只返回option参数中的给定项，因此可以比较灵活的组织各个项目。