7. 문자열안에서 변수의 사용을 더 간단히, Template literals

안녕하세요, 프로독학러 입니다.

오늘은 문자열 안에서 변수를 사용할 때 좀 더 직관적이고 편리한 방법인 Template literals에 대해서 알아보도록 하겠습니다.

알아보기 이전에, 기존 자바스크립트에서 문자열과 변수를 함께 사용하려면 어떤 방법을 사용했는지 살펴보도록 하겠습니다.

var obj = {a:1, b:2};
console.log('In the obj object, there are properties. a is '+obj.a+' and b is '+obj.b+'.');
// In the obj object, there are properties. a is 1 and b is 2.

위의 예제에서 변수 obj 안에는 객체를 담았습니다.

그리고 콘솔창에 obj객체를 설명한 글을 담았습니다.

console.log 메서드를 호출할 때 문자열은 '' 안에 표현하고, 문자열과 변수를 합칠 때는 + 를 사용했습니다.

이 방식은 문자열에 들어와야하는 변수가 많아지면 복잡해지고 띄어쓰기 등에 혼란을 줄 수 있습니다.

따라서 등장한 것이 ES6의 Template literals 입니다.

Template literals를 사용하는 방법은 ``(grave accent - 키보드에서 숫자 1 왼쪽에 있는 키)안에 문자열을 그대로 쓰고, 변수(혹은 함수)를 사용할 때는 ${변수명/함수}으로 사용하면 됩니다.

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

위의 기존 자바스크립트의 예제를 Template literals를 사용하면 다음과 같이 표현됩니다.

var obj = {a:1, b:2};
console.log(`In the obj object, there are properties. a is ${obj.a} and b is ${obj.b}.`);
// In the obj object, there are properties. a is 1 and b is 2.

''와 +가 섞여 있던 것 보다 훨씬 보기 편해진 것을 알 수 있습니다.

또한, Template literals는 줄바꿈도 가능합니다. 기존 자바스크립트에서는 줄바꿈을 위해서 \n 을 사용했습니다.

console.log("string text line 1\n"+
"string text line 2");
// "string text line 1
// string text line 2"

그러나 Template literals를 이용하면 다음과 같이 사용하면 됩니다.

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

여기까지 Template literals에 대해서 알아보았습니다.

다음 포스팅에서는 객체의 key값을 표현식을 이용해 지정하는 computed property key 에 대해서 알아보도록 하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)