template literal

1. 문자열을 선언하는 방식

var a = 'abc';
var b = "abc";
var c = `abc`;

문자열은 위와같이 세가지로 표현할 수 있다.

기존의 '',"" 와 ``(백틱)의 차이는 무엇일까?

a와 b는 string literal 이다.
우리말로 하면 "문자그대로의" 라는 뜻이다.
c는 template literal이다.
이는 내장된 표현식을 허용하는 문자열 리터럴이라는 뜻이다.
무슨뜻인지 예시를 들며 자세히 알아보자

const a = 10
const b = 20
const str = `${a} + ${b} = ${ a + b }`
// 10 + 20 = 30
console.log(str)

template literal은 ${}안에 값이나 식이 올 수 있다. (문은 값을 반환하지 않기 때문에 안된다.)

또한 template literal은 출력때 따로 줄바꿈을 해주지 않아도 된다.

var a ='abc\n' + 'def'
// abc
// def
var b = `abc
def`
// abc
// def

단 공백이 그대로 출력된다.
var c = `abc
	def`
//abc
//	def

자동으로 toString처리 되는 경우

1. console.log(`${[0, 1, 2]}`)
2. console.log(`${{a:1, b:2}}`)
3. console.log(`${function(){ return 1 }}`)
4. console.log(`${(() => 1 )()}` + 1)

1번은 배열이지만 ${}안에 있으므로 문자열 처리된다. 그러므로 자동으로 toString처리되어 0, 1, 2가 출력된다.
2은 객체를 toString시키면 [object Object]라는 결과값을 얻는다.
3은 함수이므로 function(){ return 1 } 함수 그 자체를 출력한다.
4는 함수지만 ()가 있으므로 즉시처리함수이다. 그러므로 1을 return하고 문자열 1과 숫자 1을 더하면 11이 된다.