Template literals

프로그래밍 언어가 영어로 작성되어 있다보니 단어를 아느냐 모르느냐에 따라 이해 난이도가 달라진다. 템플릿 리터럴은 단어를 알면서도 순간 "뭔 말이야"하고 멈칫하게 한다. 영어권 사람도 아니고 영어를 잘하는 사람도 아니라서 그런 듯하다. 형판 문자열. 직역한 단어 자체로는 뭔가 싶지만, 사용법을 알면 "아하~ 그래서 템플릿이구나"한다.

 

자바스크립트를 처음부터 시작하다보면 변수와 상수가 손에 익고, 값을 할당하는 것은 익숙하다 못해 감각도 없어진다.

function yourself (name, age, school){
	console.log("너의 이름은 " + name + "이고, 나이는 " + age + "살, 학교는 " + school + "가 맞니?")
}

yourself("코난","8","테이탄초등학교"); //'너의 이름은 코난이고, 나이는 8살, 학교는 테이탄초등학교가 맞니?'

그러다보면 위와 같이 변수와 문자열을 함께 써야할 때 큰따옴표와 플러스의 향연이 펼쳐진다. 타이밍하는 것도 보는 것도 뭔가 석연치 않다. 은근히 불편하다. 아마 다른 개발자들도 동일했나보다. 템플릿 리터럴이란 것을 만들었으니. 사용해보면 아주 간편하다.

function yourself (name, age, school){
	console.log(`너의 이름은 ${name}이고, 나이는 ${age}살, 학교는 ${school}가 맞니?`)
}

yourself("코난","8","테이탄초등학교"); //'너의 이름은 코난이고, 나이는 8살, 학교는 테이탄초등학교가 맞니?'

템플릿 리터럴로 작성하니 코드를 읽는 게 매우 순탄하다. 잦은 큰따옴포와 플러스만 없어도 이렇게 가독성이 좋아진다. 템플릿 리터럴은 큰 따옴표("")나 작은 따옴표('') 대신 백틱(``)을 사용한다. 템플릿 리터럴의 특징을 하나씩 살펴보자.

템플릿 리터럴 특징

1. multi-line

템플릿 리터럴은 HTML 태그에서 textarea와 같이 줄바꿈을 할 수 있다. 기존엔 '/n'을 통해서만 가능했다면 여기서는 엔터치는대로 줄바꿈이 결과에 반영된다. 이는 prettier를 사용하더라도 자동으로 바로잡지 않는다. 정상이기 때문이다. 백틱을 사용할 때 실수로 엔터치는 경우가 없도록 해야할 듯하다.

console.log(`안녕하세요.
백틱을
사용
하고 있
답
니
다~~`)

// 안녕하세요.
// 백틱을
// 사용
// 하고 있
// 답
// 니
// 다~~

 

2. 표현식 삽입법(Expression interpolation)

처음에 언급했던 부분이다. 문자열에 표현식을 넣을 때 보통 문자열과 문자열 사이에 플러스(+)를 기입해 사용한다. 템플릿 리터럴을 사용하면 매우 편리하게 사용할 수 있다. 백틱으로 열고 원하는 문자열을 쓰고, 표현식 혹은 변수를 사용할 때 ${}를 사용한다.

let a = 5;
let b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// "Fifteen is 15 and not 20."

 

3. 중첩 사용(Nesting templates)

템플릿 리터럴은 중첩해 사용할 수 있다. 중첩해 사용해도 읽기 쉽다. 아래는 머릿말로 단순히 '[자유게시판]'을 표기할 것인지 아이콘 유무까지 표현할 것인지를 결정하는 코드다. 템플릿 리터럴 중첩을 사용한 걸 볼 수 있다.

let normal = false;
let icon = true;

const foreword = `[자유게시판${
  normal ? "]" : ` 아이콘-${icon ? "있음]" : "없음]"}`
}`;

console.log(foreword) //[자유게시판 아이콘-있음]

 

5. Tagged templates

함수를 사용할 때 매겨변수를 넘길 때 리터럴 문자열도 넘길 수 있다. 즉, "함수명()"이 아니라 "함수명``"으로 할 수 있다. 아래 코드는 영희의 이름과 나이로 Tagged templates을 사용했다. myTag`아마도... ${ person }은(는) ${ age }`를 입력하면 myTag의 첫번째 매개변수인 strings에 ['that', 'is a', '']이 담긴다. 맨 마지막 빈값이 담겨 length가 3이 된다. 두번째 매개변수 personExp에는 템플릿 리터럴 첫번째 변수인  ${person}이, 세번째 매개변수 ageExp에는 ${age}가 담긴다. 아래 코드를 보면 매개변수로 값을 전달하는데 전혀 문제가 없음을 볼 수 있다. 아래 코드에서는 string으로 반환했지만, 꼭 string을 반환할 필요없다.

    var person = '영희';
    var age = 28;

    function myTag(strings, personExp, ageExp) {
      var str0 = strings[0]; // "that "
      var str1 = strings[1]; // " is a "
 
	  console.log(strings) //[ 'that ', ' is a ', '' ]

      var ageStr;
      if (ageExp > 99){
        ageStr = '정말 건강해보여!';
      } else {
        ageStr = '어릴거야!';
      }

      // 심지어 이 함수내에서도 template literal을 반환할 수 있다.
      return str0 + personExp + str1 + ageStr;

    }

    var output = myTag`아마도... ${ person }은(는) ${ age }`;

    console.log(output);
    // 아마도... 영희은(는) 어릴거야!

결론

템플릿 리터럴을 찾아보니 '아는 만큼 보인다'는 말을 조금 더 실감하게 하는 것 중 하나가 아닐까 싶다. 사용법을 알면 다양한 경우에서 편하게 사용하기 좋고, 읽기 편한 코드를 사용할 수 있을 듯하다. 아티클 중에는 자주 사용하지만, 그보다 더 많은 기능을 숨기고 있는 코드들이 있을지 모르니 항상 공식 문서 등을 잘 살펴보는 것도 필요하다.

[MDN] Template literals

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)