JS : 템플릿 리터럴 ( Template literals )

JS : 템플릿 리터럴 ( Template Literals )

---

• ES6에서 추가된 새로운 문자열 선언방식을 템플릿 리터럴 ( Template Literals)이라고 한다.
• 백틱 `` (esc 아래에 위치)을 이용하여 코드를 더 쉽게 작성할 수 있다.

 

 

 

---

01. 문자열 & 표현식 삽입  

---

• ES6이전 템플릿 문자열 ( Template String) 작성방법은 아래와 같다.

let name1 = "Alexander";
let name2 = 'Benjamin';

const friend = name1 + ` meets ` + name2;

console.log(name1) // Alexander
console.log(name2) // Benjamin

console.log(friend) // 'Alexander meets Benjamin'

• 기존 템플릿 문자열에서는 ""와 ''를 통해 값을 감싸는 형태로 선언을 했었다.
• "", ''으로 값을 선언할 경우 ""와 ''를 써야 할 상황에 의도치 않은 문제가 발생될 수 있다. (대화체 등)

 

let name = 'Hello, I'm  Alexander';

console.log(name);

• 위와 같이 작성 시 오류가 발생되는데 그 이유는 I'm에서의 '를 문자열의 종료로 인식해서 m Alexander는 인식되지 않았다
  해결방법은 \ 를 사용하거나 사용하지 않은 따옴표로 작성  ( ‘’ → “” / “”→ ‘’) 하거나 백틱 `` 을 사용하면 된다.
  백틱`` 안에는 어떠한 따옴표가 오든 문자열 종료로 인식하지 않고 표현된다.

 

let name = 'Hello, I\'m  Alexander';
let name2 = "Oh hi! My name's Benjamin"
let hi = `"안녕!"'하세요!'`

console.log(name); // "Hello, I'm  Alexander"
console.log(name2); // "Oh hi! My name's Benjamin"
console.log(hi); // "안녕!"'하세요!'

 

 

---

 

• ES6전엔 변수와 문자열을 합쳐서 사용할 경우 아래와 같이 사용했다.

let name1 = "E";
let name2 = name1 + "RESHUR";

console.log(name2); // ERESHUR

• 위의 예제에서는 합칠 변수가 총 2가지이기 때문에 문제가 안되지만 여러 개일 경우 계속해서 + 를 사용해야 했다.
• ES6에서는 백틱`` 을 이용하여 아래와 같이 좀 더 쉽게 작성할 수 있다.

 

let name1 = "ERESHUR";
let greeting = `Hello, ${name1}`;

console.log(greeting); // 'Hello, ERESHUR'

• ${변수}으로 작성하면 변수에 들어가는 값이 ${변수} 안에 치환된다.
• 표현식 또한 아래와 같이 작성할 수 있다.

 

let yourmoney = 800;
let mymoney = 900;

console.log(`our money is ${yourmoney + mymoney}`); // 'our money is 1700'

 

---

02. 여러줄의 문자열 생성

• ES6이전에는 여러줄을 사용하기 위해선 \ (backspace 아래에 위치)를 사용해야했다.

let hello = "안녕하세요 \
	      저는 RESHUR 입니다.\
	      만나서 반가워요! ";

console.log(hello); // '안녕하세요 저는 RESHUR 입니다.만나서 반가워요! '

 

 

• 백틱 `` 을 사용했을땐 \ 없이 여러줄을 그대로 입력하면 된다. 

let hello = `안녕하세요 
            저는 RESHUR 입니다.
            만나서 반가워요! `;

console.log(hello); // '안녕하세요 저는 RESHUR 입니다.만나서 반가워요! '

 

 

---