[2019.04.17] ES6 문법 - Template Literals 문자열 처리

자바스크립트에서 문자열을 표시할 때 '(따옴표) 또는 "(쌍따옴표)를 사용하는데, ES6문법에서 들어오면서 템플릿 리터럴(Template Literal)라는 새로운 문자열 표기법이 생겼다. `(백틱) 이라는 문자열을 사용한다. 

주의할 점 : 한글에서는 ₩(원)으로 나옴, 영어에서 쳐야 `백틱이 나온다

백틱은 중간에 +로 문자열을 합쳐주거나 하는 것 없이 ` `안에 다음 코드 줄로 변경해도 그대로 문자열을 사용한다. 

// 백틱 방법
`문자열 첫번째 줄입니다.
두번째 줄입니다.`

// 기존 따옴표 방법
'문자열 첫번째 줄입니다.' + 
'플러스를 안해주면 문법에러가 납니다.'

위와 같이 백틱 문자열은 바로 줄바꿈을 사용할 수 있다.

 

또한 백틱 문자열 안에서 따옴표와 쌍따옴표는 문자열로 표시된다.

 

`저의 이름은 '정인용'이고 현재 열심히 "개발 공부 중" 입니다.`

'원래는 따옴표,쌍따옴표를 문자열로 쓰려면 "따옴표 안에 쌍따옴표로" 하거나' +
"쌍 따옴표 안에서 '이렇게 따옴표'를 하거나 " +
'따옴 표 안에 \'이렇게\' 이스케이프를 해줘야 합니다.'

위와 같이 템플릿 리터럴 내의 모든 문자열을 그대로 적용되서 사용할 수 있다.

또한 백틱 안에서 바로 변수를 사용할 수 있다.

const first = 'InYong';

const last = 'Jung';

console.log('My name is ' + first + ' ' + last + '.'); // 따옴표 방식

console.log(`My name is ` ${first} ${last}.`); // 템플릿 리터럴 방식

console.log(` 1 + 1 = ${1 + 1} !`); // 연산도 가능