7. 문자열과 템플릿 리터럴 (Strings and Template Literals)

안녕하세요. 박기린입니다.

자바스크립트는 ES6 버전부터 String을 사용할 때 template literal 방식을 도입합니다.

---

 

기존의 String 선언 방식

const stringEx = 'String';

기존에는 작은따옴표(')와 큰따옴표(")를 사용해서 String타입의 변수를 선언했습니다.

---

 

Template Literal

Template Literal 방식은 백틱(backtick, `)을 사용합니다.

const firstName = `joseph`;
const job = `teacher`;

위의 코드만 봤을 때는 기존의 String 선언 방식과의 차이점을 알 수가 없습니다.

이제부터 그 차이점에 대해 알아가보겠습니다.

---

 

Template Literal 방식의 특징 - String Interpolation

달러사인($)을 사용해서 String Interpolation을 적용할 수 있습니다.

 

 

String Interpolation 이란?

기존에는 String에서 새로운 문자열을 삽입할 때 '+'연산자를 사용해야 했습니다. 특히 원하는 문자열이 변수에 저장되어 있을 경우에는 필수였습니다.

const name = 'Giraffe';
console.log('I like' + name);

 

하지만 Template Literal 방식을 이용해서 덜 번거롭고 보기 편한 방식으로 String을 연결해줄 수 있습니다

const firstName = `joseph`;
const year = 2022;
const birthYear = 2000;
const job = `teacher`;

const joseph = `I'm ${firstName}, a ${year - birthYear} years old ${job}!`;
console.log(joseph);
console.log(`Just a regular string....`);

'${}'안에 원하는 변수를 집어넣으면 끝입니다. 더욱 복잡한 String일 경우 Template Literal은 더욱 강력한 파워를 보여줍니다.

(추가 - 위의 코드를 보면 year와 birthYear는 number 타입이지만 String interpolation 과정에서 String으로 변환된 것을 확인할 수 있습니다. 예전의 '+'를 통한 방식, Template Lietral 방식 모두 강제 String 타입 변환을 작동합니다.)

 

 

console.log(`5 + 15 = ${5 + 15}`); // 5 + 15 = 20

'${}' 안에는 변수 뿐만 아니라 JS expression 모두를 집어넣을 수 있습니다. 그래서 위처럼 계산식을 넣거나, 비교연산식을 넣는 등 다양한 응용을 할 수 있습니다.

(JS expression에 대한 설명글은 추후 작성 예정 - 작성 시 링크 첨부)

---

 

 

Template Literal 방식의 특징 - 줄바꿈 지원

기존의 큰 따옴표와 작은 따옴표를 이용한 String 선언 방식은 '\n\'을 이용해서 줄바꿈을 구현했습니다.

(타 언어는 '\n'이 줄바꿈 기호인 경우가 많은데, JS는 '\n\'이 줄바꿈 기호입니다.)

console.log('String with \n\
multiple \n\
lines');

 

Template Literal은 단순히 enter(mac : return)키만 눌러서 줄바꿈을 구현할 수 있습니다.

console.log(`String with
multiple
lines`);