Template Literal

민겸·2022년 9월 11일
0

JavaScript

목록 보기
4/20

이 글은 공식문서 MDN을 기반으로 작성되었습니다.

Template Literal

템플릿 리터럴은 자바스크립트에서 ""큰 따옴표와 ''작은 따옴표 와 같이 문자열을 표현할 때 쓰는 문자열 리터럴이다. 템플릿 리터럴은 ``백틱을 사용해서 문자열을 표현한다.

""''와 똑같이 백틱을 감싸면 문자열로 정의된다.

let str = `hi! My type is String!`;

console.log(str, typeof str);

// output : hi My type is String! String

근데 왜 사용하죠?

일단 템플릿 리터럴은 ""''와 달리 문자열을 표현할 때 백틱 안에서의 줄바꿈이 \n을 사용하지 않고도 그저 우리가 사용하는대로 줄바꿈을 하면 그대로 적용된다.

let str = `hi! I want to put line break
oh nice!`

console.log(str);

// output : hi! I want to put line break
//			oh nice!

줄바꿈을 위해 특수 문자와 n을 넣을 필요가 없다!

하지만 더욱더 매력적인 기능이 템플릿 리터럴에는 존재한다.
템플릿 리터럴은 `` 사이에 ${}를 조합해서 표현식을 넣을 수 있다.

let myName = "aggie";
let str = `hi! My name is ${myName}!`;

console.log(str);

// output : hi! my name is aggie!

Tagged templates

Tagged templates는 템플릿 리터럴의 발전된 형태이다. 태그를 사용하면 템플릿 리터럴을 함수로 사용할 수 있다.

let name = `aggie`;
let age = 26;

const myTag = (strings, userName, userAge) => {
    // tag 함수의 첫 번째 인수는 문자열 값을 담은 배열을 나타낸다.
  	// 이 예시에서는 아래의 myTag``안의 My name is 와 and I am 이 배열로 담겨 있다고 보면 된다.
  	// strings = ["My name is", "and I am an"] 라고 되어 있는 것이다.
    let [str1, str2] = strings;
    let ageStr;
    if(age >= 20) ageStr = `adult.`;
    else ageStr = `child.`;
    
    return str1 + userName + str2 + ageStr;
}

const greeting = myTag`My name is ${name} and I am an ${age}`;

console.log(greeting);
profile
기술부채상환중...

0개의 댓글