Template Literal

박태진·2022년 3월 16일

1. Template Literal이란?

  • ES6에서 도입한 새로운 문자열 표기법으로 일반 문자열과 비슷해 보이나 (' ') 또는 (" ") 같은 통상적인 따옴표 대신 BackTick을 사용한다.

	const template = `template literal은 backtick을 사용한다.`;
	console.log(template);

2. Template Literal 예시

  • 일반적인 문자열에서 줄바꿈은 허용되지 않으면 공백 표현을 위해 ()로 시작하는 Escape Sequence를 사용해야 한다. 하지만 Template literal은 여러 줄에 걸쳐 문자열을 작성할 수 있으며, Template Literal 내의 모든 공백은 그대로 적용된다.
	const template = `<ul class="nav-items">
		<li><a href="#home">Home</a><li>
		<li><a href="#news">News</a><li>
		<li><a href="#contact">Contact</a><li>
		<li><a href="#about">About</a><li>
	</ul>`;

	console.log(template);
  • Template Literal은 (+)연산자를 사용하지 않아도 간단하게 새로운 문자열을 삽입할 수 있는 기능인 String Interpolation을 제공한다. String Interpolation은 ${ }로 표현식을 감싸며 ${ }내의 표현식은 타입이 문자열로 강제 변환된다.
	const first = 'Tae-jin';
	const last = 'Park';
	
	//ES5 : 문자열 연결
	console.log('My name is' + first + '' + last);
		
	//ES6 : String Interpolation
	console.log(`My name is ${first} ${last}`);

0개의 댓글