템플릿 리터럴은 자바스크립트에서 ""
큰 따옴표와 ''
작은 따옴표 와 같이 문자열을 표현할 때 쓰는 문자열 리터럴이다. 템플릿 리터럴은 ``
백틱을 사용해서 문자열을 표현한다.
""
나 ''
와 똑같이 백틱을 감싸면 문자열로 정의된다.
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
는 템플릿 리터럴의 발전된 형태이다. 태그를 사용하면 템플릿 리터럴을 함수로 사용할 수 있다.
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);