Chapter 04: 템플릿 리터럴 (Template literals)

💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다.

4.1 문자열 삽입

---

// ES5
var name = "Alberto";
var greeting = 'Hello my name is ' + name;

console.log(greeting);
// Hello my name is Alberto

// ES6
let name  = "Alberto";
const greeting = `Hello my name is ${name}`;

console.log(greeting);
// Hello my name is Alberto

4.2 표현식 삽입

---

// ES5
var a = 1;
var b = 10;
console.log('1 * 10 is ' + ( a * b));
// 1 * 10 is 10

// ES6
var a = 1;
var b = 10;
console.log(`1 * 10 is ${a * b}`);
// 1 * 10 is 10

4.3 여러 줄 문자열 생성

---

// ES5
// 각 행마다 backslash 추가 필요
var text = "hello, \
my name is Alberto \
how are you?\ "

// ES6
const content = `hello,
my name is Alberto
how are you?`;

4.4 중첩 템플릿

---

const people = [{
    name: 'Alberto',
    age: 27
},{
    name: 'Caroline',
    age: 27
},{
    name: 'Josh',
    age: 31
}];

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

// <ul>
//   <li>  Alberto</li>,<li>  Caroline</li>,<li>  Josh</li>
// </ul>

4.5 삼항 연산자 추가하기

---

const artist = {
  name: "Bon Jovi",
  age: 56,
};

// artist 객체에 song 프로퍼티가 있을 때만 문장에 추가하고, 없으면 아무 것도 반환하지 않음
const text = `
  <div>
    <p>  ${artist.name} is ${artist.age} years old ${artist.song ? `and wrote the song ${artist.song}` : '' }
    </p>
  </div>
`
// <div>
//  <p>  Bon Jovi is 56 years old
//  </p>
// </div>
const artist = {
  name: "Trent Reznor",
  age: 53,
  song: 'Hurt'
};
// <div>
//   <p>  Trent Reznor is 53 years old and wrote the song Hurt
//   </p>
// </div>

4.6 템플릿 리터럴에 함수 전달하기

---

다음 예제 코드처럼 템플릿 리터럴 내에 함수를 전달할 수도 있다.

const groceries = {
  meat: "pork chop",
  veggie: "salad",
  fruit: "apple",
  others: ['mushrooms', 'instant noodles', 'instant soup'],
}

function groceryList(others) {
  return `
    <p>
      ${others.map( other => ` <span>${other}</span>`).join('\n')}
    </p>
  `;
}

const markup = `
  <div>
    <p>${groceries.meat}</p>
    <p>${groceries.veggie}</p>
    <p>${groceries.fruit}</p>
    <p>${groceryList(groceries.others)}</p> // 템플릿 리터럴 내에 함수 전달
  <div>
`
//  <div>
//     <p>pork chop</p>
//     <p>salad</p>
//     <p>apple</p>
//     <p>
//     <p>
//        <span>mushrooms</span>
//        <span>instant noodles</span>
//        <span>instant soup</span>
//     </p>
//   </p>
//   <div>

4.7 태그된 템플릿 리터럴

---

함수를 태그하여 템플릿 리터럴을 실행하면 템플릿 리터럴 내부에 있는 모든 항목이 태그된 함수의 parameter로 제공된다.

let person = "Alberto";
let age = 25;

function myTag(strings,personName,personAge){
  let str = strings[1];
  let ageStr;

  personAge > 50 ? ageStr = "grandpa" : ageStr = "youngster";

  return personName + str + ageStr;
}

let sentence = myTag`${person} is a ${age}`;
console.log(sentence);
// Alberto is a youngster

참고

---

• Tagged Template literals — Its more than you think