[JS] template literals

오늘의 좌충우돌 이야기 ^_^

요약하면 template literals는 '이 아니라 `을 사용해야 한다라는 이야기이다.

아래 코드를 javascript로 썼다.

const greeting='hello sunny';
console.log('value: ${greeting}, type: ${typeof greeting}');

결과가

value: hello sunny, type: string

위와 같이 나올 줄 알았는데, 아래와 같이 나왔다.

value: ${greeting}, type: ${typeof greeting}

왜 그런건지 20분 넘게 찾아보다가 그 이유를 알았다..

작은 따옴표나 큰 따옴표를 쓰는 게 아니라 백틱(`) 문자를 사용해야 했던 것이다...ㅎㅎㅎ

const greeting='hello sunny';
console.log(`value: ${greeting}, type: ${typeof greeting}`);

그랬더니 원하는 결과가 잘 출력되었다 ! ^0^

value: hello sunny, type: string

template literals

모질라에서는 template literals란 '템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴'이라고 한다.

사용 방법은 `과 ` 안에 원하는 문자열을 넣으면 된다. 이때 변수, 상수를 넣고 싶으면 ${} 안에 넣으면 된다.

예시를 보면 잘 이해할 수 있을 것 같다.

const name="앤";
const hairColor='빨강';
let year=11;

이런 상수, 변수를 만들었다.
그리고 나서 책 제목으로 '빨간 머리 앤'이라는 상수를 만들고 싶다면 어떻게 하면 좋을까?

const bookName='빨간 머리 앤';

으로 해도 되긴 하지만, 아래처럼 할 수도 있다!

const bookName=`빨간 머리 ${name}`;

그리고 이 내용을 console창에 출력해서 아래와 같이 보여주고 싶을 때!

책 제목: 빨간 머리 앤
주인공 이름: 앤
앤의 머리카락 색깔: 빨강
앤의 나이: 11

1번

console.log('책 제목: '+bookName+'\n주인공 이름: '+name+'\n'+name+ '의 머리카락 색깔: '+hairColor+'\n'+name+'의 나이: '+year);

2번

console.log(`책 제목: ${bookName}
주인공 이름: ${name}
${name}의 머리카락 색깔: ${hairColor}
${name}의 나이: ${year}`);

2번의 경우에 띄어쓰기, 엔터를 표현하기도 쉽고, '나 +를 많이 쓰지 않아도 된다.
1, 2번 결과는 같지만, 2번이 더 편한 것 같다.

모질라 공식 웹사이트의 template literals 설명!