JavaScript 문자 숫자 변환 - JavaScript munja susja byeonhwan

어제 오늘 내일

IT/Javascript

[Javascript] 문자열 숫자로 변환하기 (1) - parseInt()

hi.anna 2020. 7. 23. 02:06

지난번에는 문자열이 숫자인지 아닌지 체크하는 방법을 알아보았습니다.

[Javascript] 문자열이 숫자인지 체크하기, isNaN() 함수

이번에는, Javascript에서 문자열을 숫자로 변환하는 방법으로 다음 3가지 방법을 소개합니다.

1. parseInt() 함수 사용

2. parseFloat() 함수 사용

3. +, * 연산자 사용

이 포스팅에서는 먼저 parseInt()를 사용하여 문자를 숫자로 변경하는 방법을 소개합니다.

parseInt()

parseInt(string, radix);

 파라미터 

string

   - 숫자로 변환할 문자열

radix

   - optional

   - string 문자열을 읽을 진법(수의 진법 체계의 진법)

   - 2~36의 수

 리턴 값 

string을 정수로 변환한 값을 리턴합니다.

만약, string의 첫 글자를 정수로 변경할 수 없으면 NaN(Not a Number) 값을 리턴합니다.

 예제 1. 10진수 처리 

See the Pen 문자열 by anna (@hianna) on CodePen.

parseInt("10"); // 10

문자열 "10"을 숫자로 변환하여 정수 10을 리턴합니다.

parseInt("-10"); // -10

문자열 "-10"을 숫자로 변환하여 정수 음수 -10을 리턴합니다.

parseInt("10.9"); // 10

문자열 타입의 실수값은 소수점을 제거한 후, 정수값만 리턴합니다.

parseInt(10); // 10

파라미터로 문자열이 아닌 다른 타입의 값이 전달되면, 

파라미터를 문자열로 변환하여 처리합니다.

parseInt("10n"); // 10

parseInt("10nnn13"); // 10

문자열의 첫글자가 숫자이고, 그 이후에 숫자가 아닌 다른 문자열이 나올 경우

숫자가 아닌 문자 이후의 값은 무시하고,

그 이전의 숫자만 정수로 변환합니다.

parseInt("    10"); // 10

문자열의 첫글자는 반드시 숫자여야 하지만, 처음에 오는 공백 문자는 허용됩니다.

parseInt("10      "); // 10

문자열의 첫글자가 숫자이면, 뒤에 오는 공백은 무시됩니다.

parseInt("k10"); // NaN

문자열의 첫글자가 숫자가 아니면, NaN(Not a Number)를 리턴합니다.

parseInt(""); // NaN

문자열에 공백이 입력되면, 문자열의 첫 글자가 숫자가 아니므로, NaN(Not a Number)를 리턴합니다.

 예제 2. 2진법, 16진법 등 다른 진법 처리 

See the Pen 문자열 by anna (@hianna) on CodePen.

parseInt("10", 2); // 2

파라미터 "10"을 2진법으로 읽어서, 10진법으로 변환한 값을 리턴하였습니다.

parseInt("2", 2); // NaN

두 번째 파라미터로 2가 입력되었으므로, 첫 번째 파라미터인 "2"를 2진법으로 읽어야 하는데,

2진법에서는 2라는 숫자가 없으므로

NaN을 리턴하였습니다.

parseInt("0xF"); // 15

parseInt("0XF") // 15

두번째 파라미터로 16진법을 의미하는 16을 입력하지 않아도, 

첫 번째 파라미터인 문자열이 '0x' 또는 '0X'로 시작한다면

자동으로 문자열을 16진수로 읽어서, 10진수로 변환한 값을 리턴합니다.

parseInt("0XFkk"); // 15

16진수에서 숫자는 0~F의 범위입니다.

16진수로 읽어들인 문자열에 'k'라는 범위 밖의 값이 붙어 있으면

