[JavaScript] ES6 Template String 사용하기

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

ES6에 추가된 기능으로 템플릿 문자열(Template String)이 있다.

문자열에서 변수를 추가하려면 + 를 이용하여 붙여줘야 했다. 가독성도 떨어지며 타이핑하기에도 불편한 게 많았다.

템플릿 문자열을 사용하면 정말 편하게 변수를 붙여서 문자열을 생성할 수 있다.

한 마디로, 문자열안에 결과값을 같이 붙여 쓴다고 생각하면 된다.

 

사용법

템플릿 문자열의 시작은 `(Grave accent)로 시작한다. '(콤마)와 다르므로 주의하자!

Grave accent는 키보드 숫자 1 왼쪽에 있다. 문자열에 변수를 넣을 때 ${표현식}을 이용하여 삽입 처리가 가능하다.

삽입 처리란 표현식의 계산된 결과가 문자열로 변경되어 해당 위치에 삽입되는 것을 말한다.

 

기존에 문자열을 붙여 썻을 때 코드를 보자.

 

let name = 'DHL';
let age = 27;

console.log('나의 이름은 ' + name + ' 이고, 나이는 ' + age + '살 이다.');

 

문자열마다 + 를 붙여 따로따로 작성해야 했기에 정말로 불편하고 가독성도 떨어졌다.

이번엔 Template String으로 변환시켜보자.

 

let name = 'DHL';
let age = 27;

console.log(`나의 이름은 ${name} 이고, 나이는 ${age}살 이다.`)

 

보기만 해도 깔끔하고 가독성도 좋아졌다는 게 보인다.