[자바스크립트] 템플릿 리터럴

Template Literal

템플릿 리터럴은 표현식과 문자열의 조합을 편리하게 할 수 있게 하기 위해, 내장된 표현식을 허용하는 문자열 리터럴이다. ES6부터 추가된 기능으로 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다.

 

프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어, 이러한 기능이 추가되었다.

 

템플릿 리터럴은 다음과 같이 불리기도 한다.

• Template literal
• Template Strings
• String Templates
• Back-Tics Syntax

 

 

Template literal Syntax(Back-Tics)

템플릿 리터럴은 일반 문자열을 나타내는 작은 따옴표('), 큰 따옴표(")와 달리 백틱(`)을 사용하여 감싸준다.

//백틱(back-tics)을 사용
//키보드 1번 왼쪽 키...
const str = `hello World`;

 

 

표현식 삽입법

템플릿 리터럴은 표현식과 문자열의 결합을 편리하게 할 수 있다. 왜냐하면, 템플릿 리터럴로 지정한 백틱안에 표현식을 삽입할 수 있기 때문이다. ES6 이전에는 표현식을 문자열에 넣기 위해서는 다음과 같은 코드를 짜야만 했다.

// ES6 이전 template literal X
// 표현식 문자열 삽입
const num1 = 10;
const num2 = 30;
const str = num1 + " + " num2 + " = " + (num1 + num2);

표현식이 들어갈 때마다 + 연산자를 통해 문자열과 표현식을 분리해서 써주어야 하기 때문에 번거롭다. 이때에, 템플릿 리터럴은 사용한다면, 문자열안에 표현식을 삽입함으로써 + 연산자를 써주지 않아도 된다.

 

문자열안에 표현식을 집어넣기 위해서는 $ 기호와 중괄호({})를 사용하여 표기하면 된다.

// template literal O
// 표현식 문자열 삽입 : ${expression}
const num1 = 10;
const num2 = 30;
const str = `${num1} + ${num2} = ${num1 + num2}`;

간편하면서도 가독성 또한 좋아진 것을 확인할 수 있다.

 

 

Tagged Templates

태그를 사용하여 템플릿 리터럴을 파싱할 수 있는 기능이다. 먼저 아래의 코드를 살펴보겠다.

//tag 함수 선언
//이름 <- 원하는 대로 선언!
//parameter : 문자열 배열, 표현식1, 표현식2, ...

let fruit = 'apple';
let taste = false;

//넘겨받은 과일의 tase가 false면 disgusting 출력
//넘겨받은 과일의 tase가 false면 delicious 출력
const tag = function(strings, fruit, taste) {
    if(taste) 
        return strings[0] + fruit + strings[1] + 'disgusting.';
    return strings[0] + fruit + strings[1] + 'delicious.';
}

//태그함수의 첫번째 매개변수인 문자열은
//템플릿 리터럴을 표현식으로 split
//밑의 예시에서의 stirngs 배열은 다음과 같음
//strings = ['That ', ' is ', ''];
console.log(tag`That ${fruit} is ${taste}`); //=> That apple is disgusting.

태그 함수는 첫번째 인자로 템플릿 리터럴을 표현식으로 split한 문자열 배열을 받고, 그 외 인자로 표현식을 넘겨 받는다. 이 때에 문자열 배열 마지막에는 빈문자열('')이 들어가기 때문에 length를 이용하여 길이를 사용할 때 이 점 주의하여야 한다.

 

태그 함수는 위의 예시처럼 표현식을 파싱해서 그에 따른 동작을 수행할 수 있기 때문에 데이터 별로 상황이 다른 경우 유용하게 사용할 수 있다. 예를 들어 아래와 같은 데이터가 있다고 하자.

const todoList = [
    {
        day : '월요일',
        todo : ['공부', '롤']
    },
    {
        day : 'Tuesday',
        todo : []
    }.
    {
        day : '목요일',
        todo : ['영화보기']
    }
]

해당 데이터를 "월요일의 할일은 study, lol이다." 와 같이 출력하고 싶어 아래와 같이 코드를 작성하면, 원치 않는 출력을 얻기도 한다.

console.log(`${todoList[0].day}의 할일은 ${todoList[0].todo}이다.`);
//월요일의 할일은 공부,롤이다

console.log(`${todoList[0].day}의 할일은 ${todoList[0].todo}이다.`);
//화요일의 할일은 undefined이다. => 맘에 들지 않음...

console.log(`${todoList[0].day}의 할일은 ${todoList[0].todo}이다.`);
//목요일의 할일은 영화보기이다.

이 때, 태그 함수를 이용하여 할일이 없을 때는 할일이 없습니다를 출력해보도록 하겠다.

const tag = function(strings, day, todo) {
    let str;
    if(!todo.length) {
        str = day + '는(은) 할일이 없습니다.';
    } else {
        str = day + strings[0] + todo + strings[1];
    }
    return str;
}

console.log(tag`${todoList[0].day}의 할일은 ${todoList[0].todo}이다.`);
//월요일의 할일은 공부,롤이다.

console.log(tag`${todoList[0].day}의 할일은 ${todoList[0].todo}이다.`);
//화요일는(은) 할일이 없습니다.

console.log(tag`${todoList[0].day}의 할일은 ${todoList[0].todo}이다.`);
//목요일의 할일은 영화보기이다.

 

 

줄바꿈

템플릿 리터럴을 사용하면, 여러 줄의 문자열도 나눠서 작성할 필요가 없다. 템플릿 리터럴에서 줄바꿈을 하기 위해서는 문자열 안에서 개행을 해주기만 하면 된다.

//일반 문자열 줄바꿈
//개행 문자 사용 : \n
console.log("자바스크립트\n템플릿 리터럴");

//템플릿 리터럴
//문자열 내에서 개행
console.log(`자바스크립트
템플릿 리터럴`);

 

 

중첩 템플릿 (Nesting templates)

리터럴 템플릿은 중첩 템플릿도 가능하다. 

// 숫자 2개 비교하기
// 큰지, 작은지, 같은지를 출력
const arr = [1, 2, 3, 4, 5, 6]

const str = `arr 배열은 ${!arr.length ? '빈' 
                                    : ${arr.length < 5 ? '작은' : '큰'}} 배열이다.`;
                                    
console.log(str); //arr 배열은 큰 배열이다.

 

 

Raw strings(원래 문자열)

Raw strings는 이스케이프 문자를 해석하지 않는 일반 문자열을 반환해준다. 그렇기 때문에 이스케이프 문자 그대로를 출력하고 싶을 때(이스케이프 문자를 처리하고 싶지 않을 때), 유용하게 사용할 수 있는 기능이다.

const s = String.raw`xy\n${1+1}z`;
console.log(s); //xy\n2z;

//String.raw가 타이핑하기 길다면
//tag 함수를 이용하여 처리
//문자열 배열의 raw 프러퍼티의 첫번째 인자를 사용
const tag = function(strings) {
    return strings.raw[0];
}
const str = tag`xy\n${1+1}z`;
console.log(str); //xy\n2z;