개발기록장

[Javascript] template literals 사용법 본문

TIL/JavaScript

[Javascript] template literals 사용법

yangahh 2020. 12. 18. 06:59

템플릿 리터럴은 ES6에 추가된 문자열 표기법이다.

template string이라고도 하며, 이것을 통해 문자열을 좀 더 간편하게 표현할 수 있게 되었다.

 

템플릿 리터럴을 사용하려면 따옴표(' ') 대신, 백틱(` `)을 사용하면 된다.

 

 

- 줄바꿈 (Multi-line-strings) 표현하기

// 일반 문자열
console.log("text line 1\n"+
"text line 2");


// 템플릿 리터럴
console.log(`text line 1
text line 2`);

 

 

 

- 표현식 삽입법 (Expression interpolation)

   ${ } 사이에 변수나 연산 등을 삽입하여 더 간결하게 표현할 수 있다.

// 일반 문자열
const tom = 'Tom';
const helloTom = 'hi ' + tom + '!!';
console.log(`value : ` + helloTom + ', type : ' + typeof helloTom);

>> value : hi Tom!!, type : string



// 템플릿 리터럴
const bob = 'Bob';
const helloBob = `hi ${bob}!!`;
console.log(`value : ${helloBob}, type : ${typeof helloBob}`);

>> value : hi Bob!!, type : string