#8 자바스크립트 - 숫자를 문자열로, 문자열을 숫자로 (feat.Number 객체 메소드)

JavaScript 숫자를 문자열로 and 문자열을 숫자로 변환 (feat. Number 객체)

변수 값을 출력할 때 명시적으로 타입을 변경해줘야 할 때가 있다.

그래서 숫자를 문자열로, 문자열을 숫자로 변경하는 방법들을 알아보자

1. 숫자를 문자열로 변환

(1) 숫자 + 문자열

숫자와 문자열을 +연산자로 연결하면 숫자의 타입이 문자열로 변환된다.

10 + "string"        //-> "10string"
100 + ""            //-> "100"
"0000" + 12            //-> "000012"

(2) Number 객체의 메소드를 활용하는 법

다음 표의 메소드는 숫자 타입을 문자열로 바꿔준다.

메소드	설명
toString	숫자를 문자열로 변환한다. 인수로 가수(2~32)를 넘기면 진법을 바꿀 수 있다.
toLocaleString	숫자를 지역화된 문자열로 변환한다. 인수로 다양한 옵션을 줄 수 있다.
toFixed(n)	숫자의 소수점 아래 자릿수를 지정한 문자열로 변환한다.
toExponential(n)	숫자의 소수점 아래 자릿수를 지정한 문자열로 변환하되 지수를 함께 표시한다.
toPrecision(n)	숫자를 유효 숫자가 지정된 문자열로 변환한다.   단, 유효 숫자가 정수부의 자릿수보다 작을 때는 지수로 표시한다.

아래는 사용의 예제이다.

var n = 25;
n.toString();            //-> "25" : 인수를 지정하지 않고 사용하면 10진수 문자열로 변환
n.toString(2);            //-> "11001" : 2진수 문자열로 변환
n.toString(16);            //-> "19" : 16진수 문자열로 변환
(25).toString(16);        //-> "19" : 숫자에 직접 사용하고자 할 땐 소괄호로 묶는다.
 
var x = 1234.567;
x.toString();            //-> "1234.567"
x.toFixed(0);            //-> "1235" : 소수점 아래 자릿수를 0으로 만들도록 반올림한 문자열
x.toFixed(2);            //-> "1234.57" : 소수점 아래 자릿수를 2로 만들도록 반올림한 문자열
x.toFixed(4);            //-> "1234.5670" : 소수점 아래 자릿수를 4로 만듦
x.toExponential(3);        //-> "1.235e+3" : 소수점 아래 자릿수 3으로 만들고 지수 함께 표시
x.toPrecision(3);        //-> "1.23e+3" : 숫자 자릿수를 인수만큼 반올림하여 변환한다. 정수부 자릿수(1234 : 4)보다 인수(3)가 작으므로 지수를 표시한다.
x.toPrecision(6);        //-> "1234.57" : 정수부 자릿수(1234 : 4)보다 인수(6)가 크므로 지수는 표시하지 않는다.
x.toPrecision(4);        //-> "1235" : 정수부 자릿수와 인수가 같을 때도 지수 표시하지 않는다.

(3) String 함수 사용

String 함수의 반환값은 객체가 아니라 문자열이다.

String 함수에 값을 전달하면 그 값을 문자열로 변환한다.

String(26);                //-> "26"
String(1234.567);        //-> "1234.567"
String(0x1a);            //-> "26"

'0x' 로 시작하는 숫자는 16진수로 해석한다.

String 함수에는 모든 데이터 타입을 문자열 타입으로 바꾸는 기능이 있습니다.

String(true);            //-> "true"
String(false);            //-> "false"
String(NaN);            //-> "NaN"
String(null);            //-> "null"
String({x:1, y:2});        //-> "[object Object]"
String([1, 2, 3]);        //-> "1,2,3"

2. 문자열을 숫자로 변환

(1) 수식 안에서 변환

다음 방법을 이용하면 문자열 타입을 숫자 타입으로 변환할 수 있다.

var s = "2";
s - 0            //-> 2
+s                //-> 2

(2) parseInt 와 parseFloat 함수를 이용하는 방법

parseInt, parseFloat 함수는 문자열을 해석(parse)해서 숫자로 바꾸는 함수이다.

parseInt는 문자열을 정수로 바꿔주고,

parseFloat는 문자열을 부동소수점으로 바꿔준다.

'0x' 혹은 '0X'로 시작하는 문자열은 16진수로 해석한다.

parseInt("3.14");            //-> 3 : parseInt는 정수로 바꿔준다.
parseFloat("3.14");            //-> 3.14
parseInt("3.14 pi");        //-> 3 : 숫자 뒤에 나오는 문자열은 무시한다.
parseFloat("3.14 pi");        //-> 3.14 : 숫자 뒤에 나오는 문자열은 무시한다.
parseInt("0XFF");            //-> 255 : 16진수로 해석
parseInt("0.5");            //-> 0
parseInt(".5");                //-> NaN : 앞에 "."이 있으므로 해석하지 않음
parseInt("abc");            //-> NaN : 숫자가 없어 숫자로 해석하지 않음
parseFloat("\100");            //-> NaN : 앞에 "\"가 있으므로 

(3) Number 함수를 이용하는 방법

Number 함수의 인자로 문자열을 넘기면 정수 혹은 부동소수점을 뜻하는 문자열을 숫자로 변환할 수 있다.

단, Number함수는 10진수만 처리할 수 있다.

Number("2.71828")    //-> 2.71828
Number(123)            //-> 123
Number(true)        //-> 1
Number(false)        //-> 0
Number(NaN)            //-> NaN
Number(null)        //-> 0
Number({x:1, y:2})    //-> NaN
Number([1, 2, 3])    //-> NaN