템플릿 리터럴이 등장하는 강의를 듣다가 문득 리터럴에 대한 개념이 두루뭉실하게 느껴져서🤔.. 리터럴과 템플릿 리터럴을 정리할 겸 포스트를 작성한다.
리터럴(literal)
먼저 아래는 리터럴을 사용한 값의 예시들이다. 예시만 보면 전혀 어렵지 않고 익히 알고 있는 내용이다.
100정수 리터럴
'Hi!'문자열 리터럴
false불리언 리터럴
{ name: 'Kim', age: 11 }객체 리터럴
[ 0, 1, 2 ]배열 리터럴
function() {}함수 리터럴
...
리터럴은 <사람이 이해할 수 있는 문자 / 또는 약속된 기호를 사용해 / 값을 생성하는 표기법>이다. 문장을 나눠서 보면 좀 더 편하다.
사람이 이해할 수 있는 문자는 영어, 한국어, 숫자 등이
약속된 기호로는 중괄호, 소괄호, 대괄호, 홑따옴표 등이 있다.
이런 것들로 값을 표기하는 방법이 리터럴인 것이다. 즉, 값 생성을 위해 미리 약속된 표기법이다.
템플릿 리터럴(template literal)
템플릿 리터럴은 ES6에서 새롭게 추가된 문자열 표기법이다. 기존 문자열 표기는 쌍따옴표(")와 홑따옴표(')로만 표현이 가능했는데, 템플릿 리터럴이 도입되면서 백틱(``)을 사용할 수 있게 되었다.
let a = 'abc'
let b = "abc"
let c = `abc`
a === b
b === c
a === c
위 결과를 보면 백틱 기호를 사용한 템플릿 리터럴과 스트링 리터럴(문자열 리터럴) 값이 같다는 것을 알 수 있다.
그런데 왜! 얘는 혼자 템플릿으로 이름이 다를까? 분명 다른 특징이 있기 때문에 이름이 다를 것이고, 템플릿 리터럴이 독자적으로 가지고 있는 특징은 다음과 같다.
템플릿 리터럴의 특징
- 멀티라인 문자열
var a = 'abc\n' + 'def'기존의 스트링 리터럴이 위와 같은 이스케이프 시퀀스를 이용해 개행을 했다면, 템플릿 리터럴에선 아래처럼 엔터만으로 개행이 가능하다.
let b = `abc
def`다만 템플릿 리터럴은 백틱 사이에 들어간 모든 뎁스를 전부 문자열로 인식하기 때문에 그 점을 고려해야 한다. 고운 정렬(?)이 좋다면 백틱 기호 안에 이스케이프 시퀀스를 동일하게 작성해 주면 된다.
let b = `abc\n` +
`def`이렇게 되면 기존 방법이랑 다를 바가 없기 때문에 애매한 느낌이 들지만, ${}을 이용해서 보간을 할 계획이라면 백틱이 더 좋은 선택일 수 있겠다.
- 표현식 삽입
const a = 10
const b = 20
const before = a + ' + ' + b + ' = ' + ( a + b );
const after = `${a} + ${b} = ${ a + b }`before과 after의 과정은 다르지만 모두 10 + 20 = 30이라는 같은 결과가 나온다. ${} 안에는 값과 식이 들어올 수 있기 때문에 이를 이용해서 이전보다 훨씬 쉬운 표현식 삽입이 가능하다.
