js 템플릿 문자열(template literals)

자바 스크립트에서 템플릿 문자열은 백틱( ` )을 이용하여 문자열 표현을 쉽게 만들어 주는 역할을 한다.

그 예를 살펴보자.

먼저 덧셈 연산자를 사용하는 경우이다.

let name = "김갑수"
let age = 35
let height = "170cm"

위의 정보들을 이용하여 변수를 선언하게 될 때

let introduce = "저는 "+name+"이고 나이는 "+age+"살이고 키는 "+height+"입니다." 


console.log(introduce)

===>>> 저는 김갑수이고 나이는 35살이고 키는 170cm입니다.

덧셈 연산자를 이용해서 선언된 변수들을 다른 변수에 할당해 줄 수 있다.

그런데 템플릿 문자열(template literals)을 사용하게 되면 훨씬 편리하게 새로운 변수에 할당을 해줄 수 있다.

let introduce = `저는 ${name}이고 나이는 ${age}살이고 키는 ${height}입니다.`


console.log(introduce)

===>>> 저는 김갑수이고 나이는 35살이고 키는 170cm입니다.

두 가지 방법 다 모두 같은 변수에 똑같은 내용의 결과를 도출한다. 하지만 템플릿 문자열을 이용한 방법이 깔끔하고 편리하다. 왜냐하면 위의 방식의 경우에는 중간에 문자열에 따옴표를 계속 붙여주어야 하기 때문이다. 아래의 템플릿 문자열을 이용한 방식은 처음과 끝에 백틱만 붙여주면 된다.

두 번째로는 줄바꿈을 해주어야 하는 경우이다.

const cheerup = "Even though you are frustrated,\nget over again and again.\nYou can do it"


console.log(cheerup)


===>
Even though you are frustrated,
get over again and again.
You can do it

위와 같이 \n을 통해서 줄바꿈을 하는 곳마다 입력해주어야 하지만 템플릿 문자열을 사용할 경우에는 아래와 같이 이용할 수 있다.

const cheerup = `Even though you are frustrated, 
get over again and again. 
You can do it`


console.log(cheerup)


===> 
Even though you are frustrated,
get over again and again.
You can do it

위의 줄바꿈(\n)을 입력하지 않아도 않아도 같은 결과가 나온다. 그래서 훨씬 편리하게 이용할 수 있는 것이다.