Template Literals

1.탬플릿 리터럴

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. ES6에 추가된 문법이며 변수를 이용해 동적으로 문자열을 생성할 수 있다.

2.템플릿 리터럴의 기본 사용법

템플릿 리터럴은 다음과 같이 Backtick(`) 이라는 문자 사이에 문자열 템플릿을 입력하고, 거기에 ${variable}처럼 변수를 주입시켜 문자열을 만들어준다.

const name = 'John';
const age = 25;

const str = `name: ${name}, age: ${age}`;
console.log(str);

위 예제dhk 같이 Backtick안에서 문자열 템플릿 $를 써주면서 변수를 주입시켜서 코드를 완성해 준다.

3.Template Literals 중첩 예제

const people = [{
  name: 'HOJUN 1',
  age: 27,
}, {
  name: 'HOJUN 2',
  age: 28,
}, {
  name: 'HOJUN 3',
  age: 29,
}
]; 
//1.배열안에 객체를 담아준다.
//2.key 값을 지정해준다.

const markup = `
<ul>
	${people.map(person => `<li>  ${person.name}  </li>`)}
</ul>
`;

console.log(markup);
//3.map함수를 사용하여 배열안에 value값을 선택한후 실행해준다.
//4.아래는 결과값
// <ul>
//   <li> HOJUN 1 </li>,<li> HOJUN 2 </li>, <li> HOJUN 3 </li>
// </ul>

템플릿 리터럴