[JS] 템플릿 문자열(Template String) 사용법

자바스크립트(JavaScript)에서 우리가 변수를 가지고 있고, 그것을 활용하여 문장을 만들어 출력한다고 가정해봅시다.

 

const a = 'apple';
const b = 'banana';

위와 같이 변수가 있고, 이것을 출력하기 위해서는

 

const output = 'output : I like ' + a + ' and ' + b +'...!';
console.log(output);

지금까지 이런 형태로 작성을 해왔을 것입니다.

 

이러한 코드의 단점으로는 계속 따옴표(' or ")와 더하기 연산자(+)를 작성해야하고, 띄워쓰기를 따로 신경써줘야 한다는 번거로움이 있었습니다.

 

 

하지만 ECMAScript의 업데이트로 아래와 같은 코드를 사용할 수 있게 되었습니다.

 

const output2 = `output : I like ${a} and ${b}...!`;
console.log(output2);

이러한 방식으로 코드를 작성하는 것을 템플릿 문자열이라고 합니다.

 

템플릿 문자열을 이용함으로써 코드가 더욱 간결해지고 읽기 쉬워졌습니다.

 

출력을 해보면 아래와 같이 동일한 형태로 나타남을 알 수 있습니다.

 

 

 

이런 템플릿 문자열은 따옴표나 큰 따옴표가 아닌 백틱(`)을 이용하여 작성합니다.

(백틱은 보통 영어의 축소형(I am => I`m)에 사용할 때 쓰는 기호로 숫자 1 옆에 있는 기호를 의미합니다.)

 

 

우선 백틱으로 문장을 감싸고, 변수가 들어갈 부분에 ${변수명}과 같은 형태로 입력해주시면 됩니다.

 

 

템플릿 문자열의 또 다른 장점은 $, ', " 등을 입력할 때 이스케이프 문자열을 사용할 필요가 없다는 것입니다.

 

const output3 = ' \$ \" \'';
console.log(output3);

const output4 = `$ " '`;
console.log(output4);