[JS] 문자열 채우기 padStart, padEnd

나는 Zerofill을 원했다.

나는 임의의 숫자가 있을때 자리수 만큼 0을 추가 하고 싶었다. "000"+"1234" 로 하면 된다. 끝.

 

PHP 에서는.

$zerofillnum = sprintf("%05d",1234); 를 하면 01234 반환해준다.

 

그렇다면 JS 에서 Zerofill은?

padStart를 이용하면 된다. "1234".padStart(5,'0') 을 하면 된다.

반대로 뒤에 문자열을 추가 하고 싶다면 padEnd를 하면 된다.

그런데 이것이 인터넷 익스플로러에서는 안된다.

padStart와 padEnd의 MDN 문서를 보면 알 수 있다.

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

String.prototype.padStart() - JavaScript | MDN

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

String.prototype.padEnd() - JavaScript | MDN

 

인터넷 익스플로러를 위하여.

이제 저물어가는 IE를 위해 궂이 만들 필요가 있을까? 하는 생각이지만 아직 IE를 사용하는 곳이 있다. 그래서 클래임이 안들어 온다고 할 수 없는 문제다. 픽스 할 수 있으면 하는 것이 속 편하다.

참고로 KISA의 웹브라우저 통계는 아래 주소에서 확인 가능한데 6월 현재 IE는 5.91% 이다.

https://www.koreahtml5.kr/front/stats/browser/browserUseStats.do

KOREA HTML5 |

 

인터넷 익스플로러용 padStart, padEnd 만들기

padStart와 padEnd는 문자열을 추가하는 위치만 다를 뿐 다음의 조건은 동일하다.

• 두개의 인자값을 받으며, 첫번째 인자는 문자열의 길이, 두번째 인자는 추가되는 문자열이다.
  "hello".padStart(11, "world") = "worldwhello"
  "hello".padEnd(11," world") = "hello world"
• 첫번째 인자로 주어진 숫자는 반환되는 문자열의 전체 길이이다.
• 주어진 문자열 길이가 소스 문자열의 길이 보다 작으면 아무 일도 일어나지 않고 소스 문자열을 반환한다.
• 두번째 인자로 받은 문자열이 문자열 길이보다 많으면 문자열 길이 만큼만 추가 되고 나머지는 잘려나간다.

코드

String.prototype.getPadString = function(targetLength,padString){
	var srcString = this;
  	if(srcString.length >= targetLength || typeof(padString) == 'undefined'){
  		return '';
  	}
	var padLength = targetLength - padString.length;
  	var padArray = new Array();
  	var padkey = 0;
  	for(i = 0; i < padLength; i++){
  		padArray[i] = typeof(padString[padkey]) == 'undefined'?' ':padString[padkey];
    	padkey = padkey >= padString.length-1 ? 0:padkey+1; 
  	}
  	return padArray.join('');
}

if(typeof(String.prototype.padStart) == "undefined"){
  	String.prototype.padStart = function(targetLength,padString){
    	var srcString = this;
    	var padString = srcString.getPadString(targetLength,padString);
    	return padString+srcString;
  	}
}
if(typeof(String.prototype.padEnd) == "undefined"){
  	String.prototype.padEnd = function(targetLength,padString){
    	var srcString = this;
    	var padString = srcString.getPadString(targetLength,padString);
    	return srcString+padString;
  	}
}