[JS 핵심 가이드] 04. 템플릿 리터럴( 부제: 백틱(`)을 사용하여 문자열을 삽입하는 여러가지 방법 )

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

 

이전 글: [JS 핵심 가이드] 03. 함수 기본값 인수

---

 

 

04. 템플릿 리터럴 

: ES6이전에 템플릿 문자열(template string)이라고 부르던 것을  ES6에서는 템플릿 리터럴(template literal) 이라고 부릅니다.

 

4.1 문자열 삽입, 4.2 표현식 삽입

: 문자열이나 표현식을 삽입하기위해 백틱(`)을 사용할 수 있게 되었다.

- 백틱을 사용하면, 여러 줄로 이루어진 문장을 표현할 때, 백슬래시 삽입없이 손쉽게 해결할 수 있다.

- 템플릿 중첩(html 태그를 백틱 안에 담을 수 있음)

 

4.5 삼항 연산자

: ? 앞의 조건이 true이면, 첫 번째  값이  반환되고, 그렇지 않으면 : 뒤에 있는 값이 반환된다.

 

4.7 태그된 템플릿 리터럴

: 함수를 태그하여 템플릿 리터럴을 실행하면 템플릿 내부에 있는 모든 항목이 태그된 함수의 인수로 제공된다.

 

사용 방식

: 함수이름을 가져다 실행할 템플릿 앞에 쓰기만 하면 된다 ( 아래에서는 myTag`That ${person} is a ${age}!`; 부분에 해당)

let person = "Alberto"
let age = 25;

function myTag(strings, personName, personAge) {
	//strings: ["That ", " is a ", "!"]
    let str = strings[1];
    let ageStr;
    
    personAge > 50 ? ageStr = "grandpa" : ageStr = "youngster";
    
    return personName + str + ageStr;
}

let sentence = myTag`That ${person} is a ${age}!`;
console.log(sentence) // Alberto is a youngster

 

 

템플릿 리터럴 사용 사례 참고: https://codeburst.io/javascript-es6-tagged-template-literals-a45c26e54761 

Tagged Template literals — Its more than you think