Original article: How to Convert a String to a Number in JavaScript
자바스크립트에서 문자열을 숫자로 변환하는 방법은 여러 가지가 있습니다. 코드로는 어떻게 생겼을까요?
이번 글에서는 문자열을 숫자로 변환하는 11가지 방법을 소개합니다.
Number() 함수를 이용해 문자열을 숫자로 변환하는 방법
문자열을 숫자로 변환하는 한 가지 방법은 Number() 함수를 사용하는 것입니다.아래 예시에 "12"라는 문자열 값을 가진 quantity가 있습니다.
const quantity = "12";
quantity를 typeof 연산자를 통해 실행해 보면 문자열 타입을 반환합니다.
console.log(typeof quantity);
아래 예시처럼 Number 함수를 이용해 quantitiy를 변환할 수 있습니다.
Number(quantity);
다시 typeof 연산자를 이용해 이제는 숫자 타입이라는 것을 확인할 수 있습니다.
console.log(typeof Number(quantity));
숫자로 변환될 수 없는 값을 넘겨준다면 NaN(Not a Number)를 반환합니다.
console.log(Number("awesome"));
parseInt() 함수를 이용해 문자열을 숫자로 변환하는 방법
문자열을 숫자로 변환하는 또 다른 방법으로는 parseInt() 함수를 이용하는 것입니다. 이 함수는 문자열과 기수(radix, base)를 인자로 받습니다.
기수는 수의 진법 체계에서 기준이 되는 값을 나타내는 2부터 36까지의 정수입니다. 예를 들어 기수를 2로 하면 2진수가 되고, 기수 값을 10으로 하면 10진수가 됩니다.
문자열을 숫자로 변한 해보기 위해 위에 예제에서 사용했던 quantity를 사용해 보겠습니다.
const quantity = "12";
console.log(parseInt(quantity, 10));
quantity 변수를 "12.99"로 바꾸면 무슨 일이 일어날까요? parseInt() 가 그대로 숫자 12.99를 반환할까요?
const quantity = "12.99";
console.log(parseInt(quantity, 10));
위에서 볼 수 있듯이 결과는 어림한 정수입니다. 만약 반환값으로 실수를 받고 싶다면 parseFloat()를 사용하면 됩니다.
parseFloat() 함수를 이용해 문자열을 숫자로 변환하는 방법
parseFloat 함수는 값을 받아 실수를 반환합니다. 실수의 예로는 12.99 또는 3.14와 같은 것들이 있습니다.
parseFloat()를 이용해 위의 예제를 수정하면 실수인 12.99가 반환됩니다.
const quantity = "12.99";
console.log(parseFloat(quantity));
문자열 앞 혹은 뒤에 공백이 있어도 parseFloat()는 이전과 같이 문자열을 실수로 변환합니다.
const quantity = " 12.99 ";
console.log(parseFloat(quantity));
문자열의 첫 글자가 숫자로 변환할 수 없는 경우 NaN을 반환합니다.
const quantity = "F12.99";
console.log(parseFloat(quantity));
(+) 단항 더하기 연산자를 이용해 문자열을 숫자로 변환하는 방법
단항 더하기 연산자(+)는 문자열을 숫자로 반환하며 피연산자 앞에 위치합니다.
const quantity = "12";
console.log(+quantity);
단항 더하기 연산자(+)는 문자열을 실수로 반환하는 데에도 사용될 수 있습니다.
const quantity = "12.99";
console.log(+quantity);
문자열이 숫자로 변환될 수 없는 경우에는 NaN을 반환합니다.
const quantity = "awesome";
console.log(+quantity);
문자열에 곱하기 1을 하여 문자열을 숫자로 변환하는 방법
문자열을 숫자로 변환하는 다른 방법으로는 기본 수학 연산을 이용하는 것입니다. 문자열에 1을 곱하면 숫자를 반환받게 됩니다.
const quantity = "12";
console.log(quantity * 1);
결과에서 알 수 있듯이 quantity 값에 1을 곱하면 정수 12를 반환합니다. 하지만 어떻게 가능한 것일까요?
아래 예제에서 자바스크립트는 문자열 값을 숫자로 변환하고 수학 연산을 수행합니다. 그러나 문자열이 숫자로 변환될 수 없는 경우에는 수학 연산을 하지 않고 NaN을 반환하게 됩니다.
이와 같은 방법은 실수에도 똑같이 적용됩니다.
const quantity = "10.5";
console.log(quantity * 1);
문자열에 나누기 1을 하여 문자열을 숫자로 변환하는 방법
곱하기 1을 하는 대신 문자열에 나누기 1을 할 수 있습니다. 자바스크립트는 문자열을 숫자로 변환하여 수학 연산을 수행합니다.
const quantity = "10.5";
console.log(quantity / 1);
문자열에 빼기 0을 하여 문자열을 숫자로 변환하는 방법
문자열에 0을 빼는 것도 한 가지 방법이 될 수 있습니다. 이전처럼 자바스크립트는 문자열을 숫자로 변환 후 수학 연산을 수행합니다.
const quantity = "19";
console.log(quantity - 0);
비트 부정 연산자(~)를 이용해 문자열을 숫자로 변환하는 방법
비트 부정 연산자(~)는 피연산자의 비트를 뒤집습니다. 그리고 난 후 부호가 있는 32비트 정수로 변환합니다. 부호가 있는 32비트 정수란 32비트(4바이트) 안에서 표현할 수 있는 값을 나타냅니다.
하나의 비트 부정 연산자(~)를 숫자에 사용하면 -(x + 1) 연산을 실행하게 됩니다.
console.log(~19);
하지만 두 개의 비트 부정 연산자(~)를 사용하면 문자열을 숫자로 변환합니다.
const quantity = "19";
console.log(~~quantity);
위와 같은 방법은 실수에는 적용되지 않습니다. 왜냐하면 결괏값으로 정수를 반환하기 때문입니다.
const quantity = "19.99";
console.log(~~quantity);
만약 숫자가 아닌 문자에 사용할 경우 0을 반환하게 됩니다.
const quantity = "awesome";
console.log(~~quantity);
변수의 값이 너무 크면 연산이 실행되지 않는 한계가 있습니다. 그래서 부호가 있는 32비트 정수인지 확인하는 것이 중요합니다.
const quantity = "2700000000";
console.log(~~quantity);
이 문서 를 통해 비트 부정 연산자(~)에 대해 더 알아볼 수 있습니다.
Math.floor() 함수를 이용해 문자열을 숫자로 변환하는 방법
Math.floor() 함수를 이용해 문자열을 숫자로 변환할 수 있습니다. 이 함수는 값에 버림을 하여 가장 가까운 정수를 반환합니다.
const quantity = "13.4";
console.log(Math.floor(quantity));
앞선 예제들과 같이 숫자가 아닌 문자를 경우 결괏값으로 NaN을 받습니다.
const quantity = "awesome";
console.log(Math.floor(quantity));
Math.ceil() 함수를 이용해 문자열을 숫자로 변환하는 방법
Math.ceil() 함수는 숫자를 가장 가까운 정수까지 올림합니다.
const quantity = "7.18";
console.log(Math.ceil(quantity));
Math.round() 함수를 이용해 문자열을 숫자로 변환하는 방법
Math.round() 함수는 가장 가까운 정수까지 반올림합니다.
값이 6.3이면 Math.round()는 6을 반환합니다.
const quantity = "6.3";
console.log(Math.round(quantity));
그러나 값을 6.5로 바꿀 경우에는 함수 Math.round()는 7을 반환합니다.
const quantity = "6.5";
console.log(Math.round(quantity));
결론
이번 글에서는 문자열을 숫자로 변환하는 11가지 방법을 소개해 드렸습니다.
윗글에서 언급된 11가지 다른 방법들입니다.
Number() 함수 사용
parseInt() 함수 사용
parseFloat() 함수 사용
단항 더하기 연산자(+) 사용
문자열에 곱하기 1
문자열에 나누기 1
문자열에 숫자 0을 빼기
비트 부정 연산자(~) 사용
Math.floor() 함수 사용
Math.ceil() 함수 사용
Math.round() 함수 사용
이 글을 재밌게 읽어주셨길 바라며 여러분의 자바스크립트 여정에 행운이 가득하길 희망합니다.