Template literals

Template literals

기존에 사용하던 " " , ' ' 말고도 자바스크립트에서 백틱( ` )을 사용하여 문자열을 다룰 수 있는데

백틱을 이용하는 경우 장점들이 있다.

1. 문자 중간 엔터키(줄 바꿈)입력이 가능하다.

var 문자열 = "안녕
하세요";

기존 따음표로 묶어보면 엔터키 입력이 안되는데 백틱을 이용하면

var 문자열 = `안녕
하세요`;

이렇게 묶이는 것을 확인할 수 있다.

2. 문자 중간에 변수를 집어넣을 때 편리하다.

기존에 문자열 중간에 변수를 넣고 싶으면

var age = 24;
var 문자열 = "제 나이는" + age + "입니다.";

이렇게 사용 했지만

var age = 24;
var 문자열 = `제 나이는 ${ age }입니다.`;

조금 더 직관적으로 표현이 가능하다.

1, 2의 장점들은 자바스크립트 문자로 html을 작성할 때 유용한데

var Template = `
 <div>
	<div>
		${ 변수명 }
	</div>
 </div>`

이렇게 직관적으로 코딩이 가능하다.

Tagged Literals

tagged literals라고 해서 함수로 문자를 해체분석기능을 만들어줄 수 도 있다.
문자 중간중간에 있는 단어 순서를 바꾸거나 변수를 제거하거나 할 때 유용한데

var 변수 = "손흥민";

function 해체분석기(문자들, 변수들){
  console.log(문자들);
  console.log(변수들);
}

해체분석기`안녕하세요 ${변수} 입니다`;

실행결과

[ '안녕하세요 ', ' 입니다' ]
손흥민

이렇게 분리해서 보여준다.
이러한 성질을 이용해 문자열을 재조합하거나 분석할 수 있다.