[ Javascript ] 문자열을 숫자로 형변환하는 3가지 방법

자바스크립트에서 문자열을 숫자로 형변환하는 방법은 크게 3가지가 있다.

 

• Number 생성자 함수를 new 연산자 없이 사용
• +(단항 더하기)
• parseInt, parseFloat 메서드

 

그러나 각 방식에는 조금의 차이점이 있기 때문에 원하는 결과에 따라 적절한 방식을 선택해야 한다.

 

 

---

Number()

const str = '123';
const num = Number(str);

console.log(typeof num, num);
// number 123

const str = '1.23';
const num = Number(str);

console.log(typeof num, num);
// number 1.23

정수, 실수 모두 형변환 가능

 

const str = '1.23';
const num = Number(str);

console.log(typeof num, num);
// number 1.23

숫자 형식이 아닌 문자열이 끼어있으면 NaN을 반환함

 

const str = '';
const num = Number(str);

console.log(num)   
// 0

빈 문자열을 0으로 형변환함

const str = null;
const num = Number(str);

console.log(num)   
// 0

null을 0으로 형변환함

const str = undefined;
const num = Number(str);

console.log(num)   
// NaN

undefined는 형변환에 실패함

 

---

+(단항 더하기)

Number() 함수와 동일하게 작동

const str = '123';
const num = +str;

console.log(typeof num, num);
// number 123

const str = '1.23';
const num = +str;

console.log(typeof num, num);
// number 1.23

정수, 실수 모두 형변환 가능

const str = '1개';
const num = +str;

console.log(typeof num, num);
// number NaN

숫자 형식이 아닌 문자열이 끼어있으면 NaN을 반환함

const str = '';
const num = +str;

console.log(num)   
// 0

빈 문자열을 0으로 형변환함

const str = null;
const num = +str;

console.log(num)   
// 0

null을 0으로 형변환함

const str = undefined;
const num = +str;

console.log(num)   
// NaN

null을 0으로 형변환함

 

---

parseInt / parseFloat

const str = '123';
const num = parseInt(str);

console.log(typeof num, num);
// number 123

const str = '1.23';
const num1 = parseInt(str);
const num2 = parseFloat(str);

console.log(typeof num1, num1);
// number 1

console.log(typeof num2, num2);
// number 1.23

정수와 실수 변환을 구분해서 사용해야 함

• 정수 → parseInt
• 실수 → parseFloat

const str = '1개';
const num = parseInt(str);

console.log(typeof num, num);
// number 1

 

숫자 형식 이외의 문자열이 끼어있더라도 숫자 부분만 형변환해 결과 값을 반환함

const str = '12시 50분';
const num = parseInt(str);

console.log(typeof num, num);
// number 12

대신 숫자가 아닌 문자가 나오기 전까지의 숫자만을 인식함

const str = 'today 2024-03-18';
const num = parseInt(str);

console.log(typeof num, num);
// number NaN

숫자가 아닌 문자가 가장 먼저 나오면 문자열에 숫자가 있더라도 형변환을 실패함

const str = '';
const num = parseInt(str);

console.log(num)   
// NaN

const str = null;
const num = parseInt(str);

console.log(num)   
// NaN

const str = undefined;
const num = parseInt(str);

console.log(num)   
// NaN

빈 문자열, null, undefined는 형변환에 실패함

 

---

결론

형변환하려는 변수의 값이 정수, 실수 구분이 없을 때는 Number()나 +를 사용하고, 구분이 있을 때는 parseInt/parseFloat를 나눠서 사용하는 것이 좋다.

 

Number()와 +의 경우 동작이 대부분 유사하기 때문에 가독성과 명확성 등을 고려하여 프로젝트에 더욱 적합한 문법을 사용하면 될 것 같다. 

 

parseInt/parseFloat의 경우 빈 문자열과 null을 변환하려고 할 시 NaN을 반환하기 때문에 예상치 못한 에러를 발생시킬 가능성이 있으므로 주의해서 사용해야 한다.