ES6+ 탬플릿 리터럴로 동적인 문자열 만들기

ES6+ 템플릿 리터럴로 동적인 문자열 만들기

#1 Template literals(템플릿 리터럴)을 사용한 코드

var a = 5;

var b = 10;

console.log(`Fifteen is ${a + b} and

not ${2 * a + b}.`);

// "Fifteen is 15 and

// not 20."

템플릿 리터럴은 이중 따옴표나 작은 따옴표 대신 백틱(Grave accent)를 사용합니다.

플레이스 홀더 $와 중괄호( ${ expression } )를 사용해 표현식과 그 사이의 텍스트를 함께 전달합니다.

엔터키를 이용해 개행처리까지 가능합니다.

#2 Nesting templates(템플릿 중첩) 코드

예를들어, header태그의 class를 정할때 삼항연산자를 통해 class에 넣을 텍스트를 그대로 출력할 수 있습니다.

먼저 ES5 에서는

var classes = 'header'

classes += (isLargeScreen() ?

'' : item.isCollapsed ?

' icon-expander' : ' icon-collapser');

두번째로 ES2015에서 중첩(nesting)없이 템플릿 리터럴을 사용한 경우

const classes = `header ${ isLargeScreen() ? '' :

(item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

${ expression }을 사용해 script를 사용함.

ES2015에서 nested 템플릿 리터럴을 사용한 경우

const classes = `header ${ isLargeScreen() ? '' :

`icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

코드 가독성이 많이 높아 진다.

#3 Tagged templates(태그된 템플릿) 코드

tagged template(태그된 템플릿)는 template literals(템플릿 리터럴)의 더욱 발전된 형태입니다.

tagged template(태그된 템플릿)는 함수로 정의된다.

사용방법은 아래와 같이 함수명에 template literals(템플릿 리터럴)을 붙여서 사용한다

// 함수 정의

function taggedFn(strings, ...expressions) { // 1번

return "Something.";

}

const val1 = 12;

const val2 = 34;

const result = taggedFn`first-${val1}-second-${val2}`; // 2번

console.log(result); // 'Something.'

1번에서 taggedFn이라는 tagged template(태그된 템플릿) 함수를 정의한다.

2번에서 taggedFn 함수를 호출한다. 여기서 함수명과 template literals(템플릿 리터럴)을 붙여서 사용하는 점이 우리가 알고 있던 문법과 다르기 때문에 어색할 수 있다.

여기서 template literals(템플릿 리터럴) 표현식( ${ } )을 기준으로 일반 strings과 expressions를 파싱하여 배열로 만들어 매개변수로 넣어 준다.

strings : ['first-', '-second-', '']

expressions : [12, 34]

아래의 여러 가지 예제를 통해 매개변수 strings, expressions 값이 어떻게 파싱되는지 알아보자.

const val1 = 12;

const val2 = 34;

taggedFn`first-${val1}-second-${val2}-third`;    // 1번

// string : ['first-', '-second-', '-third' ];

// expressions : [12, 34] ;

taggedFn`first-${val1}-second-${val2}`;         // 2번

// string : ['first-', '-second-', '' ];

// expressions : [12, 34] ;

taggedFn`${val1}-second-${val2}`;                // 3번

// string : ['', '-second-', '' ];

// expressions : [12, 34] ;

// 함수 정의

function taggedFn(strings, ...expressions) {

console.log(strings.length === expressions.length + 1); // true

}

2번, 3번의 strings 배열값을 자세히 보면 template literals(템플릿 리터럴) 표현식으로 시작거나 또는 끝나면 '' 빈 문자열이 들어가는 것을 확인할 수 있다.

1번, 2번, 3번의 expressions값을 동일하다.

이 결과로 strings 배열의 개수는 expressions 배열의 개수보다 항상 하나 더 많다는 점을 확일할 수 있다.

tagged template(태그된 템플릿)을 활용해 expressions로 전달된 문자열을 HTML strong 태그로 감싸 강조를 하는 함수를 만들어 보자.

function setStrongify(strings, ...expressions) {

return strings.reduce(

(preValue, str, i) => expressions.length === i

? `${preValue}${str}`

: `${preValue}${str}<strong>${expressions[i]}</strong>`

, '');

}

const val1 = 12;

const val2 = 34;

const result = setStrongify`first ${val1} second ${val2}`;

console.log(result);

// first <strong>12</strong> second <strong>34</strong>

tagged template(태그된 템플릿) 함수의 반환값이 꼭 문자열이 아니어도 된다.

참고로 react에서 사용하는 스타일 적용 패키지 styled-components는 tagged template(태그된 템플릿) 함수가 리액트 컴포넌트를 반환한다.