javascript 템플릿 리터럴! 편리하네~

자바스크립트 ES6 부터 Template literal 기능이 도입되었다.

우선 사용법 부터 알아보자

 

템플릿 리터럴 사용법

빽틱이라고 불리는 이 따옴표 같은 것을 사용하면 된다. `` 

const str = `1,2,3 "1,2" [1,2] 템플릿 리터럴은 빽틱안에 있는 모든 것을 String으로 출력한다`;

console.log(typeof str); //String

 

 

템플리 리터럴 활용법

기존 따옴표로 사용하면 되지 왜 이것을 사용하느냐.

바로 문자열 안에 함수를 사용할 수 있다는 것이다.

//백틱 없이 문자열을 합칠 때
return "의류를 구매한 횟수는 총" + count + "회 금액은" + sum + "원이며 등급은" + rating "입니다"
//백틱 사용 시
return `의류를 구매한 횟수는 총${count}회 금액은 ${sum}원이며 등급은 ${rating}입니다`

 

 

템플릿 리터럴을 사용하는 이유

사실 보기에 별 차이가 없어 보인다. 그리 편한 것 같지도 않고. 하지만 여러 장점들이 있다.

 

뛰어난 가독성

코드가 길어지거나 복잡해지면 확실히 템플릿 리터럴의 가독성이 훨씬 좋다는 것을 알 수 있다. 협업 시에 빠르게 함수를 찾아 수정할 수 있다.

 

줄 바꿈

무려 줄 바꿈을 할 수 있다. 그것도 자유롭게. 이것의 장점은 문자열 길이를 뽑아낼 때도 적용된다.

따옴표의 경우 줄바꿈을 위한 \n이 문자열 길이에 포함된다. 템플릿 리터럴은 그런 걱정 없이 문자열 길이를 정확하게 알 수 있다.

//템플릿 리터럴 줄바꿈
const str1 = `안녕하세요 잘 부탁드립니다.
반갑습니다. 감사합니다.`
//따옴표 문자열은 \n을 추가해야 한다.
const str2 = "안녕하세요 잘 부탁드립니다. \n반갑습니다. 감사합니다."

 

 

여러모로 유용한 기능을 한다.

다만 내 64key 배열 키보드에서 백틱을 못 찾아서 한참을 찾았다.

맥북의 경우 option + '~' 키를 누르면 된다.

근데 이게 또 한글 모드 일때는 ₩ 나온다. 그래서 한/영을 바꾼 후 눌러주면 빽틱이 나온다.