템플릿 리터럴 (Template literals)

Template literals - MDN Document

템플릿 리터럴

템플릿 리터럴은 " 큰 따옴표나, ' 작은 따옴표 대신 ` 백틱을 이용한다.

console.log(`\`` === "`"); // true

그렇기 때문에, 문자열이 " 쌍따옴표와 ' 따옴표를 모두 포함할 수 있다.

Multi-line 문자열

템플릿 리터럴에서는 \n을 따로 명시하지 않아도 줄바꿈을 포함한다.

console.log(`string line 1
string line 2`);
// string line 1
// string line 2

표현식 삽입법

${expression}으로 문자열 중간에 표현식을 넣을 수 있다.

let num = 5;
let chars = ['a', 'b', 'c']

console.log(`${num} * 2 = ${num * 2}`); // 5 * 2 = 10
console.log(`${chars.reduce((acc, val) => acc + val, '')}`); // abc

중첩된 템플릿

표현식 내부에서 탬플릿을 중첩으로 사용할 수 있다.

// ES2015에서 중첩(nesting)없이 템플릿 리터럴 사용한 경우:
const classes = `header ${ isLargeScreen() ? '' :
    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

// ES2015에서 중첩된(nested) 템플릿 리터럴을 사용한 경우:
const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

태그 템플릿

태그를 사용해 탬플릿 리터럴을 함수로 파싱할 수 있다. 태그 함수의 첫 번째 인수는 문자열의 값의 배열을 포함한다. 나머지 인수는 표현식과 관련된다.

let mike = {
  name: 'Mike',
  age: 28
};

function myTag(strings, ...values) {
  for (const string of strings) {
    console.log(string); // 'is a' '.'
  }
  for (const value of values) {
    console.log(value); // 'Mike' 28
  }
  return strings[0] + values[0] + strings[1] + values[1] + strings[2];
}

console.log(myTag`${mike.name} is a ${mike.age}.`); // Mike is a 28.

템플릿을 함수를 통해 가공 후 return으로 결과값을 반환할 수 있다.

raw 문자열

raw 프로퍼티를 사용하면 escape seqyences를 처리하지 않고 그대로 출력한다.

function myTag(strings) {
  console.log(strings.raw[0]); // 
}
tag`sting text line 1 \n string text line 2`;