본문 바로가기

■ 프로그래밍/JavaScript

String, Number 변환

자바스크립트는 다른 언어와 달리 데이터 타입 변경이 엄청 유동적이다. 

let a = 10;
a = "a를 string으로 변경";
console.log(a); // output: a를 string으로 변경

처음에 a가 string으로 할당되었지만, 숫자로 재할당할 경우 number로 바뀐다. 

때문에 수시로 데이터 타입을 체크해야 에러를 덜 마주할 것이다. 데이터 타입은 typeof 연산자로 확인 할 수 있다. 

 

이번 글은 숫자와 문자를 +, - 했을 때의 경우를 알아보겠다. 

일반적으로 숫자와 문자를 더하면 문자열끼리 합쳐지듯이 결과값이 출력된다.

let test = '3' + 3;
console.log(test); // output: 33
console.log(typeof test); // output: string

다른 경우도 살펴보겠다. 

console.log('20' + 10); // output: 2010
console.log(20 + '10'); // output: 2010
console.log(20 + '20'); // output: 2020
console.log('20' + '이십'); // output: 20이십

console.log('20' - 10); // output: 10
console.log(20 - '10'); // output: 10
console.log('20'-'20'); // output: 0
console.log('20'-'이십'); // output: NaN

숫자와 문자를 더했을 때는 숫자를 모두 문자열로 취급하여 합쳐졌다. 

하지만, 숫자와 문자를 뺐을 경우 한 경우를 제외하고 모두 숫자로 취급하여 실제로 뺄셈된 값을 출력했다. 이는 string의 마이너스가 존재하지 않기 때문에 컴퓨터가 알아서 숫자로 변환하여 계산하기 때문이다.

'숫자 - 문자'의 경우, 우리는 인식할 수 있지만 컴퓨터는 인식이 불가하여 NaN(Not a Number)를 출력한다. 이는 '문자 - 문자'에서도 동일하다. 

console.log('오늘뭐먹' - '오늘'); // output: NaN

전세계 공통적으로 약속된 연산이 아니기 때문에 존재하지 않는 연산으로 취급된다. 

 

 

원래 숫자/문자인데 한 번만 해당 타입을 바꿔야 할 경우가 생길 때도 있을 것이다. 

String -> Number

// 1. Number
var str1 = "0324";
console.log(typeof str1); // output: string

var str2 = Number(str1);
console.log(typeof str2); // output: number

// 2. parseInt, parseFloat
parseInt("2.1"); // output: 2 (정수로 변환)
parseFloat("2.1"); // output: 2.1

Number -> String

// 1. 숫자.toString()
var num1 = 2020;
console.log(num1); // output: 2020
console.log(typeof num1); // output: number

var num2 = num1.toString();
console.log(num2); // output: 2020
console.log(typeof num2); // output: string

// 2. 연산의 특성을 활용한 변경
var num1 = "1234";
var num2 = 1234 - 0;

console.log(typeof num1); // output: string
console.log(typeof num2); // output: number

연산의 특성을 활용한 데이터 타입 변경은 컴퓨터가 핸드폰 번호를 저장할 때 쓸 수 있다. 

우리가 엑셀을 작성할 때 혹은 다른 사이트에서 휴대폰 인증할 때 010부터 쓰지만, 처음에 쓴 0이 없어지는 것을 종종 볼 수 있다. 이는 컴퓨터가 0을 없는 것으로 취급하기 때문에 이런 현상이 보인다. 따라서 이를 숫자가 아닌 문자로 저장함으로 처음 0을 살릴 수 있으며, 필요에 따라 위의 방법으로 숫자로 변환하면 된다. 

'■ 프로그래밍 > JavaScript' 카테고리의 다른 글

Object (1) - 접근, 할당  (0) 2020.03.25
isNaN()  (0) 2020.03.25
배열의 반복 (3) - findIndex()  (0) 2020.03.16
배열의 반복 (2) - map(), filter()  (0) 2020.03.15
배열의 반복 (1) - forEach()  (0) 2020.03.14