본문 바로가기
Programming/JavaScript

backtick(`) 기호를 이용한 javascript 템플릿 리터럴(template literal)로 쉽게 만드는 문자열

by Muko 2020. 4. 16.

가끔 다른 사람이 작성한 코드를 보다보면 헷갈리는 기호가 있습니다. 저는 보통 공부를 위해서 책을 사서 코드를 따라치는 경우에 책과 다른 결과를 얻게 되는 경우가 종종 있었고, 그 때마다 이 backtick(`) 기호가 원인이었습니다. 작은 따옴표(', single quote)와 매우 비슷하게 생겼지만 javascript에선 특이한 프로그래밍 문법으로 사용되는 기호입니다. 영어 사전에도 backtick을 검색해보면 프로그래밍에 사용되는 기호라고 설명되어있을 만큼 정말 개발자를 위한 기호라고도 볼 수 있습니다. (다양한 언어 문자를 표현할 때도 사용됩니다)

얼마나 구분히 안가는지 직접 확인해보면 편하겠죠?

"큰 따옴표를 사용한 문자열"
'작은 따옴표를 사용한 문자열'
`백틱으로 작성한 문자열`


음... 블로그에서 보이는 것으로는 차이가 조금 분명하게 보이지만, 글씨체마다 다릅니다. 분명 작은 따옴표인지 백틱인지 헷갈리는 글씨체가 존재합니다.

어쨌든! 백틱은 Backquote, backtick, grave accent등의 여러 이름으로 불리는 기호입니다. 근데 이 기호에 대해서 검색하기가 처음 공부하시는 분들에게는 정말 어려운게, 백틱 기호 하나만 그대로 입력하면 '억음 부호'라고 어려운 한글로 나옵니다. 영어로는 그레이브 엑센트라고 물론 설명이 나와있긴 하지만, 이 키워드로 검색하면 다른 언어에서 사용되는 À 등의 문자에 대한 설명이 나옵니다. 기호의 정확한 이름을 모를 때는 ` 기호로 검색해서 알게된 grave accent와 javascript를 같이 키워드로 검색해야 결과를 찾을 수 있습니다. javascript `, ` 기호 javascript 등 다양하게 검색해도 결과를 찾을 수 없습니다.

제 블로그를 들어오신 분들도 이 기호의 이름을 알거나 찾고나서 들어오게 되셨을 텐데요, 이 백틱기호를 사용한 문자열을 자바스크립트 ES6에서는 템플릿 리터럴(template literal)이라고 부릅니다. 이 템플릿 리터럴은 MDN - Template literals 사이트에 설명되어 있듯이 내장된 표현식을 허용 하는 문자열 리터럴입니다. 또한 여러 줄로 이루어진 문자열과 문자 보간기능도 사용 가능하죠. 어떻게 사용하는지 예제를 볼까요?

`이 문자열은 1번 째 예제 문장입니다.`

`이 문자열은 총 1번 째 줄과
 두 번째 줄 이렇게 2개의 줄로 작성되었습니다.`

`이 문자열에는 변수 x의 값인 ${x}을 가져와서 작성되었습니다.`
`변수 x와 y를 읽을 수 있다면 x+y의 값인 ${x+y}의 결과를 문자열 안에 넣을 수도 있습니다.`


위의 예시를 보시면 총 세개의 파트로 구성된 것을 확인할 수 있습니다.

첫 번째 줄의 의미는 백틱을 이용해서도 문자열을 작성하는 것이 가능하다는 것을 보여주기 위해 작성했습니다. 그 다음 파트인 두 번째 문자열은 백틱을 사용해서 문자열을 작성할 때 개행 문자도 포함한다는 것을 보여주기 위함입니다. 마지막으로 세 번째 파트는 플레이스 홀더를 이용한 표현식을 템플릿 리터럴 안에 사용할 수 있음을 보여주는 예시입니다. 플레이스 홀더는 $와 중괄호( $ {expression} )으로 표현하며, 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달됩니다. 이 말을 쉽게 설명하면, 템플릿 리터럴이 최종적으로 완성되어 하나의 문자열로 반환되기 전에, expression을 계산해서 그 위치에 삽입된다는 의미입니다.

위의 예시에서 만약 x가 3, y가 6을 가지고 있다고 가정해보면 결과는 다음과 같이 나오게 됩니다.

'이 문자열에는 변수 x의 값인 3을 가져와서 작성되었습니다.'
'변수 x와 y를 읽을 수 있다면 x+y의 값인 9의 결과를 문자열 안에 넣을 수도 있습니다.'

 

이 템플릿 리터럴을 사용하면 같은 문자열이라도 더 간단하게 표현하는 것이 가능해집니다. 아래 예시를 보면 위에 길게 작성한 내용을 쉽게 이해하실 수 있을 겁니다.

console.log('x+y:', x+y, ', x-y:', x-y, '\nx*y:', x*y);
console.log('x+y:' + (x+y) + ', x-y:' + (x-y) + '\nx*y:' + (x*y));
console.log(`x+y:${x+y}, x-y:${x-y}
x*y:${x*y}`);

댓글4