[새로운 기능] Template Literal

특히나 javascript는 웹에서 사용되기 때문에 html과 섞어서 쓸 경우가 많은데 문자열 내에서 다시 "" 나 ''를 이용하기가 상당히 번거러웠다. 이제 Template Literal을 이용해보자.

ES6에 적용된 ``(백틱 - 키보드의 ~ 와 함께 표현되는 문자)을 이용한 Template Literal은 2 가지 기능을 제공한다.

편리한 문자열 처리

기존의 javascript에서는 문자열을 표현하기 위해서 따옴표(" ", ' ')를 사용할 수 있었다. 따옴표를 이용한 문자열 표현에서는 엔터키를 이용한 개행이 적용되지 않기 때문에 개행 처리를 위해 '\n'을 명시적으로 삽입해야 하는 번거로움이 있었다. 또한 "와 '교차해서 사용할 수 없었기 때문에 사용 순서를 주의해야 했고 내부에서 따옴표를 사용하기 위해 \를 이용해야 했다.

let longString1 = "Lorem 'ipsum dolor' sit \"amet\", adipisicing elit,\n" + 
                  "sed do tempor incididunt ut et dolore magna aliqua.\n" + 
                  " Ut enim ad minim veniam, quis nostrud ullamco laboris\n" + 
                  " Duis aute irure dolor in in voluptate velit esse\n" + 
                  " Excepteur sint occaecat non proident, sunt in culpa qui .";

하지만 백틱을 사용하면 이런 문제가 전혀 없어진다.

let longString1 = `Lorem 'ipsum dolor' sit "amet", adipisicing elit, 
                  sed do tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis exercitation ullamco laboris
                  Duis aute irure dolor in in voluptate velit esse
                  Excepteur sint occaecat non proident, sunt in culpa qui .`;

 

용이해진 변수와 함수 사용

기존에는 변수를 이용해서 문장을 구성하기 위해서 '+'를 이용한 결합 연산이 필요했었다.

let oldMessage = data + "는 " + data.replace("ello", "i") + "가 될 수도 있고 " + 
                 data.substr(0, 4) + "이 될 수도 있다.";
console.log(oldMessage);

Hello는 Hi가 될 수도 있고 Hell이 될 수도 있다.

``을 이용하면 ${} 를 이용해서 변수 처리가 가능하며 내부에서 자유롭게 함수를 호출할 수도 있다.

let message = `${data}는 ${data.replace("ello", "i")}가 될 수도 있고 
               ${data.substr(0, 4)}이 될 수도 있다`;
console.log(message);