라고 제목을 적어놨지만 사실 손해 없습니다~

그래도 한 번 봐보면 신기한? 백틱 문법이 있으니까 알아봅시다.

Template Literal

가장 쉽게 접하고, 그래서 가장 많이 사용하는 백틱 문법은 당연히 문자열을 생성한다.

const str1 = "This is String!"
const str2 = `This is String!`

console.log(str1 === str2); // -> true

위와 같이 “”를 이용해 만든 문자열과 ``를 이용해 만든 문자열은 똑같은 문자열 타입으로 취급된다. 그러면 그냥 ""를 쓰면 되는 거 아닌가?

라고 하기엔 백틱을 이용한 문자열은 내부에 변수를 쉽게 넣을 수 있다.

for (let i = 0; i < 10; ++i) {
	console.log(`this is ${i}-th log!`);
}

// this is 0-th log!
// this is 1-th log!
// ...
// this is 9-th log!

이런 식으로 백틱을 이용하여 만든 문자열을 우리는 Template Literal이라고 부른다.

물론 변수만 넣을 수 있는 것이 아니라 표현식도 넣을 수 있다.

for (let i = 0; i < 10; ++i) {
	console.log(`2 * ${i} = ${i * 2}`);
}

// 2 * 0 = 0
// 2 * 1 = 2
// ...
// 2 * 9 = 18

위처럼 변수 i만 쓸 수 있는 것이 아닌, 표현식 i * 2 또한 문자열에 잘 삽입되는 것을 볼 수 있다.

그리고 또 하나의 특징은 줄바꿈 또한 가능하다.

const str = `
	this is row 1
	this is row 2
	this is row 3
`

사실 여기까지가 우리가 일반적으로 가장 많이 쓰는 백틱을 사용하는 방법이다.