[JavaScript] 문자 다루는 방법(Template Literals)

 

 

기존의 자바스크립트에서 문자를 작성할 때 불편한 점을 해결하기 위해 나온 문법입니다.

따옴표 대신 백틱(Backtick) 혹은 백쿼트(Backquote)라고 불리며 ( ` ` ) 기호를 사용하여 문자를 만들 수 있습니다.

위치는 키보드의 1옆의 ` 기호 입니다.

 

이 문법을 사용할때의 장점은 무엇인지 알아봅시다.

 

 

 

1. 엔터키를 사용하여 작성 가능합니다.

- 기존 따옴표( ' ', " " )를 쓸 때 엔터키를 사용하면 문자열이 깨지게 됩니다.

- 백틱을 사용하면 엔터키를 사용하여도 문자열이 깨지지 않습니다.

var text = '안녕
하세요';  // 기존의 따옴표로는 엔터로 줄을 나누면 문자열이 깨져 에러가 발생한다.



var text = `안녕
하세요`; // 백틱을 사용하면 엔터로 줄을 나누더라도 에러가 발생하지 않는다.

 

 

 

2. 문자열 중간에 변수를 넣기가 쉬워진다.

- 따옴표를 사용할때에는 문자 사이에 변수를 입력할 경우 문자열을 나누어 그 사이에 변수를 입력하게 된다.

- 백틱을 사용하면 하나의 문자열 안에서 변수를 나타낼 부분을 ${ }를 사용하여 쉽게 넣을 수 있다.

// 기존 방식

var name = '홍길동';
var text = '안녕하세요 ' + name + ' 입니다.'; // '안녕하세요 홍길동 입니다.'

-------------------------------

// 백틱 사용

var name = '홍길동';
var text = `안녕하세요 ${name} 입니다.`;  // '안녕하세요 홍길동 입니다.'
var template = `
<div>
	${text}
</div>
`; // 이런식으로 html을 작성할 때 보기 편하게 작성이 가능하다.

 

 

 

3. Tagged Literals

- 함수로 문자와 변수를 나누는 기능을 만들어 줄 수 있습니다.

- 이 기능은 문자 중간중간의 단어를 바꾸거나 변수를 삭제할 때 사용할 수 있습니다.

// tagged literal
var variable = '홍길동';
var vartext = '잘 부탁드립니다';
var text = `안녕하세요 ${variable} 입니다.`;

function fc(texts, variable1, variable2){ 
// 문자열은 texts에 배열로 저장되며, 
// variable1는 첫 번째 변수값이, variable2는 두 번째 변수값이 저장된다.
  console.log(texts);  // -> ['안녕하세요', '입니다.', '']
  console.log(variable1); // -> '홍길동'
  console.log(variable2); // -> '잘 부탁드립니다'
}

fc`안녕하세요 ${variable} 입니다. ${vartext}`;

 

- 아래 예제와 같이 문자와 변수를 나눠 자유롭게 조합해서 사용이 가능합니다.

// tagged literal
var variable = '홍길동';
var text = `안녕하세요 ${variable} 입니다.`;

function fc(texts, variable1){
	console.log(variable1 + texts[1] + texts[0]); // -> 홍길동 입니다. 안녕하세요.
}

fc`안녕하세요 ${variable} 입니다. `;