[JS] ES6 , 템플릿 리터럴Template Literal, 백틱(`), ${ }을 이용한 문자열 표기법

 

 

ES6는 템플릿 리터럴(Template Literal)이라고 하는 새로운 문자열 표기법을 도입했다.
템플릿 리터럴을 통해 문장열 입력을 복잡도를 크게 낮출 수 있다.
템플릿 리터럴은 일반 문자열과 비슷해보이지만 작은 따옴표('). 큰 따옴표(") 대신에 백틱(`)을 사용한다

 

 

1. 기존 ES5에서의 코드

 

function introduce(name, code){
	alert("선택하신 제품 " + name + "의 코드는 " + code + "입니다. ")

 

 

2. ES6에서의 새로운 방법

function introduce(name, code){
	alert(`선택하신 제품 ${name}의 코드는 ${code}입니다.`)

 

 

 

• 백틱은 키보드이 물결표시(~)에 있다.
• +를 이용해서 문자열을 잇다 보면 실수가 발생하는데 이러한 실수를 줄일 수 있다.
• innerHTML을 사용할 때 작은따옴표, 큰 따옴표 사용이 헷갈리고 오류가 발생하는데 백틱을 이용하 경우 복잡성이 줄어든다.
• 코드의 가시성에도 매개변수가 눈에 띄기 때문에 좋다
• 작은 따옴표, 큰 따옴표 문자열에서는 개행이나 tab을 사용하기 위해서는 이스케이프 문자를 사용해야 했다. 하지만 백틱(`)을 사용한 템플릿 리터럴에서는 개행이나 tab(수평)이 모두 사용 가능하다
• ${ } 사이에 변수나 연산을 삽입하여 사용할 수 있다. 즉 표현식 삽입이 가능하다.