Template literal(템플릿 리터럴)

Template literal(템플릿 리터럴)

 

 

대충 아래와 같은 코드가 있다고 치면 

 

var positions=[{y:20, x:10}, {y:100, x:30}];

var contents="좌표설정구간";

var tags='<div style="top:'+ positions[0].y+'px;left:'+positions[1].x+'px">'+ contents +'</div>';

 

값과 문자열 간의 구분을 할때 저놈에 따옴표는 엄청 스트레스이다.

 

ES6에선 아래와 같이 깔끔하게 해결해 주신다.

 

`string text`

`string text line 1 string text line 2`

`string text ${expression} string text` 

 tag `string text ${expression} string text`

 

 

아래는 모질라 문서의 설명부분

 

emplate literal 들은  double 또는 single quiotes 대신 back-tick (` `) character 

아래 그림처럼 키보드 맨 좌측 상단에 (`)표시 grave accent 

 로 감싸집니다. 

 

이들은 Dollor 사인과 중괄호( ${expression} ) 로 표기됩니다. 

placeholder 내부의 expression 들과 텍스트는 함께 function 으로 전달됩니다. 

default function 은 단지 부분들을 single string 으로 합칩니다.

 

template literal (여기서는 tag) 이전에 expression 이 있다면, template string은 "tagged template literal" 이라고 불립니다. 

그러한 경우에, tag expression (보통은 function) 은, 출력 전에 조작할 수 있는 processed template literal 을 필요로 합니다. template literal 내에서 back-tick 을 escape 하기 위해서, back-tick 앞에 backslash \ 를 넣습니다.

 

 

 

 

모질라 개발자문서참고 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN