[JavaScript] Template literals 사용법

react를 사용하면서 axios로 서버에 request를 보낼 때, url에 user id 등을 담아야 하는 경우가 있었다. 처음에 문자열을 불러와 더하는 식으로 붙여 보냈는데, 상당히 번거로웠다. 이때 template literal를 쓰면 된다!

문법

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

템플릿 리터럴은 작은따옴표(’’)나 큰따옴표(””) 대신 백틱(``)을 써서 표현한다. 런타임에 템플릿 리터럴은 일반 문자열로 변환되어 처리된다.

Multi-line strings

일반적으로 문자열 안에서 줄바꿈 등은 허용되지 않는다. 따라서 잘 알려진 이스케이프 문자를 사용해야 한다.

console.log("첫째줄
둘째줄"); //Error!

console.log("첫째줄" + "/n둘째줄"); 
//첫째줄
//둘째줄
//정상 실행된다.

그러나 템플릿 리터럴을 사용하면 이에 구애받지 않는다.

console.log(`첫째줄
둘째줄`); //가능하다!

Expression interpolation

만약 “나는 두부를 먹었습니다”, 라는 문장을 출력하고 싶다. 그러나 무얼 먹었는지는 매일 바뀔 수 있으므로, 두부는 변수에 넣어서 출력하고 싶다.

let food = "두부";

console.log("나는"+ food + "를 먹었습니다"); //나는 두부를 먹었습니다

그러나 템플릿 리터럴을 사용하면 더 직관적으로 할 수 있다.

let food = "두부";

console.log(`나는 ${food}를 먹었습니다`); //나는 두부를 먹었습니다

Tagged Tamplates

직접 쓰는 일은 드물겠지만, 알아두면 이해하기 좋을 것이므로 가져왔다. 함수에 값을 넣을 때 () 괄호를 쓰는 게 아니라, 템플릿 리터럴을 사용할 수 있다!

//MDN 예제
var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {
//꼭 이름 뒤에 Exp를 붙일 필요는 없다. 템플릿 리터럴에 들어간 변수 순서대로 함수에서 받아온다!
//strings를 함수에 찍어보면 변수가 아닌 부분들이 배열로 저장되어있음을 확인할 수 있다.
// ['that ', ' is a ', '', raw: Array(3)]로 나옴

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

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

var output = myTag`that ${ person } is a ${ age }`;

console.log(output);
// that Mike is a youngster

한 가지 더, 만약 위 코드에서 three dots를 활용한다면

var person = 'Mike';
var age = 28;

function myTag(strings, ...Datas) {

    console.log(Datas); //['Mike', 28]
    console.log("Strings : ", strings); //['that ', ' is a ', '', raw: Array(3)]
}

var output = myTag`that ${ person } is a ${ age }`;

console.log(output);

age가 string이 아니라 number로 처리됐음을 알 수 있다! 따라서 함수 안에 타입에 상관없이 값을 그대로 전달할 수 있게 된다.

---

reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template\_literals