Template literals / Tagged literals

Template literals (템플릿 리터럴스)

숫자키 1 왼쪽에 있는 ` 

`를 backquote, backtick 이라고 부른다.  (발음은 백쿼트, 백틱, 백ㅋ쿼트)

---

`의 장점

1. 문자 중간중간에 엔터키 입력이 가능하다.

자바스크립트 문자열은 문자 중간에 엔터를 치면 안되는데 `로 문자를 만들면 엔터키가 자유롭게 가능하다.

 

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

 

2. 문자 중간에 변수를 집어넣을 때 편리하다.

자바스크립트 문자열은 문자 중간에 변수를 넣고 싶을 때 문자를 쪼개서 + 기호를 넣어야 한다.

하지만 `로 문자를 만들면 문자 중간에 ${변수명} 으로 써서 쉽게 넣을 수 있다.

var 이름 = `박금향`;
var 문자 = `안녕하세요 저는 ${이름} 입니다.` ;

이게 되니까 아래같은 것도 쓸 수 있다.

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

자바스크립트로 HTML 태그 만들 때 아주 편할 듯!

insertAdjacentHTML 라는 걸 쓰면 html 태그를 만들 수 있다고 한다!

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

Element: insertAdjacentHTML() 메서드 - Web API | MDN

🔼 보안상으로는 좋지 않다고 한다.

 

 

---

Tagged literals (태그드 리터럴스)

문자 해체분석기능을 만들 수 있다.

▶ 문자 중간중간의 단어 순서를 바꿀 때, 변수를 제거할 때 유용하다.

 

var 변수 = '박금향';

function 해체분석기(){
  return 10 
}

해체분석기`안녕하세요 ${변수} 입니다`;
//해체분석기(); 와 같다.

 

소괄호(); 가 아니라 문자로 함수를 실행시킬 수 있다.

() 대신 ``를 쓰면 된다. 그럼 함수가 실행이 됨.

 

Q. 이렇게 써서 좋은 게 뭐임?

A. 함수 뒤에 `문자`를 써서 함수를 실행하면 그 `문자열`을 해체분석할 수 있다.

---

해체분석 써보기

var 이름 = '박금향';

function 해체분석기(문자들, 변수들){
  console.log(문자들); //콘솔창 : ['안녕하세요', '입니다']
  console.log(변수들); //콘솔창 : 박금향
  console.log(문자들[0] + 변수들 + 문자들[1]); //콘솔창 : 안녕하세요 박금향 입니다
}

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

해체분석기에 파라미터를 2개 만들어준다.

마지막줄에 해체분석기`안녕하세요${이름}입니다`; 를 써줬는데,

해체분석기 오른쪽의 `안녕하세요${이름}입니다` 를 해체분석한다.

 

첫 번째 파라미터인 '문자들'은

["안녕하세요", "입니다"] Array(2)

로 해체돼서 분석된다. 문자들에 ${ }는 포함되지 않는다.

Array 이기 때문에 문자들[0], 문자들[1] 뭐 이렇게 순서를 매겨서 사용할 수 있다.

 

두 번째 파라미터인 '변수들'은

`` 안의 ${ } 변수를 담는다.

${이름} 이면 맨 위에 var 이름 = '박금향'; 이라고 했으니

막줄이 어떻게 됐는지 써보면

해체분석기 `안녕하세요 박금향 입니다`; 가 될 것이다.