[자바스크립트] 템플릿 리터럴

템플릿 리터럴 ?

템플릿 리터럴은 백틱 (` `) 을 사용해서 표현하는 문자열 표기법인데 ES6 부터 도입되었다.

따옴표로 문자열을 표현할 수 있는데 왜 필요할까 라는 생각이 들어야 정상이다.

템플릿 리터럴은 편리한 문자열 처리 기능을 제공한다.

1.멀티라인 문자열 ( multi-line string )
2.표현식 삽입 ( expression interpolation )
등등 ..

템플릿 리터럴은 런타임 시점에 문자열로 변환되어 처리된다.

---

1. 멀티라인 문자열 ( multi-line string )

일반적인 문자열 내에서는 이스케이프 시퀀스를 사용하지 않는 이상 줄바꿈이 허용되지 않는다.

// 이스케이프 시퀀스를 사용해서 줄바꿈을 표현하는 경우
let escapeStr = "<div>\n\t<a href='#'>편의점가기</a>\n</div>";

console.log(escapeStr);
/*
<div>
	<a href='#'>편의점가기</a>
</div>
*/

// 템플릿 리터럴을 사용해서 줄바꿈을 표현하는 경우
let templateStr = `<div>
	<a href="#">편의점가기</a>
</div>`;

console.log(templateStr);
/*
<div>
	<a href="#">편의점가기</a>
</div>
*/

콘솔 출력 결과가 같고 훨씬 직관적이고 사용이 쉽다.

---

2.표현식 삽입 ( expression interpolation ) 

문자열에서 표현식을 표현하려면 + 연산자를 통해 사용해야 했지만 템플릿 리터럴을 사용하면 ${표현식}으로 표현할 수 있다.

const name = '기영이';
const name2 = '기철이';

// 기존 문자열 표현 방법
console.log(name+'와'+' '+name2+'는 형제입니다.'); // 기영이와 기철이는 형제입니다.

// 템플릿 리터럴을 사용한 표현 방법
console.log(`${name}와 ${name2}는 형제입니다.`); // 기영이와 기철이는 형제입니다.

// 템플릿 리터럴을 사용한 표현 방법2
console.log(`1 + 2 = ${1+2}`); // 1 + 2 = 3
console.log('1 + 2 = ${1+2}'); // 1 + 2 = ${1+2}

콘솔 출력 결과가 같고 훨씬 직관적이고 사용이 쉽다.

---

요약
1.문자열에 줄바꿈을 표현하는 경우, 템플릿 리터럴 승
2.문자열에 표현식을 추가하는 경우, 템플릿 리터럴 승
3.템플릿 리터럴 쓰는게 정신건강과 유지보수에 좋다.

*오타 혹은 오류 지적해주시면 감사하겠습니다 !!