TIL no.4 - backticks

String 선언 시, 홑따옴표, 쌍따옴표가 아닌 backticks를 사용할 때의 이점에 대해 포스팅하겠습니다.

1. String 내에 변수 or 다양한 표현 가능

String에 변수를 사용해야 할 때

let price = 4000;
let result = "가격은 "+price+"원 입니다";

위와 같이 해줘야 했습니다.

하지만, backticks를 사용해 간편히 String 내에 변수를 사용할 수 있습니다.

let result = `가격은 ${price}원 입니다.`

또한, 변수 뿐만 아니라 다양한 표현들을 backticks안에 넣어줄 수 있습니다.

let sum = (a, b) => a + b;

alert(`1 + 2 는 ${sum(1,2)}입니다.`);
//1 + 2 는 3입니다.

2. 줄바꿈 가능

기존에 String에서 줄바꿈을 표현해주기 위해서는

let lineBreak = "줄바꿈을\n위해서\n넣어줘야 합니다."

/*
줄바꿈을
위해서
넣어줘야 합니다.
*/

\n 가 필요했습니다.

하지만, backticks를 사용하게 되면

let lineBreak = `줄바꿈을
위해서
따로 해줄 필요가
없습니다.`

/*
줄바꿈을
위해서
따로 해줄 필요가
없습니다.
*/

또한, 홑따옴표를 사용한 String과 쌍따옴표를 사용한 String이 같듯이
backticks를 사용한 String도 서로 같은 값을 가집니다.

let singleQuoteStr = 'string';
let doubleQuoteStr = "string";

console.log(singleQuoteStr === doubleQuoteStr);
//true

let doubleQuoteLineBreakStr = "is\nit\nsame?";
/*
is
it
same?
*/

let backticksLineBreakStr = `is
it
same?`;

console.log(doubleQuoteLineBreakStr === backticksLineBreakStr);
//true