backtick(`)문자와 javascript 템플릿 리터럴

키보드에는 작은따옴표와 비슷한 문자가 하나 더 있다.

`

바로 이 문자이다.

javascript에서는 템플릿 리터럴에 활용되고, 마크다운에서 코드를 강조(code, fenced code block)하는데 쓰이기도 하는 문자이다.

이 문자를 작은따옴표로 착각해서 헤메다가 한참 후에 작은따옴표와 다른 문자라는것을 깨달았다.

 

백틱(backtick)과 작은 따옴표의 비교

'작은 따옴표1'    ‘작은따옴표2’ 
`백틱(backtick)`

작은 따옴표는 열고닫는게 구분된것과 구분이 없는것이 있다. 어느것과 비교해봐도, 백틱이 차지하는 자리가 더 크다는걸 눈으로 봐도 알 수 있다. 그리고 비스듬한게 더 강조되어있는 모양이다. 또 작은 따옴표는 열고 닫는게 있지만, 백틱은 구분이 없다. 

 

명칭

Backquote, backtick, grave accent 등의 이름으로 불린다.

(검색엔진에 이 문자(`)를 그대로 입력하면 검색어에서 제외되기 때문에 이 문자의 이름을 알아야 검색할수 있다)

 

입력방법 

키보드에서 backtick의 위치

내가 쓰는 키보드에서는 숫자 1의 왼쪽에 위치해있는 키를 눌러서 입력할 수 있다.

₩라고 입력되는 경우는 언어가 한글로 설정되어 있을 때이다. 한/영키를 누르고 다시 눌러보면 제대로 입력된다.

 

찾아보니 키보드마다 위치가 조금씩 다른 경우도 있는데, 대부분의 경우는 위와 같다.

자세한건 각 키보드의 매뉴얼이나 구글 검색을 통해 알아보면 된다..

 

 

템플릿 리터럴(javascript)

javascript에서 backtick(`) 문자를 사용하여 문자열을 표현한것을 템플릿 리터럴이라고 한다.

이렇게 사용하면, 두가지 기능이 있는데 (1)줄바꿈을 쉽게 할수 있고, (2)문자열 내부에 표현식을 포함할 수 있게 된다.

 

일반 문자열 사용시 아래와 같이 표현되어야 하는 것을, 

일반 문자열 사용 예시

 

템플릿 리터럴을 사용하면 아래와 같이 간단하게 표현할 수 있다.

템플릿 리터럴 사용 예시

 

(1) 줄바꿈 기호(\n)을 쓰지 않고 코드에서 그냥 줄을 바꾼것

(2) (a + b)라는 표현식을 쓰기 위해 따옴표를 닫고 + 기호로 연결했던 것을 
     문자열 안에 ${a + b}라는 표현으로 그대로 쓸수가 있게 된 것이다. ${2 * a * b }도 마찬가지.

 

* 앞에서도 말했지만 백틱을 작은 따옴표로 착각했다가는 원인을 모른채 헤메다가 멘붕이 오는 상황이 발생할 수 있다....

 

자세한 내용은 아래 MDN문서 링크를 참고. (번역이 덜 되어 어설프긴 하지만 한국어를 선택해서 볼 수도 있다.. )

Template literals (Template strings)