[js] Template Literals, Tagged Templates

 

템플릿 리터럴은 ES6에서 도입된 기능으로 문자열을 더 쉽게 다룰 수 있게 해주는 문법이다.

 

 

템플릿 리터럴 도입 전

문자열 여러줄

const multiLine = "이것은 여러 줄에 걸쳐\n" +
                        "작성된 문자열입니다.";
console.log(multiLine);

 

문자열에 변수 포함

const name = 'yang';
const greeting = 'hello, ' + name + '!';
console.log(greeting); //hello, yang!

 

 

 

템플릿 리터럴(Template Literals)

템플릿 리터럴은 백틱(``)을 사용하여, 이전과 달리 아래와 같이 가독성 좋고, 간결하게 사용할 수 있게 되었다.

 

문자열 여러줄

const multiLine = `이것은 여러 줄에 걸쳐
작성된 문자열입니다.`;
console.log(multiLine);

 

문자열에 변수 포함

const name = 'yang';
const greeting = 'hello, ${name}!';
console.log(greeting); //hello, yang!

 

 

 

태그드 템플릿(Tagged Templates)

템플릿 리터럴의 고급 형태로, 템플릿 리터럴을 처리할 함수를 호출 가능하고, 문자 중간중간에 있는 단어 순서를 바꾸거나 변수를 제거하거나 할 때 유용하다.

• 첫번째 매개변수에는 ${} 기호를 기준으로 양옆에 있는 모든 문자 덩어리를 Array안에 집어넣어주고
• 두번째 매개변수부터는 변수를 담는다

let person = 'Yang';
let age = 26;

function tag(strings, ...rest) {   
    console.log(strings); // ['Hi,','is a','']
    console.log(rest[0]); // 'Yang'
    console.log(rest[1]); // 26
};

let output = tag`Hi, ${person} is a ${age}`;