Template Literals

beenvyn·2024년 7월 11일
0

Javascript 심화

목록 보기
4/18
post-thumbnail

🔠 backquote 문자열의 특징

1. 엔터키 사용 가능

var 이름 = `홍길
동`

2. 중간중간 변수 넣기 유용

var 이름 = '홍길동'

// before
var 문장 = '안녕하세요' + 이름 + '입니다.';

// after
var 문장 = `안녕하세요 ${ 이름 }입니다.`;

3. tagged literal을 사용 가능

사용 예시1) 문자를 해체분석하고 싶을 때

var 변수 = '홍길동';
var 문자 = `안녕하세요 ${ 변수 }입니다.`;

function 해체분석기(문자들, 변수들){
  console.log(문자들); // 문자들을 Array화 해줌
  console.log(변수들); // 변수들을 모아줌
}

해체분석기`안녕하세요 ${ 변수 }입니다`
// 출력: ['안녕하세요 ', '입니다', raw: Array(2)]
//        홍길동

➡️ 중괄호 ${}를 기준으로 문자들을 분리해줌

⚠️ 근데 여기서 문자들은 문자들을 모아서 배열로 저장하지만변수들은 하나의 변수만 차례대로 저장한다.
따라서 2개 이상의 변수를 사용하는 경우 (문자들, 변수1, 변수2 ...) 이런식으로 변수를 입력받는 파라미터를 2개 이상 써줘야 한다.

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

var pants = 20;
var socks = 100;

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

해체분석기`바지${pants} 양말${socks}`; 
// 출력: 양말20 바지100
profile
୧ʕ•̀ᴥ•́ʔ୨

0개의 댓글