Template Literals

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.
여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있다.

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공한다.
템플릿 리털은 런타임에 일반 문자열로 변환되어 처리된다.
템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리된다.
템플릿 리터럴은 일반 문자열과 비슷해 보이지만 작은따옴표(‘ ’) 또는 큰따옴표(“ ”) 같은 일반적인 따옴표 대신 백틱을 사용해 표현한다.

const tamplate = `Template literal`
console.log(templater); 

멀티라인 문자열

일반 문자열 내에서는 줄바꿈이 허용되지 않는다.

const str = “hello
World”; 

따라서 일반 문자열 내에서 줄바꿈 등의 공백을 표현하려면 백슬래시로 시작하는 이스케이프 시퀀스를 사용해야 한다.
줄바꿈과 들여쓰기가 적용된 HTML 문자열은 다음과 같이 이스케이프 시퀀스를 사용해 작성한다.

const template = “<ul>\n\t<li><a href=“#”>Home</li>\n<ul>”;
// 출력결과
<ul>
	<li>a href=“#”>Home</li>
</ul>

위에 일반 문자열과 달리 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용된다.

const template = `<ul>
<li><a href=“#”>Home</a></li>
</ul>

console.log(template);

// 출력결과
<ul>
	<li><a href=“#”>Home</li>
</ul>

표현식 삽입

문자열은 문자열 연산자 +를 사용해 연결할 수 있다. + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외의 경우는 덧셈 연산자로 동작한다.

const first = “Ung-mo”
const last = “lee”

console.log(`“My name is” + first + last + “.”`)
//My name is Ung-mo lee.

템플릿 리터럴 내에서는 표현식 삽입을 통해 간단히 문자열을 삽입할 수 있다.
이를 통해 문자열 연산자보다 가독성 좋고 간편하게 문자열을 조합할 수 있다.