2.8 변환(Conversion)
JavaScript는 var 키워드에서 풍기는 것처럼 기본적으로 자동적인
형변환, 즉 입력된 데이터 관점에서 내부적으로 자동적으로 데이터 타입이 적용되는 언어입니다.
하지만 때때로 상황에 따라서 특정 데이터 타입으로 명시적으로 변환해줘야 할 필요성이 대두되기도 하는데 예를 들면 하나는 숫자형 형태인
“var number=12;”와 다른 하나는 문자열 형태인 “var
year=”41”와 같은 두 개의 변수가 있을 경우 이 두 변수를 가지고 앞서 소개한 연산자들을 이용하여 작업을 수행할 때는 데이터
타입의 변환이 필요하게 됩니다.
이와 같은 경우 JavaScript에서는
toString(), parseInt(), parseFloat(), eval() 같은 함수들을 기본적으로 제공하며 이를 통해 숫자
혹은 Boolean 값을 문자열 형태로 변환하거나 문자열을 숫자형태로 변환하는 등의 작업을 수행할 수
있습니다.
2.8.1 toString()
함수를 이용한 기존 데이터를 문자열 형태로 바꾸기
toString() 함수는 함수이름에서
풍기듯이 어떤 데이터 타입을 문자열(string) 형태로 변환해주는 함수로 다음과 같은 형식으로 사용합니다.
변수이름.toString([radix])
위에서 옵션
형태인 radix는 숫자 데이터와 관련된 옵션으로 radix 값이 2이면 해당 숫자 데이터를 2진수 문자열, 8이면 8진수 문자열, 마지막으로 16이면 16진수 문자열로 변환하여 나타냅니다.
이제 예제를 통해 실제 사용 방법을 알아봅니다. 메모장을 열어서 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>toString()예제</title>
<script
type="text/javascript">
var numberData = 15;
var booleanData = true;
var ArrayData = new Array("유럽 항공권",
"노트북");
document.write("numberData 변환 : " +numberData.toString()+"<br />");
document.write("numberData 2진수로 변환 : "
+numberData.toString(2)+"<br />");
document.write("numberData 8진수로
변환 : " +numberData.toString(8)+"<br />");
document.write("numberData 16진수로
변환 : " +numberData.toString(16)+"<br
/>");
document.write("booleanData 변환 : " +booleanData.toString()+"<br />");
document.write("ArrayData 변환 : " +ArrayData.toString()+"<br />");
</script>
</head>
<body>
</body>
</html>
위의 예제에서는 Object의 한 형태인 배열(Array)를 이용했는데 배열(Array)에 대해서 toString() 함수를 적용하게 되면 해당 배열 변수에 저장되어 있는 아이템들 모두를 콤마(,)로 구분하여 나타내게 됩니다. 그래서 “toString.html”로 저장한 후 IE9를 통해 연결하여 보면 다음과 같이 그 결과를 나타내게 됩니다.
2.8.2 parseInt(), parseFloat() 함수를 이용한 문자열을 숫자 데이터로 변환
먼저 parseInt() 함수는 숫자를 포함하는 문자열을 정수형 데이터로 변환하는 함수로 다음과 같은 형식으로 사용합니다.
parseInt(numberString, [radix])
첫 번째 입력
파라미터인 numberString에는 숫자를 나타내는 문자열을 입력해주면 되고 두 번째 입력 파라미터인 radix는 상황에 따라서 사용할 수도 있고 사용하지 않을 수 있는 옵션 입력 파라미터로 수의 기수(base)를 2와 36 사이의
값으로 정하는 옵션으로 이에 대한 자세한 설명은 생략하기로 하고 여기서는 numberString 입력
파라미터만을 고려합니다.
다음으로 parseFloat() 함수는 숫자를 포함하는 문자열을 실수를 나타내는 부동 소수점
형태로 변환하는데 사용하는 함수로 다음과 같은 형식을 사용합니다.
parseFloat(numberString)
입력 파라미터로 사용된 numberString에는 부동 소수점 형태의 실수를 나타내는 숫자 데이터를 포함하는 문자열 형태 입력해주면 됩니다. 이와 관련한 예외적인 상황은 예제를 통해 확인해보도록 합니다. 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>parseInt(), parseFloat() 예제</title>
<script
type="text/javascript">
var intString="100점";
var floatString="42.195km";
document.write("변환된 데이터 : "+parseInt(floatString)+"<br />");
document.write("변환된 데이터 : "+parseFloat(floatString));
</script>
</head>
<body>
</body>
</html>
위에서 intString 변수에 정수형 데이터를 포함하는 문자열 데이터 값을 저장하고
floatString 변수에는 실수형 데이터를 포함하는 문자열 데이터값을 저장합니다. 그리고 parseInt(), parseFloat() 함수를 이용하여 변환하여 나타내도록 하는 코드입니다. “parseIntandFloat.html”로 저장합니다.
IE9를 이용하여 “http://localhost/parseIntandFloat.html” 연결하여
보면 다음과 같이 문자열 형태로 inString, floatString 변수에 저장되어 있던 데이터를
각각 정수, 실수 형태로 변환하여 나타냅니다.
결과에서 보는
것처럼 숫자형 데이터가 포함된 문자열에 대해서 숫자 데이터들만 뽑아서 숫자 데이터로 변환을 해서 나타내는데 숫자형 데이터가 포함된 문자열을 다음과
같이 조금 바꿔 볼까요?
var intString="수학 100점";
var floatString="마라톤 42.195km";
위와 같이 숫자형 데이터 앞에 문자열을 위치하도록 한 후 저장합니다. 그리고 다시 IE9로 연결하여 보면 조금 전과는 다르게 다음과 같이 나타납니다.
위에서 NaN은 “Not a Number”의 약자입니다. parseInt(), parseFloat() 함수를 이용하여 문자열 데이터를 정수나 실수로 변환하려면 숫자형
데이터만을 포함하는 문자열이거나 숫자형 데이터로 시작하는 문자열이어야만 정상적으로 해당 함수들이 동작합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 3.4 switch … case 문 (0) | 2013.08.06 |
|---|---|
| 3. 흐름 제어(Flow Control) (0) | 2013.08.06 |
| 2. 연산자(Operators)와 변환(Convert) (0) | 2013.08.06 |
| 1.2 변수(Variable) (0) | 2013.08.06 |
| 1. JavaScript의 데이터 타입, 변수 (0) | 2013.08.06 |