모던 자바스크립트 핵심 가이드 04 템플릿 리터럴

* 모던 자바스크립트 핵심 가이드(저자 알베르토 몬탈레시, 옮김 임지순/권영재) 복습

* 핵심 부분과 필요할 경우 문제도 수정해서 기재할 것

* 문제될 경우 삭제할 것 

 

 

○ 문자열 삽입 -> + 로 따로 분리해서 삽입하던 것을 ``(백틱)을 이용해 쉽게 작성

 

//이전 방식
var name = "anna";
var greeting = "안녕하세요 제 이름은 " + name + "입니다.";

console.log(greeting)
//"안녕하세요 제 이름은 anna입니다."

//백틱 방식
var name2 = "john";
var greeting2 = `안녕하세요 제 이름은 ${name2}입니다.`

console.log(greeting2)
//"안녕하세요 제 이름은 john입니다."

 

○ 표현식 삽입

 

//이전 방식
var apple = 10;
var banana = 5;

console.log("총 과일의 갯수는 " + (apple + banana));
//"총 과일의 갯수는 15"

//백틱 방식
var kiwi = 10;
var orange = 5;

console.log(`총 과일의 갯수는 ${kiwi + orange}`);
//"총 과일의 갯수는 15"

 

 

○ 여러 줄 문자열 생성

 

//"5월의 행사
//5.5 어린이날
//5.8 어버이날
//5.15 스승의날" 입력하기

// 방법 1
var MayEvent = "5월의 행사 \
5.5 어린이날 \
5.8 어버이날 \
5.15 스승의날";

console.log(MayEvent);
//"5월의 행사 5.5 어린이날 5.8 어버이날 5.15 스승의 날"

// 방법 2
var MayEvent2 = `5월의 행사
5.5 어린이날
5.8 어버이날
5.15 스승의날 `;

console.log(MayEvent2);

 

 

○ 중첩 템플릿 

- 템플릿 안에 템플릿 중첩하는 것이 쉬워짐

 

const people = [{name: 'Loid Forger',
                age: 28},
               {name: 'Yor Forger',
               age: 27},
               {name: 'Anya Forger',
               age: 6}];

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

console.log(peopleList);
//"<ul>
//<li> Loid Forger</li>,<li> Yor Forger</li>,<li> Anya Forger</li>
//</ul>"

 

 

○ 삼항 연산자 추가

- ? 앞의 조건이 true이면 첫 번째 값 반환, 그렇지 않으면 : 뒤에 있는 값이 반환

 

const Avengers = true;

function whereIsAvengers() {
  console.log(Avengers ? "Disney" : "Nexflix")
}

whereIsAvengers(); //Disney

 

 

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

 

var starbucks = {
  Coffee: 'Americano',
  Frappuccino: 'Mocca Frappuccino',
  Blended: 'Peach And Lemon Blended',
  Fizzio: ['Cool Lime Fizzio', 'Black tea Lemon Fizzio', 'Passion Tango Tea Lemonade']
}

var Fizzio = ['Cool Lime Fizzio', 'Black tea Lemon Fizzio', 'Passion Tango Tea Lemonade']

function DrinkList(Fizzio) {
  return `
  <p>
    ${Fizzio.map(soda => `<span>${soda}`).join('\n')}
</p>`
} 

console.log(DrinkList(Fizzio));
//"<p>
//<span>Cool Lime Fizzio
//<span>Black tea Lemon Fizzio
//<span>Passion Tango Tea Lemonade
//</p>"


const Result = `
 <div>
<p>${starbucks.Coffee}</p>
<p>${starbucks.Frappuccino}</p>
<p>${starbucks.Blended}</p>
<p>${starbucks.Fizzio}</p>

console.log(Result);
//"<div>
//<p>Americano</p>
//<p>Mocca Frappuccino</p>
//<p>Peach And Lemon Blended</p>
//<p>Cool Lime Fizzio,Black tea Lemon Fizzio,Passion Tango Tea Lemonade</p>
//</div>"

 

 

○ 태그된 템플릿 리터럴 

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

- strings 배열의 각 원소는 템플릿 리터럴에 포함된 변수들을 구분자로 삼아 문자열로 나눈 결과

 

const person = "Loid Forger";
let age = 28;

function myTag(strings, personName, personAge) {
  //strings: ["He's Information : "]
  let str = strings[1]; //And
  let ageStr;


personAge > 50? ageStr = "Old Spy" : ageStr = "Young Spy";

return personName + str + ageStr
}

let sentence = myTag`He's Information : ${person} And ${age}`;

console.log(sentence); //"Loid Forger / Young Spy"