[자바스크립트 JavaScript] 문자열 format 함수

js 를 하다보면 문자열 조합의 경우가 빠지지 않고(?) 발생하게 됩니다. alert 창을 띄울 때 안내문구와 변수의 조합이라던가 ajax 를 통해서 받아온 데이터를 가지고 동적으로 페이지에 랜더링할 때라던가 여러 가지 경우가 있습니다. 버튼을 클릭했을 때 count 변수의 값을 1씩 증가시켜서 alert 창을 띄우는 함수를 살펴보도록 하겠습니다.

var clickCount = 0;

function showClickCount() {
   clickCount++;
   var msg = '버튼의 클릭 횟수는 ' + clickCount + '회 입니다.';
   alert( msg );
}

뭐 이렇게 단순하게 변수 하나만을 가지고 문자열을 조합하는 것은 약과에 불과합니다. 만약 ajax 통신으로 json 데이터를 가지고 table 에 뿌려준다고 생각을 해봅시다. 이 글을 포스팅하면서 예제로 해볼려고 했는데 너무 귀찮고 막막해집니다. 아마 겪어보신 분들은 모두 아실것이라 생각합니다.

그래서 저의 경우에는 유용한 Function 들을 한 곳에 모아두어서 쓰고 있는데요 그 중에서 자주, 그리고 정말 유용하게 쓰이는 format 함수가 있습니다. 함수의 원형은 아래와 같습니다.

function format() {
   var args = Array.prototype.slice.call (arguments, 1);
   return arguments[0].replace (/\{(\d+)\}/g, function (match, index) {
      return args[index];
   });
}

그렇다면 이제 이 함수를 사용해서 처음 보여드린 예제를 다시 작성해보겠습니다.

var clickCount = 0;

function showClickCount() {
   clickCount++;
   var msg = format( '버튼의 클릭 횟수는 {0}회 입니다.', clickCount );
   alert( msg );
}

적고 나니깐 너무 간단한 예제라서 실감을 못하실 수도 있겠습니다만.. 복잡한 문자열의 경우에는 진짜 빛을 발휘합니다. 진짭니다 ㅠㅠ