[JavaScript] 템플릿 리터럴 사용법 (ES6부터)

[JavaScript] 템플릿 리터럴 사용법 (ES6부터)

 

자바스크립트는 2015년 이후 매년 새 버전이 나온다.

2015년에 업그레이드 된 자바스크립트는 ES6이라고 불리며 ES2015라고도 한다.

2016년에 나온 자바스크립트는 ES7(ES2016),

2017년에 나온 자바스크립트는 ES8(ES2017),

2018년은 ES9(ES2018), 2019년은 ES10(ES2019)..

 

템플릿 리터럴은 이중 ES6에 새롭게 도입된 문법이다.

 

문자열을 조합할 때 기존에는 + 연산자를 이용해 조합했던 것을

템플릿 리터럴 도입 이후에는 ` ${} ` 을 이용해서 사용할 수 있다.

사용 방법은 간단하다.

 

const name = 'world';
console.log('Hello ' + name );

기존에는 + 연산자를 이용해 위와 같이 문자열을 조합했다면,

템플릿 리터럴에서는 조합하고자 하는 문자열을 ` ` 안에 넣고,

변수는 ${} 안에 넣어주면 된다.

 

이때 주의해야 할 점은, ` `은 작은따옴표(' ')가 아닌 백틱이라는 것이다.

키보드 상에서 숫자 1 옆에 위치하고 있으며 ~과 같이 위치하고 있는 기호이다.

백틱, 그레이브 액센트(grave accent) 또는 backquote라고 부른다.