ECMAScript (ES6) 템플릿 문자열

이번 포스트는 템플릿 문자열에 대해서 가져왔습니다!

템플릿 문자열??

템플릿 문자열이란 미리 준비되어 있는 틀 안에 문자열을 넣는 것입니다.

 

이렇게 이야기하면 이해가 안되시죠?

바로 코드를 보여드리겠습니다. 

 

 

기존문자열

var a = 3;
var b = 'hi';
var object = {
  c: 'friends'
};
var string = b + ', my ' + a + ' ' + object.c; // 'hi, my 3 friends'

기존에 문자열을 만들 때에는 +와 따옴표를 사용하고~ 띄어쓰기도 고려해야하고~ 복잡한 방식으로 문자열을 만들었습니다. 

 

템플릿문자열

const string2 = `${b}, my ${a} ${object.c}`;

되게 간단해졌습니다!

따옴표 대신 ` 백틱을 사용하였고 문자열을 가져올 변수들은 다 ${}로 감싸주면 됩니다.