[오류해결] IE에서 padStart 사용하기

 

 

브라우저 별로 테스트를 하는 도중 아래와 같은 오류가 발생하였다.

 

 

 

 

 

 

1. 오류 발생 원인

우선 padStart()란 특정 길이에 도달할 때까지 문자열 앞 부분에 특정한 문자열을 채워주는 메서드이다. ES8(ES2017) 부터 새롭게 추가된 기능이며, IE 환경에서는 padStart() 메서드가 지원되지 않아 발생된 오류이다. 

아래 사이트에서 브라우저 별로 지원되지 않는 메서드를 확인할 수 있는데 padStart()를 검색하면 IE 환경에서 지원하지 않는다는 사실을 알 수 있다. 이뿐만 아니라 includes(), padEnd() 등의 메서드도 지원되지 않는 걸 확인할 수 있다.

 

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

 

 

 

 

 

 

 

 

728x90

반응형

 

2. 오류 해결

padStart를 사용하는 페이지에 아래와 같은 코드를 추가해주고 padStart를 사용하면 오류가 발생되지 않고 정상적으로 사용이 가능해진다.

if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength, padString) {
        targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0;
        padString = String(typeof padString !== 'undefined' ? padString : ' ');

        if (this.length >= targetLength) {
            return String(this);
        } else {
            targetLength = targetLength - this.length;

            if (targetLength > padString.length) {
                padString += padString.repeat(targetLength / padString.length);
            }
            return padString.slice(0, targetLength) + String(this);
        }
    };
    
	// code
	var test = “1”;
	var result = test.padStart(2, ‘0’);

	console.log(“결과 값 : “ + result); // 결과 값 : 01
}