자바스크립트(JavaScript) - 템플릿 리터럴(Template literals)

ES6에서 새로 생긴 문자열 표현 방법입니다.

 

기존 문자열 표현에서 여러 줄을 표현하려면 이스케이프 시퀀스를 쓰고 문자열에 변수에 있는 값을 사용하려면 변수를 사용하고 + 를 사용해 문자열을 연결해주어야 했습니다.

 

새로 생긴 템플릿 리터럴을 사용하면 간편하게 표현할 수 있습니다.

var bear = "bear";
var text = `곰은 ${bear} 이다.`;

console.log(text); // -> 곰은 bear 이다.

이제는 + 를 쓰지 않고 ${ }를 통해서 변수나 함수를 호출하여 값을 받을 수 있습니다. ${ }를 플레이스 홀더라고 부릅니다.

 

템플릿 리터럴을 사용하려면 ` `(백틱) 물결표 키를 누르면 나타나는 백틱을 사용해야 합니다.

기존에는 여러 줄을 표현할 때 사용했던 \n를 쓰지 않고 사용이 가능합니다.

var text2 = `곰은 한명이 아니라
두명이었다.!`;

console.log(text2); 
// -> 곰은 한명이 아니라
// 두명이었다.

템플릿 리터럴은 중첩하여 사용도 가능하니 참고하시기 바랍니다.

 

템플릿 리터럴에서 입력한 문자열을 원본 그대로 출력하고 싶다면 String.raw를 앞에 붙여 사용하면 됩니다. 다만 플레이스 홀더에 있는 표현식은 평가가 된 값이 나타납니다.

console.log(String.raw`2*1은 답이 무엇일까요? \n답은:${2*1}`); // -> 2*1은 답이 무엇일까요? 답은:2

이렇게 String.raw를 앞에 붙인 것을 태그 함수라고 하며 이를 비슷하게 사용하는 Tagged Template 방법도 있습니다.

 

 

참고

모던 자바스크립트 입문(이소 히로시 지음, 서재원 옮김)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals