가끔 다른 사람이 작성한 코드를 보다보면 헷갈리는 기호가 있습니다. 저는 보통 공부를 위해서 책을 사서 코드를 따라치는 경우에 책과 다른 결과를 얻게 되는 경우가 종종 있었고, 그 때마다 이 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}`);
댓글