Template Literals 1

✔️ Template Literals

---

백틱기호 성질

1. 문자에 줄바꿈 가능(String은 원래 안 됨)

var 문자 = `안녕
하세요`;

2. 문자, 변수 혼용해서 사용시 편리

• 문자 중간에 변수 사용 시 $중괄호 둘러주면 O

var 이름 = '손흥민';
var 문자 = `안녕하세요 ${이름} 입니다`;

• HTML 템플릿 만들 때

var 문자 = `
<div>
  <div>
    ${변수명}
  </div>
</div>`;

✔️ Tagged Literal

---

📌 해체분석기

함수 사용 시 함수명 옆에 Tagged Literal 써주면
문자/변수를 분리해준다.

var 변수 = '손흥민';

function 해체분석기(문자들, 변수들){
  console.log(문자들);
  // 'array : [ '안녕하세요', '입니다' ]' 가 출력된다.
  console.log(변수들);
  // '손흥민'이 출력된다.
}

해체분석기`안녕하세요 ${변수} 입니다`;

📌 문자는 쪼개어 array형태로 변환된다

문자열의 순서 변경도 가능하다

function 해체분석기(문자들){
  console.log(문자들);
  // 'array : [ '안녕하세요', '입니다' ]' 가 출력된다.
}

해체분석기`안녕하세요 ${변수} 저는 ${변수} 손오공 입니다`;

👀 결과 : ['안녕하세요', '저는', '손오공입니다']
${변수}를 기준으로 문장이 분리되어 array 내에 들어간다
(배열에 인덱스 사용해 각각의 어절을 가져오는 것 또한 가능하다.)

📌 한 개 이상의 변수

여러 개의 변수가 포함된 문장을 분석하고 싶다면 파라미터를 하나 더 써준다.

var person1 = '손흥민';
var person2 = '손오공';

function 해체분석기(문자들, person1, person2){
  console.log(문자들);
  // 'array : [ '안녕하세요', '입니다' ]' 가 출력된다.
  console.log(person1);
  // '손흥민'이 출력된다.
  console.log(person2);
  // '손오공'이 출력된다
}

해체분석기`안녕하세요 ${person1} ${person2}입니다`;