JavaScript에서 문자열 플레이스홀더를 단어로 치환하는 방법

문자열 플레이스홀더 치환 함수 만들기

첫 번째 인수로 문자열을 받고, 그 뒤에 임의 개수의 단어들을 추가로 받는 translate() 함수를 작성해야 한다고 가정해 보겠습니다.

이 문자열에는 다음과 같이 여러 개의 $ 기호가 포함되어 있습니다.

This $0 is more $1 just a $2.
그리고 함수 호출 시 전달된 3개의 단어가 각각 해당 자리를 대체하게 됩니다.

예를 들어 함수 호출이 다음과 같다면,

translate('This $0 is more $1 just a $2.', 'game', 'than', 'game');

함수의 출력 결과는 다음과 같아야 합니다.

This game is more than just a game.

이 기능은 JavaScript의 템플릿 주입(template injection)과 거의 유사한 동작입니다.

그럼 이 함수의 코드를 직접 작성해 보겠습니다.

여기서는 String.prototype.replace() 메서드를 활용합니다. 정규식 패턴으로 모든 일치 항목을 찾은 뒤, 두 번째 매개변수로 함수를 전달하면 해당 함수가 각 일치 항목마다 실행된다는 점을 이용하는 것입니다.

예제 코드

const str = 'This $0 is more $1 just a $2';
const translate = (str, ...texts) => {
   const regex = /\$(\d+)/gi;
   return str.replace(regex, (item, index) => {
      return texts[index];
   });
};
console.log(translate(str, 'game', 'just', 'game'));

출력 결과

콘솔에 출력되는 결과는 다음과 같습니다.

This game is more just just a game