이듬(EUID)'s Front-End Master

📝강의를 시청하면서 궁금한 점이 있거나, 질문 또는 의견을 남기고 싶다면? 페이지 하단(↓) "토론" 섹션에 남겨주세요.

Template Literal

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴 입니다. 여러 줄로 이뤄진 문자열과 문자 보간 기능을 사용할 수 있습니다.

영상 강의

PART 1

codepen



예제

템플릿 리터럴 을 사용하면 명시적인 문자열 이스케이프를 사용하지 않아도 특수문자를 포함한 문자열을 구축할 수 있습니다.

var text = "이 문자열은 이스케이프 된 \"큰 따옴표\"를 포함합니다.";

let text = `이 문자열은 이스케이프 된 "큰 따옴표"를 포함합니다.`;

템플릿 리터럴은 문자열과 값을 연결시키는 문자 인터폴레이션(String Interpolation)을 지원합니다.

기존의 문자 접합 코드를 복잡하여 사용하기 불편했습니다.






 

var cat = {
  name: '몽크'
  age: 9
};

console.log('우리집 냥이 이름은 ' + cat.name + '이고, 나이는 ' + cat.age + '살 입니다.');

코드를 ES6+ 템플릿 리터럴을 활용하면 보다 간단하고 읽기 쉬운 코드를 작성할 수 있습니다.






 

const cat = {
  name: '몽크'
  age: 9
};

console.log(`우리집 냥이 이름은 ${cat.name}이고, 나이는 ${cat.age}살 입니다.`);

ES5에서 템플릿 코드를 개행하기 위해서는 다음과 같이 코드를 작성했습니다.

var htmlCode = (
    '<div\n' +
    '  data-code-type="html"\n' +
    '  class="code wrapper"\n' +
    '>\n' +
    '  ...' +
    '</div>'
);

// 또는

var htmlCode = [
    '<div',
    '  data-code-type="html"',
    '  class="code wrapper"',
    '>',
    '  ...',
    '</div>'
].join('\n');

// 또는

var htmlCode = '\
  <div\
    data-code-type="html"\
    class="code wrapper"\
  >\
    ...\
  </div>\
';

ES6+ 템플릿 리터럴은 개행을 보존하므로 보다 편리하게 코드를 작성할 수 있습니다.

let htmlCode = ( `
  <div
    data-code-type="html"
    class="code wrapper"
  >
    ...
  </div>
`);

뿐만 아니라, 템플릿 리터럴은 JavaScript 표현식을 사용할 수 있습니다.


 

let today = new Date();
let time = `현재 시각은 ${today.toLocaleTimeString()}입니다.`;

참고

← String Addtions 💰→