[JS] Template literals & Tagged templates

 

자바스크립트 ES6에서 문자열을 다루기 쉽도록 템플릿 리터럴(Template literals) 이라는 새로운 표기법이 생겼다.
기존에 '' 혹은 "" 안에 넣던 문자열을, esc키 밑에 있는 백틱 기호(``) 안에 넣어서 표기한다.

 

📌 Template literals 사용의 장점

1. 문자열을 변수와 함께 호출할때, 문자열을 ''로 각각 분리하지 않고 사용할 수 있다. 양 옆에 + 기호도 챙겨줄 필요가 없다.

const name = 'Jessie';

console.log('Hello, I am ' + name + '.');
console.log(`Hello, I am ${name}.`);

// 둘 다 콘솔에 Hello, I am Jessie. 출력됨

 

2. 문자열 안에서 따옴표를 사용하고 싶거나, 줄바꿈을 하고싶을 때 이스케이프 시퀀스(Escape sequence)가 필요 없다.

const name = 'Jessie';

console.log('Hello, I am \"' + name + '\". \nNice to meet you.');
console.log(
`Hello, I am "${name}".
Nice to meet you.`);

// 둘 다 콘솔에
// Hello, I am "Jessie".
// Nice to meet you. 출력됨

 

3. Tagged literals 를 통해 문자열 데이터를 조작할 수 있다.

 

 

📌 Tagged templates

데이터 별로 상황이 다른 경우 Tagged templates로 해결할 수 있다.

태그 함수를 만들어 데이터를 어떻게 출력할지 정하고, 함수를 호출할때 () 대신 `문자열`을 넣어 활용한다.

const available = [
  {
    products: '노트북',
    items: ['macbook pro', 'macbook air']
  },
  {
    products: '핸드폰',
    items: []
  }
]

function message(strings, products, items) {
  if (items == 0) {
    items = '0개'
  }
  console.log(strings[0] + products + strings[1] + items + strings[2]);
}

message`현재 구매 가능한 ${available[0].products}은 ${available[0].items} 입니다.`;
// 현재 구매 가능한 노트북은 macbook pro,macbook air 입니다.
message`현재 구매 가능한 ${available[1].products}은 ${available[1].items} 입니다.`;
// 현재 구매 가능한 핸드폰은 0개 입니다.

구매 가능한 품목에 대한 데이터가 있다.

그 데이터를 각 상황에 맞게 호출해주는 태그 함수 (= message 함수)를 만들었다.

 

태그 함수의 첫번째 인자 strings 는 함수 호출 시 뒤에 붙을 문자열의 배열이 된다.

strings: [ '현재 구매 가능한 ', '은 ', ' 입니다.' ]

나머지 인자는 순서대로 변수를 의미하게 된다.

그리고 items 에 데이터가 없을 경우, 해당 변수를 '0개' 라는 문자로 바꿔주는 if문을 넣었다.

 

message 함수에 ()를 붙여 실행하는 대신 분석할 문자열을 붙여주면

각 데이터의 상황에 맞는 문구가 호출된다.

위의 태그 함수에서 if문을 넣지 않았다면 핸드폰의 items 데이터가 없으므로 undefined로 나왔을 것이다.