[Javascript] 템플릿 리터럴 (Template Literals)

안녕하세요. 오늘은 템플릿 리터럴에 대해 알아보려고 합니다.

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였습니다.

템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용합니다.

템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation)이라 합니다.

 

템플릿 리터럴의 기본 문법은

`string text` // 문자열 표현
`string text line 1
 string text line 2` // 개행된 문자열 표현
 
var expression;
`string text ${expression} string text` // 변수값 문자열 조합
 
function tag() { };
tag `string text ${expression} string text` // 함수 호출 인자

' 나 " 대신 ` 을 사용합니다.

ES6 이전에는 문자열을 연결할 때,

var a = 20;
var b = 7;
var c = "개발자";
var str = "저는 " + (a + b) + "살이고 " + c + "입니다.";
console.log(str);   //저는 27살이고 개발자입니다.

이런식으로 + 기호를 사용하여 문자열과 변수를 연결했었습니다.

하지만 템플릿 리터럴에서는 이렇게 사용할 수 있습니다.

let a = 20;
let b = 7;
let c = "개발자";
let str = `저는 ${a+b}살이고 ${c}입니다.`;
console.log(str);   //저는 27살이고 개발자입니다.

Multi-line strings

템플릿 리터럴을 사용하면 여러 개행 줄의 문자열(Multi-line strings)도 나눠서 작성할 필요가 없이 한번에 작성할 수 있습니다.

console.log("string text line 1\n" + "string text line 2");
 
//템플릿 리터럴
console.log(`string text line 1
string text line 2`);

 

Nesting templates

특정 조건을 만족하는 경우(Nesting templates)마다 다른 문자열을 변수에 저장하고 싶다면, 템플릿을 중첩해서 작성해 가독성을 높일 수 있습니다.

const classes = `header ${ isLargeScreen() ? '' :
     `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

 

저는 실제로 이미지 폴더를 지정해줄 때, 템플릿 리터럴을 이렇게 사용했습니다.

const thumbnailPath = 'URL';
const filename = 'image1';

// 기존 사용 방식
thumbnailPath + "/" + filename

//템플릿 리터럴을 사용한 방식
`${thumbnailPath}/${filename}`