[JavaScript] ES2015 백틱(`)과 템플릿 문자열

JavaScript

백틱이란?

키보드 탭 위, 1의 왼쪽, '~'(물결표) 쯤에 있는 '와 비슷하게 생긴 문자다.

백틱(`)을 사용하면 ${}를 사용해서 문자열과 변수를 적절히 같이 사용할 수 있다.

 

이전 코드

const num1 = 10;
const num2 = 20;

console.log(num1 + ' + ' + num2 + ' = ' + (num1+num2) +  " 입니다.");

 

문자열과 변수, 큰 따옴표와 작은따옴표, 문자 '+'와 연산기호 '+'등이 같이 있다.

코드상에서 큰따옴표나 작은따옴표를 잘못 붙이거나 해서 오류가 발생될 때가 제법 많다.

 

백틱 적용 ES2015 코드

const num1 = 10;
const num2 = 20;

console.log(`${num1} + ${num2} = ${num1+num2} 입니다.`);

문자열 사이에 변수만 따로 구분할 수 있게 해서 좀 더 직관적으로 볼 수 있다.

개발할 때 좀 더 편하게 할 수 있다.

 

멀티라인 문자열

이전 코드

console.log('line1\n' +
'line2');

한 줄을 띄우려는 효과를 주려면 '\n'을 사용해야 했고,

밑줄로 간 문자열은 '+'와 따옴표들로 감싸줘야 했다.

 

백틱 적용 ES2015 코드

console.log(`line1
line2`);

문자열 줄 바꿈을 위해 '\n'을 적어주거나 문자열을 이어 주기 위해 '+'를 사용할 필요가 없다.

백틱(`)내에서 줄이 바뀌면 알아서 줄 바꿈 출력이 된다.

 

더 많은 점은 아래에서 확인할 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals