[코딩애플] js part 1-6. 자바스크립트가 문자 다루는 신기한 방법 - Template literals (strings)

Template Literals

문자를 다르게 제작할 수 있는 방법이다.

backtick / backquote (백틱)

var 문자 = `손흥민`;

1. 엔터키 가능

var 문자 = `손
흥민`;

1. 중간중간 변수 넣기 쉬움

var 변수 = '손흥민';
var 문자 = `안녕하세요 저는 ${변수}`; // (예전방식) '문자' + 변수

• 특히 HTML 작성시 유용함

var 템플릿 = `<div>${변수}</div>`;

⭐tagged literal (backquote 문자열 + 함수)

함수 뒤에 (소괄호) 대신 ``을 붙여도 함수가 실행된다.

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

function 함수(){
    return 10;
}
console.log(함수`안녕하세요 ${변수}입니다`); // 10

되는 이유는 장점이 있어서다!

문자를 해체분석할 수 있다.

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

function 해체분석기(문자들, 변수들, 변수들2){ // 그냥 첫째 파라미터, 둘째 파라미터를 출력해주는 함수
	console.log(문자들);
    console.log(변수들);
    console.log(변수들2);
}
해체분석기`안녕하세요 ${변수}입니다 ${손흥민}`;
// ["안녕하세요", 입니다", ""]
// 손흥민
// 손흥민

• 단어 순서를 변경하거나,
• 단어를 제거하거나,
• ${변수} 위치를 옮기거나

문자를 해체해서 뒤섞는 작업을 쉽게 할 수 있다.

사용 방법

해체분석용 함수를 만든 뒤에 파라미터 두개를 넣으면 된다.

• **파라미터1: 문자들을 Array화 해줌**(${중괄호}를 기준으로 문자를 분리함)
• **파라미터2: ${변수}를 뜻함**
• **파라미터3: 두 번째 ${변수}를 뜻함**

사용 예시 - 글자의 순서를 변경하고 싶을 때

'입니다 '<-> '안녕하세요 '글자를 서로 바꾸고 싶다면,

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

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

연습문제 - Template literals / tagged literals

문제1. **단어 순서를 바꾸는 해체분석기 제작하기**

이런 문자가 있습니다. 그냥 쇼핑몰 재고 안내 문구라고 생각하시면 되겠습니다.

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

이렇게 백틱기호를 이용하면 **`바지20 양말100`**이라는 멋진 문자가 완성됩니다.

하지만 쓰고보니 단어 순서가 약간 잘못된걸 발견합니다.

**양말**이라는 단어가 왼쪽, **바지**라는 단어가 오른쪽에 와야합니다.

그래서 문자가 **`양말20 바지100`**으로 바뀌게 만들고 싶습니다.

**Q. tagged literal 해체분석기를 이용해서 단어순서를 바꾸려면 어떻게해야할까요?**

(해체분석기`바지${pants} 양말${socks}`; 이렇게 코드를 실행하면 콘솔창에 **`양말20 바지100`**이라는 문장이 떠야합니다.)

풀이

var pants = 20;
var socks = 100;

function 해체분석기(문자열, 바지, 양말) {
  console.log(문자열[1] + 바지 + " " + 문자열[0] + 양말);
}
해체분석기`바지${pants} 양말${socks}`;

**문제 2. 바지가 0개면 '바지다팔렸어요'라는 문자를 대신 표시해주고 싶습니다.**

이번에도 역시 이런 문자가 있습니다. 그냥 쇼핑몰 재고 안내 문구라고 생각하시면 되겠습니다.

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

이렇게 백틱기호를 이용하면 **`바지20 양말100`**이라는 멋진 문자가 완성됩니다.

하지만 pants라는 변수가 0인 경우 바지0 이렇게 출력되는게 싫어서

**`바지다팔렸어요 양말100`**이라고 문자를 아예 바꿔버리고 싶습니다.

**Q. tagged literal 해체분석기를 이용해서 위 기능을 만들어보십시오.**

(해체분석기`바지${pants} 양말${socks}`; 이렇게 코드를 실행하면 pants가 0인 경우 콘솔창에 **`바지다팔렸어요 양말100`**이라는 문장이 떠야합니다.)

풀이

var pants = 0;
var socks = 100;

function 해체분석기(문자열, 바지, 양말) {
  console.log(
    (바지 === 0 ? "바지다팔렸어요" : 문자열[0] + 바지) + 문자열[1] + 양말
  );
}

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

애플코딩 풀이

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

function 해체분석기(글자들, 변수들1, 변수들2){
    if(변수들1 == 0){
      console.log(`바지다팔렸어요 양말` + 변수들2);
    }
}
  
해체분석기`바지${pants} 양말${socks}`;