템플릿 리터럴(Template literals) - 백틱(`)활용

 

템플릿 리터럴은 내장된  표현식을 허용하는 문자열 리터럴이다.

백틱은 우선 맥북에서는 option키과 원화키를 같이 누르면 생긴다.

 

백틱을 사용하면 줄바꿈과 표현식을 사용할 때 일반 String과 차이점이 생기는데 아래에서 예를 통해 살펴보자면

 

• 줄바꿈 기능

우선 일반적으로 할 때 개행문자를 이용해서 이렇게 나타내는 반면에

console.log("첫번째 줄\n" + 
"두번째 줄");
//첫번째 줄
//두번째 줄

백틱을 사용하면 

console.log(`첫번째 줄 + 
두번째 줄`);
//첫번째 줄
//두번째 줄

위와같이 개행문자 없이 같은 결과를 얻을 수 있다.

 

• 표현식 삽입

일반적으로 표현식 삽입할 때 +를 이용해서 아래와 같이 표현하는데

var a = 1;
var b = 2;
console.log("3" + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "3 is 3 and
// not 4."

백틱을 사용해서 표현하면 달러표시($)와 괄호({ })를 활용해서 아래와 같이 표현할 수 있다.

var a = 1;
var b = 2;
console.log(`3 is ${a + b} and
not ${2 * a + b}.`);
// "3 is 3 and
// not 4."

백틱 사용하는 게 익숙해진다면 일반적으로 표현하는 것보다 더 간단하게 활요할 수 있을 것으로 보인다.