[JS] 템플릿 리터럴

1. 템플릿 리터럴

템플릿 리터럴이란 따옴표 대신 백틱(``)을 사용해 문자열을 표기하는 방식을 말한다.

• ES6 이전에선 아래와 같이 띄어쓰기를 할 때의 번거로움이 있었다.

num1 = 5;
num2 = 10;
add = num1 + num2;
const result = num1 + " 더하기 " + num2 + "는 '" + add + "'"; // 5 더하기 10는 '15'

console.log(result);

• ES6 이후에선 변수를 ${}로 감싸주면 자동으로 띄어쓰기가 된다.

num1 = 5;
num2 = 10;
add = num1 + num2;
const result = `${num1} 더하기 ${num2}는 '${add}'`; // 5 더하기 10는 '15'

console.log(result);

• 연산도 가능하다!

console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3

• 템플릿 리터럴은 멀티 라인을 지원한다.

console.log(`
  템플릿 리터럴은
    멀티 라인도
    
    지원합니다!!!
`);

• 짜잔!🎇

---

2. 태그 템플릿 리터럴

a를 호출할 때 a() 이외에 a``(백틱)을 사용해서 호출할 수 있다.

function a() {}
a();
a``;