1. Template Literals이란?
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴으로, 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있다.
이전의 ES2015에서는 "template strings(템플릿 문자열)"이라 불렸다.
2. Syntax
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
tag `string text ${expression} string text`템플릿 리터럴은 작은따옴표('), 큰따옴표(") , 백틱(`)으로 감싸준다.
3. 표현식 삽입법
ES6 이전에는 표현식을 일반 문자열 안에 집어 넣었다.
var a = 20;
var b = 8;
var c = "자바스크립트";
var str = "저는 " + (a + b) + "살이고 " + c + "를 좋아합니다.";
console.log(str); //저는 28살이고 자바스크립트를 좋아합니다.템플릿 리터럴에서는 $과 중괄호{}를 사용하여 표현식을 표기할 수 있다.
let a = 20;
let b = 8;
let c = "자바스크립트";
let str = `저는 ${a+b}살이고 ${c}를 좋아합니다.`;
console.log(str); //저는 28살이고 자바스크립트를 좋아합니다.4. Tagged templates
태그드 템플릿은 템플릿 리터럴의 발전된 형태로, 태그를 사용하여 템플릿 리터럴을 함수로 파싱할 수 있다.
아래 코드는 기본 함수의 태그 함수이다.
let person = 'Lee';
let age = 28;
let tag = function(strings, personExp, ageExp) { //함수 이름은 원하는 대로 가능!
let str0 = strings[0];
let str1 = strings[1];
console.log("str0 : " + str0); //strings는
console.log("str1 : " + str1);
let ageStr;
if(ageExp > 99) ageStr = 'centenaian';
else ageStr = 'youngster';
return str0 + personExp + str1 + ageStr; //이 함수 내에서 template literal 반환 가능
};
let output = tag`that ${person} is a ${age}`;
console.log(output); //that Lee is a youngster태그 함수의 첫 번째 인수는 문자열 값의 배열을 포함한다.
나머지 인수는 표현식과 관련되고, 이 첫 번째 인수는 문자열 값의 배열으로 표현식을 기준으로 split된다.
let myTag = function(strings, a, b, c) {
console.log(`문자열 배열 길이 : ${strings.length}`); //4, 마지막 템플릿 뒤에 빈 문자열
for(let i = 0; i < strings.length; i+=1) {
console.log(`문자열 요소 [${i}]: ${strings[i]}`);
}
console.log(a);
console.log(b);
console.log(c);
}
let html = 5;
let css = 3;
let js = 'es10';
let string = myTag`HTML${html}, CSS${css}, JavaScript ${js}`;태그드 템플릿은 데이터 별로 상황 및 조건이 다른 경우 유용하게 쓰일 수 있다.
const ramenList = [
{
brand: '농심',
items: ['신라면','짜파게티','참치마요','둥지냉면']
},
{
brand: '삼양',
items: ['삼양라면', '불닭볶음면']
},
{
brand: '오뚜기',
itmes: []
}
];
console.log(`구매가능한 ${ramenList[0].brand}의 라면 : ${ramenList[0].items}`);
//구매가능한 농심의 라면 : 신라면,짜파게티,참치마요,둥지냉면
console.log(`구매가능한 ${ramenList[1].brand}의 라면 : ${ramenList[1].items}`);
//구매가능한 삼양의 라면 : 삼양라면,불닭볶음면
console.log(`구매가능한 ${ramenList[2].brand}의 라면 : ${ramenList[2].items}`);
//구매가능한 오뚜기의 라면 : undefined위와 같이 ramenList 데이터가 들어오는 경우, 오뚜기의 라면 데이터는 아직 추가가 안되었다. 따라서 그 결과로 undefined를 반환하였다.
이런 경우에 tagged templates로 해결할 수 있다.
const ramenList = [
{
brand: '농심',
items: ['신라면','짜파게티','참치마요','둥지냉면']
},
{
brand: '삼양',
items: ['삼양라면', '불닭볶음면']
},
{
brand: '오뚜기',
itmes: []
}
];
function fn(strings, brand, items) {
let str;
if(undefined === items) {
str = brand + "의 라면은 재고가 없습니다!";
} else {
str = strings[0] + brand + strings[1] + items;
}
return str;
}
console.log(fn`구매가능한 ${ramenList[0].brand}의 라면 : ${ramenList[0].items}`);
//구매가능한 농심의 라면 : 신라면,짜파게티,참치마요,둥지냉면
console.log(fn`구매가능한 ${ramenList[1].brand}의 라면 : ${ramenList[1].items}`);
//구매가능한 삼양의 라면 : 삼양라면,불닭볶음면
console.log(fn`구매가능한 ${ramenList[2].brand}의 라면 : ${ramenList[2].items}`);
//오뚜기의 라면은 재고가 없습니다!5. Multi-line strings
템플릿 리터럴을 사용하면 여러 줄의 문자열이라 한들 나눠서 작성할 필요가 없다.
먼저, 비교를 위해 일반 string 리터럴을 사용하여 작성한 문자열이다.
console.log("string text line 1\n" + "string text line 2");
//string text line 1
//string text line 2템플릿 리터럴은 리터럴 안에서 개행을 해주면 된다.
//템플릿 리터럴
console.log(`string text line 1
string text line 2`);6. Nesting templates
특정 조건을 만죽하는 경우에 따라 달리 문자열을 변수에 저장하고자 할 때, 템플릿을 중첩해서 작성하는 것이 가독성이 더 좋다.
아래 예시들로 비교.
//ES5
var classes = 'header'
classes += (isLargeScreen() ?
'' : item.isCollapsed ?
' icon-expander' : ' icon-collapser');//ES6, Not use nesting templates
const classes = `header ${ isLargeScreen() ? '' :
(item.isCollapesd ? 'icon-expander' : 'icon-collapser')}`;//ES6, Used nesting templates
const classes = `header ${ isLargeScreen() ? '' :
`icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;7. Raw strings
Raw string은 이스케이플 문자를 해석하지 않은 일반 문자열이다.
String.raw 태그함수를 사용하면 템플릿 문자열을 입력한 대로 출력할 수 있다.
let s = String.raw`xy\n${1+1}z`;
console.log(s); //xy\n2z태그 함수를 만들어 원래의 문자열을 반환하려면 첫 번째 인자의 raw 프로퍼티를 사용하면 된다.
let tag = function(strings) {
return strings.raw[0];
}
let str = tag`Hello\nWorld.`;
console.log(str); //Hello\nWorld