템플릿 리터널

템플릿 리터널

ES6 이전에는 템플릿 문자열이라고 불렸지만 ES6부터는 템플릿 리터럴이라고 불리게 되었다.

1. 문자열 삽입

ES5 에서 문자열 삽입 방법

//문자열 삽입
//ES5
var name = "YJ";
var greeting = 'Hello my name is'+ name;

ES6 문자열 삽입 방법
ES6 에서 문자열 삽입은 백틱(₩)을 사용해서 할 수 있다.

//ES6
const greet = `Hello my name is ${name}`;

2. 표현식 삽입

ES5에서 표현식 삽입 방법

//표현식 삽입
//ES5
var a = 1;
var b = 15;
console.log('1 * 10 is '+(a*b));

ES6 표현식 삽입 방법
ES6에서는 백틱을 사용하여 삽입 할 수 있다.

//ES6
console.log(`1 * 10 is ${a * b}`);

3. 여러 줄 문자열 생성

ES5에서 여러 줄 문자열 생성

//여러 줄 문자열 생성
//ES5
const content = 'hello, \
my name is YJ \
what is your name?\ ';

ES6 여러 줄 문자열 생성 방법
ES6에서는 전체를 백틱으로 감싸면 된다.

const contentES6 = `hello,
my name is YJ
what is your name`;

4. 중첩 템플릿

템플릿 안에 템플릿을 중첩하는 것이 쉬워진다.

//중첩 템플릿
const person = [{
    name : 'ALL',
    age:27,
},{
    name : 'YJ',
    age : 25,
},{
    name : "LE",
    age : 39,
    likeColor : "red",
    others : ['mushrooms','instant soup'],
}];
const markup = `<ul> ${person.map(people => `<li> ${person.name} </li>`)} </ul>`;
console.log(markup);

5. 삼항 연산자 추가

템플릿 문자열 내에 로직을 쉽게 추가 가능하다.
? 앞의 조건이 true이면 첫번째 값이 반환되고, false면 : 뒤에 값이 반환된다.

//삼항연산자 (로직 쉽게 추가 가능)
const text = `<div> <p> ${person.name} is 
${person.age} years old ${person.likeColor ? `,
like color is ${person.likeColor}`: ''}</p></div>`;

6. 템플릿 리터럴에 함수 전달

템플릿 리터널에 함수를 전달할 수 있다.
p 태그에서 함수 groceryList를 호출 해 다른 모든 others를 인수로 전달했다.

function groceryList(others){
    return `<p>
        ${others.map
        ( other => ` <span>${other}</span>`).join('\n')} </p>`;}
<p>${groceryList(person.others)}</p>

7. 태그된 템플릿 리터럴

함수를 태그하여 템플릿 리터널을 실행하면 템플릿 내부에 있는 모든 항목이 태그된 함수의 인수로 제공된다.
함수 이름을 가져다가 실행할 템플릿 앞에 쓰면된다.

//태그된 템플릿 리터럴
function myTag(strings,personName,personAge){
    //strings : ["That ","is a","!"]
    let str = strings[1]; //is a
    let ageStr;
    personAge > 50 ? ageStr = "grandpa" : ageStr = "youngster";
    return personName + str + ageStr;
}
let sentence = myTag`That ${person} is a ${age}`;
console.log(sentence);