템플릿 문자열

템플릿 문자열

: 문자열 안에서 변수를 전개하기 위한 새로운 표기법

기존의 작성법에서는 문자열과 변수를 결합할 때 +를 이용해서 코드를 작성했다. 코드가 짧으면 사용해도 어려움이 없었지만 길어지면 작성하는 것도 힘들고 가독성도 떨어지는 문제가 있다.

ES2015(ES6) 이후부터 템플릿 문자열을 사용 가능할 수 있게 됐는데, 이것을 사용하면 코드를 편리하게 작성할 수 있다.


사용하는 방법은 간단하다.
`(역따옴표 또는 백쿼드)로 문자열을 감싸서 사용하면 된다. 그리고 백쿼드 안쪽에 ${ }를 사용할 수 있는데, 중괄호 안에 자바스크립트를 입력할 수 있다.

const name = '홍길동';
const age = '23';
const msg = `내 이름은 ${name}이고 나이는 ${age}세입니다.`;
console.log(msg);

백쿼드로 문자열을 감싸고, ${ } 안에 name과 age 변수를 입력하고 실행시키면 '내 이름은 홍길동이고 나이는 23세입니다.'라는 결과가 출력된다.

계산식이나 함수를 이용해서 문자열을 작성할 수도 있다.

function getName() {
  return '홍길동';
}

const hour = 1;
const msg = `${getName()}님! 게임에 접속한지 ${hour * 2}시간 됐습니다!`;
console.log(msg);

getName() 함수에서 '홍길동'을 반환하고 시간을 나타내는 숫자를 hour 변수에 저장했다. 코드를 실행시키면 '홍길동님! 게임에 접속한지 2시간 됐습니다!'라는 결과가 출력된다.