[ES6] Template literals

옛날 문자열

const 변수 = '손흥민';
const 문자 = '안녕하세요 저는 ' + 변수;

console.log(문자)// "안녕하세요 저는 손흥민"

const 변수 = '손흥민';
const 문자 = '안녕하세요 ' + 변수 + ' 저는'

console.log(문자)//"안녕하세요 손흥민 저는"

backtick

const 변수 = '손흥민';
const 문자 = `안녕하세요 저는 ${변수}입니다.`

console.log(문자) //"안녕하세요 저는 손흥민입니다."

//문자로 HTML 작성도 가능
const 변수 = '손흥민';

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

"
<div>
  <div>
    손흥민
  </div>
</div>"

tagged literal

const 변수 = '손흥민';
const 문자 = `안녕하세요 저는 ${변수}입니다.`

function 함수(){
  return 10
}

console.log(함수`안녕 ${변수}입니다.`) //10

함수 뒤에 백틱 붙여줘도 함수가 실행 됨.

근데 어따 씀?

const 변수 = '손흥민';

var 문자 = `안녕하세요 저는 ${변수}입니다.`;

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

해체분석기`안녕하세요 ${변수}입니다.`
/*
["안녕하세요 ", "입니다."]
"손흥민"
*/

1. 단어 순서를 변경
2. 단어 제거
3. ${변수}위치 변경

• 파라미터1 : 문자들을 Arr화
• 파라미터2 : ${} 변수들 문자화 (변수 개수에 따라 추가하면 됨)

function 해체분석기(문자들, 변수들, 변수들2){
  console.log(문자들);
  console.log(변수들);
  console.log(변수들2);
};
--응용
return 문자들[1] + 변수들 + 문자들[0];
//"입니다.손흥민안녕하세요 "

tagged literal 사용해보기

//바지와 양말 순서 바꾸기.
var pants = 20;
var socks = 100;


function 해체분석기(스트링, ...변수){
    console.log(스트링);
  console.log(변수[0], 변수[1])
  console.log(스트링[1]+ 변수[0] +" "+ 스트링[0] + 변수[1])
  // console.log(`${스트링[1]}${변수[0]} ${스트링[0]}${변수[1]}`)  
  // 이것도 됨.
}
해체분석기`바지${pants} 양말${socks}`

Q) 바지 개수 0이면 바지 안 팔아요로 바꿔 출력하기

var pants = 0;
var socks = 100;
`바지${pants} 양말${socks}`

function 해체분석기(스트링, ...변수){
  if(변수[0]===0){
    return console.log("바지 안 팔아요" + 스트링[1]+변수[1])
  }
}
//"바지 안 팔아요 양말100"

해체분석기`바지${pants} 양말${socks}`