[JavaScript] backtick(`) vs single quoto(') 차이

 

📑 들어가기 앞서

 

강의를 들으며 코드를 따라치고 있는데 작은 따옴표에 <div>태그 입력 후 엔터로 줄바꿈을 하면 에러가 나는 거 아닌가? 엔터를 치지 않는다고 하면 태그 안에 ${} 값들이 그냥 문자열로 인식되었다. 무슨 차이야,, 설정 차인가?? 싶었는데 자세히 보니 따옴표가 다르다! var 템플릿과 var 템플릿22의 감싸진 따옴표를 봐보자. 기울어짐이 다른 걸 확인할 수 있다. 

 

 

 

 

📑 ` 와 ' 살펴보기

 

명칭을 먼저 알아보면 `는 grave accent라는 것이다. backtick, backquoto라는 이름으로 불려지는데, 한국어로는 억음부호라고 한다. 헷갈리기 너무 쉽죠~ ?위치는 키보드 왼쪽 상단 숫자 옆에 있다. `123456 이런식으로 키보드를 살펴보자. 

 

백틱을 사용한 2번째줄 코드와 작은따옴표를 사용한 3번째줄 코드가 에디터로 보면 다르게 인식되는 걸 확인할 수 있다. 

 

 

backtick은 작은 따옴표와는 다르게 새로운 백틱 기호가 등장하기 전까지 전체를 백틱 기호가 적용되는 범위로 간주한다. 작은 따옴표는 코드의 동일한 줄까지만 적용이 되지만, backtick은 줄구분과 관련 없이 적용된다. 이러한 특성으로 인해 backtick을 사용한 문자열에서는 별도의 코드를 입력하지 않아도 자체적으로 줄바꿈(개행)이 가능하다. 

 

 

📑 backtick 사용되는 곳

 

자바스트립트 ES6부터 백틱 기호를 사용한 문자열을 템플릿 리터럴이라고 부른다. 쉽게 말해, 템플릿 리터럴은 새로운 문자연결 표기 방식이라고 보면 된다. 

 

console.log(language + "처음이죠?" + "Hello World" + language + "참 쉽죠?");

 

문자열을 연결하고 출력하려면 따옴표와 더하기(+) 기호를 사용해 위와 같이 사용해야 한다. 템플릿 문자열에서는 ${} (플레이스 홀더 place holder라고 부른다.)를 삳용해 변수를 넣고, 아래와 같이 따옴표와 더하기 기호를 빼고 쓸 수 있다. 즉) 내장된 표현식을 사용하는 것을 허용하며 여러 줄로 이루어진 문자열과 문자를 연결해 줄바꿈 기호 없이 쓸 수 있다. 

 

console.log(`${language} 처음이죠? Hello World ${language} 참 쉽죠?`);

 

 

 

 

 

 

 

참고 : https://velog.io/@sunaaank/js-backtick