>  기사  >  웹 프론트엔드  >  toLocaleTimeString() 메소드에 존재하는 문제점 분석

toLocaleTimeString() 메소드에 존재하는 문제점 분석

零下一度
零下一度원래의
2017-06-26 11:16:342015검색

 지난 이틀 동안 버그를 수정하다가 문제를 발견했습니다. IE와 Google Chrome의 toLocaleTimeString() 메서드에서 Date 개체의 시간 부분(날짜 제외)을 "시간 문자열"로 변환하는 데 차이가 있습니다. " 현지 시간 형식에 따릅니다. 원래 메소드에는 차이가 없어야 하지만, 브라우저가 이를 처리한 후에야 차이가 나타납니다!

다음은 테스트 코드입니다.

    /**   验证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);
    }

스크린샷은 다음과 같습니다.

그림 1: 이 그림은 Google에서 두 메소드의 작동을 보여줍니다. 상단 toLocaleTimeString( )는 포인트를 처리하며, 초는 각각 0로 보완되며, 하단은 0의 보완 없이 각각 로 얻은 분과 초입니다.

그림 2: 이 그림은 IE11에서 두 가지 방법의 작동을 보여줍니다. 문제가 있습니다. 위의 toLocaleTimeString() 처리 부분은 분과 초에 각각 0을 추가하는 작업에서 의 시작 부분과 ":"의 왼쪽과 오른쪽에 공백 을 추가합니다. , 문자열의 길이가 원래 8에서 13으로 길어져 substr(index, length) 메소드의 실행 결과가 기대와 일치하지 않게 되었고, 는 따로 구하고, 시, 분, 초는 따로 구하는데 0은 추가하지 않았지만 문자열을 스스로 이어붙여 공백을 추가해도 문제가 없으므로 substr(index 의 실행 결과는 다음과 같습니다. , length) 방법은 기대한 것과 일치하며 원하는 문자열을 얻을 수 있습니다. 그림 3: 이 그림은 Google에서 두 가지 방법의 작동을 보여줍니다.

시간, 분, 초가 모두 10

을 초과하면 표시되는 결과 문자열과 데이터 길이가 일치합니다. 그림 4: 이 그림은 IE11에서 두 메서드의 작동을 보여줍니다. 시, 분, 초가 10을 초과하면 표시되는

결과 문자열이 동일하게 나타납니다

. 사실 서로 다릅니다 둘 사이의 길이 차이는 toLocaleTimeString() 에 공백이 추가되었기 때문입니다. 그림 5: 이 그림은 두 가지 방법 중 Google에서 substr(index, length)를 실행하는 상황을 보여줍니다. 데이터의 길이가 일정하기 때문에

,

에서 얻은 문자열은 동일입니다. 그림 6: 이 그림은 두 가지 방법으로 IE11에서 substr(index, length)의 연산을 보여줍니다. 데이터의 길이 가 일관되지 않기 때문에

얻은 문자열

도 다릅니다 . 마지막으로 별도로 구한 시, 분, 초, 즉 getHours(), getMinutes(), getSeconds() 세 가지 메소드로 구한 결과에 대해 "10"보다 작으면 있습니다. 다른 형식의 차이점은 필요한 경우에만 보충하세요

.

rreee

위 내용은 toLocaleTimeString() 메소드에 존재하는 문제점 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.