티스토리 뷰

Front-End/Javascript

[데이터 타입] 템플릿 리터럴

도토리줄기 2023. 12. 14. 13:27

[숫자 타입]

기존 언어들은 숫자 타입을 int, long, float, double 등 다양한 타입을 제공했지만, JS에서는 단 하나만의 숫자 타입이 존재합니다.

모든 수를 실수로 처리하며, 정수만을 위한 데이터 타입이 별도로 존재하지 않습니다!

 

const integer = 10;
const double = 10.23;
const negative = -12;

 

한마디로, 위의 수와 같이 다양한 형식으로 작성하더라도 모두의 타입은 'number'로써 같다는 뜻 입니다!

 

뿐만 아니라 2진수, 8진수, 16진수 등 다양한 표기법의 숫자들은 모두 메모리에 64비트 부동소수점 형식의 2진수로 저장되기 때문에 표기법이 다르더라도 모두 같은수로 인식됩니다.

// 세 수는 모두 65로 해석된다.
const binary = 0b01000001;
const octal = 0o101;
const hex = 0x41;

 

이러한 이유 때문에 보기에는 정수끼리의 사칙연산처럼 보여도, 실수의 사칙연산과 같기 때문에 정수끼리의 연산에서도 소수가 등장할 수 있습니다. 

Infinity, -Infinity, NaN 등 특수한 표기법도 존재하고 있습니다.

console.log( 24 / 5 ) // 4.8

Infinity : 양의 무한대
-Infinity : 음의 무한대
NaN : 산술연산 불가능

[템플릿 리터럴] 

템플릿 리터럴이란, 문자열 표기법 중 하나입니다.

멀티라인, 표현식 삽입 등 편리한 기능을 제공하는 문자열로써, 런타임때 일반 문자열로 변환되어 표시되어집니다.

 

기존 문자열은 작은 따옴표(' ')와 큰 따옴표(" ")를 이용하여 표현해 왔습니다. 

하지만 템플릿 리터럴을 사용하기 위해서는 백틱(` `)을 사용하여 표현해야 합니다! ( 물결 특수문자버튼)

 

템플릿 리터럴을 이용하면 기존 문자열에서는 지원하지 않던 멀티라인(줄바꿈)을 사용할 수 있습니다.

기존에 줄바꿈을 위해 이스케이프 시퀀스를 사용하는 번거로움에서 해방될 수 있습니다!

 

줄 바꿈 뿐만 아니라, 공백까지 허용해주기 때문에 문자열을 표현하기에 편리합니다.

const text= `안녕하세요 저는
홍길동입니다.
이건 줄 바꿈을
마구
마구
사용
하는
것
입니다
`;

 

또한 문자열 사이에 표현식을 추가할 수 있습니다.

기존에 문자열에서는 문자열 중간에 표현식을 삽입하기 위해서는 '문자열' + 표현식 의 형식을 사용해야 했기 때문에 불편함이 많았습니다.

하지만 템플릿 리터럴을 사용하면 아래와 같이 편리하게 표현식을 삽입해, 편리하게 표현식을 이용해 문자열을 만드실 수 있습니다. 

const first = '첫번째';
const second = '두번째';

console.log(`달리기 1등은 ${first}로 들어온 사람이고,
2등은 ${second}로 들어온 사람이다.`;

표현식을 삽입하기 위해서는 예시와 같이 ${ } 를 이용하여 표현식을 감싸주기만 하면 됩니다. 

그러면 표현식의 결과가 문자열이 아니더라도 자동으로 문자열로 타입변환되어 삽입되게 됩니다.

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2026/01   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함