Temlate literals
기존 문자열 결합 시 연산자(+)를 사용하였는데 백틱(`) 기호를 사용하여 쉽게 결합할 수 있다.
기존 연산자 사용
const fruit = 'apple';
const color = 'red';
console.log('My Favorite Fruit is' + fruit + ', color is ' + color); //"My Favorite Fruit isapple, color is red"
템플릿리터럴 사용
const fruit = 'apple';
const color = 'red';
console.log(`My favorite Fruit is ${fruit}, color is ${color}`);
장점
보통 복잡한 문자열이거나 html 코드등을 직접 스크립트상에서 삽입할 때 쌍따옴표-홀따옴표등과 같이 사용하는 경우에 상당히 복잡했었다. (따옴표 종료 위치를 일일이 신경써야했기에)
템플릿리터럴을 사용하면 일반 텍스트를 작성하듯 변수 위치만 신경써주면되니까 이런점이 편하다.
const name = 'Jiny';
const template = `<p class="user-name">${name}</p>`;
참고자료
- 자바스크립트 코딩의 기술 - 조모건 저