'k'라는 문자는 무시됩니다.

※ parseInt() 사용 시 두 번째 파라미터를 입력하지 않아도,

첫 번째 문자열 파라미터의 값에 따라 자동으로 진법을 구분하기도 합니다.

따라서, 특정 값에 따른 오류를 방지하기 위해

두 번째 파라미터인 radix 값을 반드시 입력해 주는 것이 좋습니다.

parseInt()를 사용하여 문자열을 숫자로 변환하는 방법을 알아보았습니다.

다음번에는 parseFloat()를 사용하여 문자열을 숫자로 변환하는 방법을 알아보도록 하겠습니다.

이번 포스팅에서는 JavaScript에서 문자열을 숫자로 변환하는 몇 가지 방법을 소개합니다.

단항 연산자( +, - )

+ 연산자는 피연산자를 Number 타입으로 변환하며 - 연산자는 피연산자를 음수인 Number 타입으로 변환합니다.

단항 연산자는 문자열에 따라 정수 또는 부동 소수점 숫자로 자동 변환합니다. 그리고 문자열이 아닌 true, false, null도 숫자로 변환됩니다.

단항 연산자가 숫자로 해석할 수 없으면 NaN을 반환합니다.

console.log(+'10');
// 10

console.log(-'10');
// -10

console.log(+'123.456');
// 123.456

console.log(-'123.456');
// -123.456

console.log(+true);
// 1

console.log(+false);
// 0

console.log(+null);
// 0

console.log(+'abc');
// NaN

parseInt()

parseInt() 함수는 문자열을 정수로 변환된 값을 반환합니다. 두 개의 인수를 가지며, 첫 번째 인수는 변환하려는 문자열이고 두 번째 인수는 기수입니다. 두 번째 인수인 기수는 숫자 진법 체계를 의미하며 생략 가능합니다.

두 번째 인수를 생략하면 정수는 10진수로 표현되며, 문자열이 "0x"로 시작하면 16진수로 표현됩니다. 예전에는 "0"으로 시작하면 8진수로 표현되었는데 ECMAScript 5부터 삭제되었습니다.

parseInt() 함수는 문자열을 정수로 변환할 수 없으면 NaN을 반환합니다.

console.log(parseInt('100'));
// 100

console.log(parseInt('123ABC'));
// 123

console.log(parseInt('ABC'));
// NaN

console.log(parseInt('100', 2));
// 4

console.log(parseInt('100', 8));
// 64

console.log(parseInt('100', 16));
// 256

console.log(parseInt('0x100'));
// 256

parseFloat()

parseFloat() 함수는 문자열을 부동 소수점 숫자로 변환된 값을 반환하며, 한 개의 인수를 가집니다. 인수가 문자열이 아닌 경우 ToString 추상 연산을 하여 문자열로 변환합니다. 그리고 변환된 문자열을 부동 소수점 숫자로 변환합니다.

parseFloat() 함수는 문자열을 부동 소수점 숫자로 변환할 수 없으면 NaN을 반환합니다. 

console.log(parseFloat(100.123));
// 100.123

console.log(parseFloat('ABC'));
// NaN

console.log(parseFloat('100.123'));
// 100.123

console.log(parseFloat('123.456.abc'));
// 123.456

Number()

Number() 함수는 인수의 문자열 Format에 따라 자동으로 정수 또는 부동 소수점 숫자로 변환됩니다.

문자열을 숫자로 변환할 수 없으면 NaN을 반환하며, parseInt() 및 parseFloat() 함수와 다르게 문자열에 숫자가 아닌 값이 존재하는 경우도 NaN을 반환합니다.

console.log(Number(100.123));
// 100.123

console.log(Number('100.123'));
// 100.123

console.log(Number(100));
// 100

console.log(Number('123'));
// 123

console.log(Number('ABC'));
// NaN

console.log(Number('123.456.abc'));
// NaN