[JavaScript] Template Literals 정리!!

Template literals(템플릿 리터럴)은 ES6(ECMA Script 6)에서 새로 도입된 문자열 표기법입니다. 기존에 사용하는 ' 혹은 " 같은 따옴표 대신에 백틱(backtick, `) 기호를 사용하는 특징을 갖고 있습니다.

 

템플릿 리터럴은 여러 줄 문자열, 표현식 삽입법, 중첩 템플릿, 문자열 태깅 등 다양한 기능을 제공합니다.

 

이러한 템플릿 리터럴은 run time 시점에 일반 자바스크립트 문자열로 처리 및 변환된다고 합니다! 😁

---

Syntax

'string 원래는', "string 이렇게"

`string 바꿔서 표현`

`문자열 안에 ${place_holder} 삽입 또한 가능하다!`

위와 같이 template literals를 사용합니다.

 

그냥 기호만 바꿔서 쓰는게 아니라 백틱 기호로 감싸진 template literals는 그 안의 문자열을 그대로 

 

place holder

또한 템플릿 리터럴 내부에 $와 중괄호를 이용해 표현식을 삽입할 수 있고, 이를 placeholder라고 부릅니다!

---

Expression Interploation (표현식 삽입법)

표현식 (expression)을 일반 문자열에 삽입하고 싶은 경우 기존에는 아래와 같이 코딩을 했습니다.

let a = 5;
let b = 10;
let name = "Kang";

console.log("안녕하세요! 저는 " + name + "이라고 합니다!\n" + (a + b) + "원만 주세요!!");

이랬던 것을 template literals를 이용하는 경우 place holder를 사용해 다음과 같이 간소화할 수 있습니다. 

let a = 5;
let b = 10;
let name = "Kang";

console.log(`안녕하세요! 저는 ${name}이라고 합니다!\n${a + b}원만 주세요!!`);

---

Nesting Templates (중첩 템플릿)

특정 케이스마다 다른 문자열을 변수에 담고 싶을 때, 템플릿을 중첩해서 사용하는 경우 더 가독성이 좋은 코드를 작성할 수 있습니다.

let name1 = 'kang'
let name2 = 'kim'

let string = "name" + isTall() ? name1 : isHeavy() ? name2 : 'Park';

let name1 = 'kang'
let name2 = 'kim'

let string = `name ${isTall() ? name1 : isHeavy() ? name2 : 'Park'`;

예시가 조금 별로이긴 하지만, 더 복잡한 문자열을 만드는 경우일수록 템플릿 리터럴을 활용해 더 가독성이 좋은 코드를 만들어낼 수 있습니다!

---

Tagged Templates

다음으로 태그드 템플릿은 템플릿 리터럴의 발전된 형태의 하나로 태그를 사용해 템플릿 리터럴을 함수로 파싱할 수 있는 기능입니다.

위와 같이 함수로 template literals를 파싱해서 인자로 넘겨지는 코드를 작성할 수 있습니다.

node를 이용한 코드 실행 결과

위와 같이 template literals를 이용해 전달된 인자를 원하는 대로 조작할 수 있으며, 위와 같이 전혀 다른 문자열을 반환하는 함수를 만들 수 있습니다!!

 

당연하게도 함수 이름과 인자 이름에는 제약 사항이 없습니다!

---

Multi-line Strings (여러 줄 문자열)

템플릿 리터럴을 사용하 여러 줄의 문자열을 개행 문자(newline characters, \n) 없이도 작성할 수 있습니다.

console.log("개행하려면?\n 개행 문자를 삽입해야 합니다!!\n");
// 기존의 방식을 아래와 같이 간편하게 작성 가능!

console.log(`개행에 개행 문자가 필요 없다!!
그냥 이렇게 작성하면 된다.`);

---

Raw Strings (원시 문자열)

raw string은 이스케이프 문자를 해석하지 않은 일반 문자열로, 태그드 템플릿에서 함수의 첫 번째 인수에서 사용 가능한 raw property를 사용하면 다음과 같이 원시 문자열(raw string)에 엑세스 할 수 있습니다!

function tag(strings){
	console.log(strings.raw[0]);
}

tag`string text line 1 \n string text line 2!!`;
// "string text line 1 \n string text line 2!!",
// 위와 같이 원시 문자열이 처리되지 않은 상태로 출력됩니다!

또한 String.raw method를 이용해 teplate literals의 원시 문자열(처리 전)을 생성할 수도 있습니다.

let str = String.raw`ab\n${1+1}!!`;
console.log(str);
// "ab\n2!!" 출력

str.length;
// 7

str.split('').join(' ');
// "a b \ n 2 ! !"

 

---

References

▶ MDN web docs

▶ template literals 개념 정리 참고