[JavaScript] 자바스크립트 Template literals로 변수 포함한 html append 쉽게하기

제목 참 길다

자바스크립트 Template literals로 변수 포함한 html append 쉽게하기 ..

구구절절 .. 

 

하지만 저 키워드가 모두 필여한걸요.. ㅎ

 

Template literals 모냐면

기존에 우리가 사용하던  '', "" 대신 backtick 이라는 `요런` 기호를 사용해서 문자열을 작성하는 es6 방식!

요거 쓰면 훨씬! 쉽다

 

장점이 모냐고요?

 

1 엔터 넣기 쉬움

2 중간에 변수 넣기 쉬움

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

 

어때 정말 편하지 ㅠ..?

---

문법 필요없고 일할 때 어케 하면 되는지 궁금하면 바로 더보기를 클릭하시오..

 

백틱 없이 구구절절 넣기

=> 

<기존>

자바스크립트에서 동적으로 html을 append 하는 부분이 있는데,

변수를 추가하는 부분이 많아서 번거로웠으나 'backtick' (백틱)을 사용해 넣으니 훨씬 편해짐 ㅠ..

 

var name = ${data.name};
var age = ${data.age};
var sex = ${data.sex};

var html += ''
    html += '<div id=/"content/">';
    html += '	<span id=/"name/">'+name+'</span><br>';
    html += '	<span id=/"age/">'+age+'</span><br>';
    html += '	<span id=/"sex/">'+sex+'</span><br>';
    html += '</div>';

기존에 사용했던 방식..

데이터를 많이 넣어줘야 할 때는 '', ""  빼먹어서 오류나고 코드 길어지면 어디가 어디인지 모르겠고

' 하나 없어서 오류나면 진짜,, 너모 화가 치밀었슴 ㅠ

나는 요렇게 html을 통으로 만들어서 append 하는 방식이 익숙하지 않아서 넘 불편했슴..

 

 

백틱 쓰면 요렇게

=>  

하지만..?

backtick 써서 작성하면 이렇게나 간단합니다 ㅠ..

var name = ${data.name};
var age = ${data.age};
var sex = ${data.sex};

var html =  `<div id="content"> 
                <span id="name">${name}</span><br>
                <span id="age">${age}</span><br>
                <span id="sex">${sex}</span><br>
             </div>`;

 

물론 길어지면 얘도 보기 힘들지만 훨씬. 편하다

 

-끝-