본문 바로가기

ES6

HTML Fragments

반응형

string 안에 표현식을 표현식을 넣을 수 있다는 점 말고

template literal을 유용하게 사용할 수 있는 경우는

자바스크립트 안에서 html을 쓸 수 있다는 점이다.

 

 

 

See the Pen 200917-5 by hwd3004 (@hwd3004) on CodePen.

 

 

하다보면 구조는 복잡해질수 밖에 없다.

className도 함께 만들어야한다면

h1.className = "title" 이런식으로 코드를 추가해야한다.

HTML 태그가 많아진다면 더 많아질 것이다.

 

이를 돕는 template literal string이 있다.

 

 

 

 

See the Pen 200916-1 by hwd3004 (@hwd3004) on CodePen.

 

${variable}로 변수를 넣을 수도 있다.

template literal은 space, enter도 인식해준다.

 

 

 

 

 

 

 

See the Pen 200916-2 by hwd3004 (@hwd3004) on CodePen.

 

,가 나타는데 array여서 나타난다.

 

 

 

See the Pen 200916-3 by hwd3004 (@hwd3004) on CodePen.

 

join()을 써서 없앨 수 있다.

반응형

'ES6' 카테고리의 다른 글

string 메소드 - includes(), repeat(), startsWith(), endsWith()  (0) 2020.09.18
Cloning Styled Components  (0) 2020.09.18
Default Values  (0) 2020.09.17
forEach(), map()  (0) 2020.09.14
filter() - includes()  (0) 2020.09.14