4. template strings

이번에 소개할 부분은 template strings 입니다. 일명 "백틱" 이라고하는 ` (느낌표 왼쪽에 있는 문자) 를 사용합니다. 제가 가장 먼저 접했던 백틱의 기능은 여러 줄에 걸친 문자열을 표현하는 것이었습니다.

Multi-line strings

1 2 3 4 5 6 7

var str = ` 동해물과 백두산이 마르고닳도록 하느님이 보우하사 우리 나라만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세 ` console.log(str)

cs

이런식으로 하나의 문자열을 여러줄에 걸쳐서 표현이 가능합니다. 편리하긴 하겠지만 저렇게 긴 문자열변수를 쓸 일이 얼마나 있을까요? 다른 유용한 기능들을 살펴보겠습니다.

Expression interpolation(표현식 삽입법)

var month = 12
var season = "겨울"
 
console.log(`${month}월은 ${season} 입니다.`);
//console.log(month+"월은 "+season+"입니다.");

=> 백틱 안에 ${변수명} 을 써서 문자열과 변수를 동시에 사용 가능합니다. 물론 아래 주석과 같이 '+' 기호를 통해 표현이 가능하긴하죠. 굳이 따지자면 첫 번째 방법이 조금 더 깔끔해보이죠?

그리고 마지막으로 태그된 템플릿 이라는 문법이 나옵니다. 태그된 템플릿은 백틱 앞에 태그(tag)를 하나 더 붙인 템플릿 문자열로, 템플릿 리터럴의 더욱 발전된 형태입니다.

Tagged templates

var person = 'Hyeong';
var age = 27;
 
function myTag(strings, personExp, ageExp) {
 
  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "
  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }
  return str0 + personExp + str1 + ageStr;
}
 
var tagged_literal = myTag`that ${ person } is a ${ age }`;
var nomal = myTag(["that "," is a "], person,age);
 
console.log(tagged_literal);    //that Hyeong is a youngster
console.log(nomal)              //that Hyeong is a youngster

마치 myTag 함수를 백틱으로 호출을 하는 것 처럼 보입니다. 일반적으로는 아래와 같이 괄호 안에 매개변수를 넣어서 함수를 호출하는데, 백틱 안에 문자열과 표현식을 이용하여 바로 표현이 가능합니다. 여기서 좀 특이한 점은 strings 라는 배열을 일반적은 배열 표기법인 []로 넣지 않는다는 것입니다. 여기서 strings 를 콘솔로 찍어보게 되면 

[ 'that ', ' is a ', '' ] 이와같은 결과가 나옵니다. 사실상 맨 마지막에 공백이 들어가는 인덱스가 하나 남게 되는거죠 배열의 총 길이는 표현식의 개수 + 1 이라고 보시면 됩니다. 물론 백틱 안에서요

이상 template strings 에 관한 포스팅을 마치겠습니다.