[JavaScript / ES6] Template literals 알아보기

💡 실습 포인트!

💜 들어가기 전에

• Template literals 는 JavaScript 에서 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법이다.
• 따옴표 대신에 backquote, backtick ( ` )이라는 기호를 사용해서 문자를 만들면 된다.
  (키보드 상의 물결 기호 아래에 있다.)

---

💜 Template literals

🤍 문자 중간에 엔터키 입력 가능

var 문자 = `
안녕하세요.
프론트엔드 개발자를 꿈꾸는
박서윤입니다.
`;

• JavaScript 문자열은 문자 중간에 엔터키를 사용해서는 안된다.
• 하지만 backtick 으로 문자를 만든다면 엔터키를 자유롭게 사용하는 것이 가능하다.

---

🤍 문자 중간에 변수 넣을 때 편리

  var 변수1 = '박서윤';
  var 변수2 = '프론트엔드 개발자'
  
  var 문자1 = '안녕하세요! ' + 변수2 + '를 꿈꾸는 ' + 변수1 + '입니다.';
  var 문자2 = `안녕하세요! ${ 변수2 }를 꿈꾸는 ${ 변수1 }입니다.`;

• JavaScript 에서 문자 중간에 변수를 넣고 싶은 경우에는 위 코드의 문자1 과 같이 문자열을 쪼갠 다음 + 기호를 사용해야 한다.
• 하지만 backtick 을 사용하면 변수가 필요한 위치에 ${ 변수명 } 과 같은 형태로 쉽게 변수를 넣어줄 수 있다.

 

  var 변수 = '박서윤';
  var 변수2 = '프론트엔드 개발자'
  var 템플릿 = `
  <div>
  	${ 변수2 } ${ 변수 } 
  </div>
  `;
  
  console.log(템플릿);  // <div> 프론트엔드 개발자 박서윤 </div>

• 이는 JavaScript 에서 변수에 html 을 담아서 사용할 때에도 따옴표를 사용했을 때 보다 훨씬 보기가 편하기 때문에 유용하다.

---

💜 Tagged template literals

• ES6 는 tagged template literals 라고 해서 함수를 통해 문자 해체분석기능을 만들 수도 있다.
• 이는 문자 중간중간에 있는 단어의 순서를 변경하거나 단어를 제거할 때, 혹은 변수의 위치를 옮길 때 유용하게 사용할 수 있다.

🤍 사용방법

function 해체분석기(문자들, 변수들, 변수들2){
    console.log(문자들);
    console.log(변수들);
    console.log(변수들2);
};

해체분석기`안녕하세요! ${ 변수2 }를 꿈꾸는 ${ 변수 }입니다.`;

// ['안녕하세요! ', '를 꿈꾸는 ', '입니다.', raw: Array(3)]
// 프론트엔드 개발자
// 박서윤

• 해체분석기 함수의 파라미터를 2개 추가해준 후에 소괄호 대신 backtick 기호로 감싼 문자열을 붙여서 함수를 실행하면 해당 문자를 해체분석하는 것이 가능하다.
• 첫번째 파라미터인 "문자들"은 backtick 기호로 감싼 문자열에서 순수한 문자만 골라서 이를 Array 로 만들어준다.
  (이 때의 문자는 ${} 기호를 기준으로 나뉜 문자 덩어리들을 말한다.)
• 두번째 파라미터인 "변수들"은 backtick 기호로 감싼 문자열에서 ${ } 변수를 담아준다.
  (변수가 여러 개라면 뒤에 계속 파라미터를 추가해주면 된다.)
• 이제 이 파라미터들로 위와 같이 backtick 기호로 감싼 문자열을 재조합하거나 분석이 가능하다. 

---

🤍 사용예시

var 변수 = '박서윤';
var 변수2 = '프론트엔드 개발자'

function 해체분석기2(문자들, 변수들, 변수들2){
	console.log(변수들 + 문자들[1] + 변수들2 + 문자들[2] + " "+ 문자들[0]);
};

해체분석기2`안녕하세요! ${ 변수2 }를 꿈꾸는 ${ 변수 }입니다.`;  

// 프론트엔드 개발자를 꿈꾸는 박서윤입니다. 안녕하세요!

• 위와 같이 원래 '안녕하세요! 프론트엔드 개발자를 꿈꾸는 박서윤입니다.' 였던 문구를 재조합하여 '프론트엔드 개발자를 꿈꾸는 박서윤입니다. 안녕하세요!' 와 같이 순서를 변경할 수 있다.

 

var items1 = 20;
var items2 = 100;

function 해체분석기3(문자들, ...변수들){
	console.log(문자들[0] + 변수들[1] + 문자들[1] + 변수들[0] + 문자들[2]);
};

해체분석기3`바지는 ${ items1 } 개 있어요. 양말은 ${ items2 } 개 있어요.`;  
// 바지는 100 개 있어요. 양말은 20 개 있어요.

• 원래는 '바지는 20 개 있어요. 양말은 100 개 있어요.' 라는 문구인데 바지와 양말의 순서를 바꾸고 싶다면 위와 같이 코드를 작성해서 문자의 위치를 변경해주면 된다.

 

var items3 = 100;
var items4 = 0;

function 해체분석기4(문자들, ...변수들){
    if (items4 === 0){
    	console.log(`양말 다 팔렸어요! ${문자들[0]}${변수들[0]}${문자들[2]}`)
    }
};

해체분석기4`바지는 ${ items3 } 양말은 ${ items4 } 개 있어요.`;  
// 양말 다 팔렸어요! 바지는 100 개 있어요.

• 원래 '바지는 100 개 있어요. 양말은 0 개 있어요.' 라는 문구였다면, 양말이 0 개일 때 "양말이 다 팔렸어요!" 라는 문구로 바꾸고 싶다면 위와 같이 if 문을 작성해서 문자를 수정해줄 수도 있다.