템플릿 리터럴

---

템플릿 리터럴 사용법

템플릿 리터럴은 이중 따옴표("")나 작은 따옴표('') 대신 백틱(``)을 이용한다.

`이런 식으로 사용한다.`

또한 ${}를 이용하여 표현식을 넣을수있다.

let text = "why"
`이런식으로 ${text} 사용합니다` // 이런식으로 why 사용합니다

강제개행 문법

console.log("기존에는 강제개행을 위해선\n"+"이런식으로 \n을 넣어야만했습니다.")

console.log(`하지만 템플릿 리터럴을 사용한다면
이런식으로 개행이 가능합니다.`)

표현식 삽입법

// 기존 js문법으로는 표현식을 삽입하려면 + () + 이런식으로 추가를 해야했지만.
// 템플릿 리터럴을 사용한다면
let x = 10;
let y = 30;
console.log(`40 is ${a + b} true?`)
// 40 is 40 true?
// 이런식으로 사용이 가능합니다.

태그드 템플릿

태그를 사용하여 템플릿 리터럴을 함수로 참조할 수 있다.

let BasicFor = (string, a, b) => {
	console.log(`String's length : ${string.length}`);
    for (i = 0; i < string.length; i++) {
		console.log(`문자열 요소 ${i} : ${string[i]}`);
    }
    console.log(a);
    console.log(b);
}

중첩 템플릿

특정 조건을 만족하는 경우마다 다른 문자열을 변수에 저장하고 싶을때,

//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'}` }`;

원래 문자열 (Raw Strings)

원래 문자열은 이스케이프 문자를 해석하지 않은 일반 문자열

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.

---

마무리

기존 자바스크립트 표현식으로는 사실 + () + 이런식으로 표현을 해야하다보니 여간 불편한게 아니였다. 하지만 템플릿 리터럴을 사용한다면 좀 더 가독성이 좋고, 짧은 코드를 짤수있어 적극 활용하는것이 좋을거같다
그래도 원래 문자열이나 중첩 문자열은 복잡하기도하고 잘 사용하지 않을거같다.

참고한곳
MDN Template literals 공식 문서
템플릿 리터럴이란?