[Javascript] 템플릿 문자열 백틱(`) 알아보기

이번 글은 템플릿 문자열에 관하여 알아보겠다.

이것도 모르고 프로젝트 코드 작성하다가 한참 시간 낭비했다.

---

템플릿 문자열은 ES6에서 새로 추가된 문자열이다.

이 문자열은 큰 따옴표나 작은따옴표로 감싸는 기존 문자열과 다르게 tab키 위의 백틱( ` )으로 감싼다.

특이한 점은 이 문장열 안에 변수를 넣을 수 있다.

 

비교 예시를 보자

기존의 es5 문법은 아래와 같다.

let num1 = 1;
let num2 = 2;
let result = 3;
let string1 = num1 + " 더하기" + num2 + "는 '" + result + "'";
console.log(string); // 1 더하기 2는 '3'

위의 코드는 변수, 더하기 기호 등으로 가독성이 좋지 않다.

이제 템플릿 문자열을 사용해서 작성해보자.

let num3 = 1;
let num4 = 2;
let result2 = 3;
let string2 = `${num3} 더하기 ${num4}는 '${result2}'`;
console.log(string2);

훨씬 깔끔해진 것을 알 수 있다. 변수는 ${변수}를 사용하여 더하기 기호 없이 문자열에 넣을 수 있다.

 

---

템플릿 문자열을 이용하니 문자열이 간결해지고 가독성이 높아졌다.

진작에 알고 코딩했으면 좋았을 텐데 아쉽다.

앞으로도 열심히 코딩하자