String.prototype.padStart() 기능 및 IE에서 실행하는법

■ 기능 및 예제

padStart() 메소드는 현재 문자열의 시작을 다른 문자열로 채워서 원하는 길이의 문자열로 만들어 반환한다.

채워넣기는 대상 문자열의 시작(좌측)부터 적용된다.

<select id="worktime_start" name="worktime_start" class="select_20">
	<option value="" selected>선택</option>	
</select>

                                
//30분단위 시간 selectbox 생성
var work_start = $("#worktime_start");
for(var i=0; i<24; i++){
    var str = i.toString().padStart(2, "0") + ":";
    var val = str + "00";
    work_start.append("<option val='" + val + "'>" + val + "</option>");
    val = str + "30";
    work_start.append("<option val='" + val + "'>" + val + "</option>");
}

결과

 

■ IE에서 실행되지 않는 문제 해결

padStart()는 Internet Explorer를 제외한 모든 브라우저를 지원한다.

IE에서 padStart()를 실행시키기 위해서는 MDN에서 제공하는 폴리필을 다른 모든 코드 이전에 추가시켜야 한다.

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/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); //append to original to ensure we are longer than needed
            }
            return padString.slice(0,targetLength) + String(this);
        }
    };
}

-> 추가할 코드

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

String.prototype.padStart()

-> 참조