坑人的toLocaleDateString和简单地跳坑方式

　　最近在做一个一个医学大数据的项目的时候，独立设计、构思、制作了完成了一个生命历程图的功能。既然设计到时间，那就免不了对Date对象进行一系列的操作，也就免不了对日期对象进行一系列的格式化。走的路多了，难免遇到坑。其中toLocaleDateString就是一个天坑。

　　今天，上司和我说：“阿伦啊，你那个小卡片领导有点不满意啊，你再研究一下。”于是乎，我就开始了和UI的深入浅出地研究，最终定下了一版，我成功地把他实现了。当时我就跑到项目组每个人的电脑前让他们瞅瞅，我当时的想法是这样的：

　　但是，等等？what？纳尼？(⊙o⊙)？我在项目组数据分析师的电脑上看到了惊悚的一幕，类似这样的：

　　我有跑回去瞅了一下我的电脑，依旧完美地运行着。那么问题是什么呢？打开数据分析师的浏览器控制台，发现了一个报错“Unable to get property ‘mouths’ of undefined or null refernce”，虽然我属于英语困难户类型的，但是这句话也能猜个八九不离十，大概就是这个属性没找到。我分别对其上一层对象进行了打印，结果在我这里正常，在同事那里就是undefind。那么问题就来了，数据分析师使用的是搜狗浏览器，而博主使用的是chrome浏览器。因此，很可能是兼容的问题。于是乎，博主继续向上级打印。发现有一个数据dateEnd在我这里为“2018/3/2”，在同事那里是“2018年3月2日”。原因找到了，我在对这个数据进行处理的时候使用了字符串转数组的split('/')，但是问题是‘2018年3月2日’并没有“-”，所以只能被转换成了length为1的['2018年3月2日']，因此无法进行下一步处理了。

　　我研究了一下搜狗浏览器，发现其和360浏览器差不多，都有兼容模式和极速模式。兼容模式是使用了ie的内核，极速模式使用了webkit内核。而这个项目暂时是用ip地址登陆的，所以无意间触发了ie的Trident内核，因此引发了某些兼容问题。

　　找到问题后，博主查看了一下这个日期数据的来源，发现是一个代码"new Date().toLocaleDateString()"，即对当前的额日期数据进行格式化。于是乎，我分别在chrome浏览器和ie浏览器打印了一下，得到的结果分别是"2018/3/2"和"2018年3月2日"。

　　博主去MDN查找相关属性，结果发现了这样一段话“toLocaleDateString() 方法返回该日期对象日期部分的字符串，该字符串格式因不同语言而不同。新增的参数 locales 和 options 使程序能够指定使用哪种语言格式化规则，允许定制该方法的表现（behavior）。在旧版本浏览器中， locales 和 options 参数被忽略，使用的语言环境和返回的字符串格式是各自独立实现的。”貌似以前错过了什么，居然还有参数。也就是说不配置参数的话可能结果会随着浏览器的变化而变化。

　　经过测试，楼主发现在不同的浏览器结果是这样的：

# firefox
> new Date().toLocaleDateString()
> "2017/5/12"

#IE11
> new Date().toLocaleDateString()
> "2017-5-12"

#Chrome
> new Date().toLocaleDateString()
> "2017/5/12"

#Edge
> new Date().toLocaleDateString()
> "‎2018‎年‎3‎月‎2‎日"

　　我只是想静静地处理一下日期，你却这么对我，我选择toLocaleDateString() 狗带。

　　于是，我就随便写下了`/${new Date().getFullYear()}/${new Date().getMonth()}${new Date().getDate()}`。OK，收工。

　　生命在于折腾，完成项目之后，我用正则和简单的方法写了一个小的方法作为下次在遇到时的对策：

　　

var Format = function(date, rule) {
    this.time = date ? date : (new Date());
    this.rule = rule;
    if (this.rule) {
        this.standard()
    }
}
Format.prototype.standard = function() {
    let date = new Date(this.time)
    if (date == 'Invalid Date') {
        let reg1 = /^(\d{3,6}年)?\d{1,2}月(\d{1,2}日)?$/g,
            reg2 = /^\d{1,2}月(\d{1,2}日)?(\d{1,6}年)?$/g,
            reg3 = /^(\d{1,2}日)?\d{1,2}月(\d{1,6}年)?$/g,
            reg4 = /^\d{3,6}年$/;
        if (this.time.match(reg1)||this.time.match(reg2)||this.time.match(reg3)||this.time.match(reg4)){
            let timeRule 
                = new Date(`${(this.time.match(/\d{3,6}年/g))?(this.time.match(/\d{3,6}年/g)[0].replace(/年/g,'')
                .split('').reverse().concat([0,0,0,0,0,0]).reverse().slice(2).join(''))+'-':''}` 
                +`${(this.time.match(/\d{1,2}月/g))?(this.time.match(/\d{1,2}月/g)[0].replace(/月/g,''))+'-':''}`
                +`${(this.time.match(/\d{1,2}日/g))?(this.time.match(/\d{1,2}日/g)[0].replace(/日/g,'')):''}`);
            return timeRule == 'Invalid Date' ? '请输入正确的日期数字' : timeRule
        } else {
            return '请输入正确的日期，如2000年1月1日、2000-1-1或2000/1/1'
        }
    } else {
        this.time = new Date(this.time)
        return this.time
    }
}
Format.prototype.change = function() {
    if (!this.rule) {
        return this.standard()
    } else if (this.rule == 'chinese' || this.rule == 'line' || this.rule == 'slash') {
        let date = new Date(this.standard()).toDateString().split(' ');
        var month = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dece"];
        for (var i = 0; i < month.length; i++) {
            if (date[1] == month[i]) {
                date[1] = i + 1
            }
        }
        if (this.rule == 'chinese') {
            return `${Number(date[3])}年${Number(date[1])}月${Number(date[2])}日`
        } else if (this.rule == 'line') {
            return `${Number(date[3])}-${Number(date[1])}-${Number(date[2])}`
        } else {
            return `${Number(date[3])}/${Number(date[1])}/${Number(date[2])}`
        }
    } else {
        return '请输入正确的格式化参数：chinese、line或slash'
    }
}

　　调用的方法为：

new Format('2011年10月1日').standard()
//Sat Oct 01 2011 00:00:00 GMT+0800 (中国标准时间)

new Format('Sat Oct 01 2011 00:00:00 GMT+0800 (中国标准时间)', 'line').change()
//2011-11-1

new Format('Sat Oct 01 2011 00:00:00 GMT+0800','chinese').change()
//2011年11月1日

new Format('Sat Oct 01 2011 00:00:00 GMT+0800','slash’).change()
//2011/11/1

new Format('2011-11-1').change()
//Sat Nov 01 2011 00:00:00 GMT+0800 (中国标准时间)

 

 　　如果您觉得我的博文有用，请不要吝啬您的赞和关注。如需转载，请标明出处，谢谢。