템플릿 문자열(Template Literals)

템플릿 문자열(Template Literals) 이란?

- ES6 부터 추가된 문자열 내장 표현식 개념이다.

- ', "(quotes) 대신에 `(back tic)을 사용하며, 중괄호와 $ 기호를 통한 플레이스 홀더로 감싸서 내부 표현식을 전달한다.

 

const name = 'James';
const age = '28';
const job = 'web developer';
const city = 'Seoul';
let html;

function hello() {
  return 'hello';
}

Template Strings를 사용하지 않는 방법 (ES5)

html = '<ul> +

          '<li>Name: ' + name + '</li>' +

          '<li>Age: ' + age + '</li>' +

          '<li>Job: ' + job + '</li>' +

          '<li>City: ' + city + '</li>' +

          '</ul>';

 

Template Strings를 사용 한 방법(ES6)

html = `

  <ul>

    <li>Name: ${name}</li>

    <li>Age: ${age}</li>

    <li>Job: ${job}</li>

    <li>City: ${city}</li>

    <li>${2 + 2}</li> //calling an expression

    <li>${hello()}</li> //calling an function

    <li>${age > 30 ? 'Over 30' : 'Under 30'}</li> //calling an if-else statement

  <ul>

`;

 

document.body.innerHTML = html; //위에 작성한 html string을 웹에 나타낸다.

 

결론

- ES6 부터 사용 가능한 Template Strings을 사용하면 작성이 더욱 용이해지고 가독성 또한 높일 수 있다.