Analysis of problems existing in toLocaleTimeString() method

In the past two days, I have fixed a bug and found a problem: There is a difference between the toLocaleTimeString() method on IE and Google Chrome in converting the time part of the Date object (excluding date) into a "time string" according to the local time format. . There should be no difference in the methods originally, but the difference only appears after the browser processes it!

The following is the test code:

    /**   验证Date 对象(时间模块) toLocaleTimeString()方法分别在IE和谷歌浏览器上 根据本地时间格式，把 Date 对象的时间部分转换为“时间字符串”存在区别
    *   从而区别substr(index,length)方法为什么在处理同一个时间字符串，在两个浏览器上的到的结果不一样！
    * */function localeTime(){ 　　//toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分(不含日期)转换为字符串。var date = new Date();     //toLocaleTimeString()转换的时间，会在时、分、秒不足十的情况下在前面自行加"0"，如"01:02:03"  两个浏览器都会var localeTime = date.toLocaleTimeString();
        console.log(localeTime,localeTime.length);for(var i= 0; i<localeTime.length; i++){
            console.log(localeTime[i]);
        }var substr = localeTime.substr(0,6);
        console.log(substr);
    }function hou_min_sec(){ 　　//getHours(),getMinutes(),getSeconds() 单独获取Date 对象时分秒，然后通过拼接整合成一个时间字符串。var date = new Date();  //getHours(),getMinutes(),getSeconds() 获取的时间，"不会"在时、分、秒不足十的情况下自行加"0"，如"1:2:3",若要格式一样，则需要另行处理 两个浏览器都不会var hou = date.getHours();var min = date.getMinutes();var sec = date.getSeconds();var hou_min_sec = hou +":"+ min +":"+ sec;
        console.log(hou_min_sec,hou_min_sec.length);for(var i= 0; i<hou_min_sec.length; i++){
            console.log(hou_min_sec[i]);
        }var substr = hou_min_sec.substr(0,6);
        console.log(substr);
    }

The screenshot is as follows:

Figure 1: This picture shows the operation of the two methods on Google , it can be seen that the upper part toLocaleTimeString() is processed, and minutes and seconds are supplemented with 0 respectively; the lower part is obtained separately for minutes and seconds, without supplementing 0.

#Figure 2: This picture shows the operation of the two methods on IE11. Something went wrong, The above part is processed by toLocaleTimeString(). After adding 0 to minutes and seconds respectively, a space is added to the beginning of and to the left and right of ":" , This causes the length of the entire string to be lengthened from the original 8 to 13, which results in the substr(index,length) method’s running result being different from expected Inconsistent; in the lower part, since the hours, minutes, and seconds are obtained separately, although 0 is not added, the string is spliced ​​by ourselves , and there is no problem of adding spaces, so substr(index,length) The results of the method are consistent with expectations, and we can get the string we want.

Figure 3: This picture shows the operation of the two methods on Google. When hours, minutes and seconds are all more than 10, the result displayed is characters The string and data lengths are consistent .

Figure 4: This picture shows the operation of the two methods on IE11. When the hours, minutes, and seconds exceed 10, the displayed result strings appear to be the same. In fact, they are different . The difference in length between the two is due to the addition of spaces in toLocaleTimeString() .

Figure 5: This picture shows the operation of substr(index, length) on Google by the two methods. Since the length of the data is consistent , so is obtained The strings are the same as .

Figure 6: This picture shows the operation of substr(index, length) on IE11 by the two methods. Since the length of the data is inconsistent , so is obtained The strings are also different.

Finally, for the hours, minutes, and seconds obtained individually, that is, the results obtained by the three methods getHours(), getMinutes(), and getSeconds(), if it is less than "ten", There are differences in formats with other formats, so you only need to determine and supplement .

function hou_min_sec(){var date = new Date();var hou = date.getHours().toString();var min = date.getMinutes().toString();var sec = date.getSeconds().toString();if(hou.length == 1){ //通过判定各个变量的长度(先将它们的值转化为字符串格式)，来确定它们是否不足十hou = "0" + hou; //反正它们最后都是以字符串形式拼接，所以我认为这样补"0"最简单}else if(min.length == 1){
            min = "0" + min;
        }else if(sec.length == 1){
            sec = "0" + sec;
        }var hou_min_sec = hou +":"+ min +":"+ sec;
        console.log(hou_min_sec,hou_min_sec.length);for(var i= 0; i<hou_min_sec.length; i++){
            console.log(hou_min_sec[i]);
        }var substr = hou_min_sec.substr(0,6);
        console.log(substr);
    }

The above is the detailed content of Analysis of problems existing in toLocaleTimeString() method. For more information, please follow other related articles on the PHP Chinese website!