자바스크립트 타입 변환 JavaScript Type Conversion

자바스크립트는 새 변수 및 다른 데이터 유형으로 변환할 수 있는데, 타입을 어떻게 캐스팅하는지 알아봅니다.

 

1. 문자열에서 숫자로 변환

 

전역 메소드인 Number()는 문자열을 숫자로 변환할 떄 사용됩니다. 숫자를 포함하는 문자열(예: "3.14")은 숫자(예: 3.14)로 변환됩니다. 빈 문자열은 0으로 변환됩니다. 다른 모든 것은 NaN(숫자가 아님)으로 변환됩니다.

Number("3.14")    // returns 3.14
Number(" ")       // returns 0
Number("")        // returns 0
Number("1000원")   // returns NaN

 

parseFlaot, parseInt 또한 문자열을 숫자로 바꿀 수 있습니다. 이는 이전에 설명한 바 있으므로 아래 내용을 참고하시기 바랍니다.

https://bit.ly/2ZkM4ZJ

자바스크립트 숫자 메소드 Number Methods

단항 연산자만 따로 사용되는 경우, 문자열을 숫자로 바꿀 수 있습니다. 이때, 변환이 불가한 경우에도 숫자가 되지만 값은 NaN(숫자가 아님)입니다.

let y = "100";      
let x = + y; <-- 단항 연산(+) 사용    
typeof x     // x is a number
typeof y     // y is a string

let y = "홍길동";   // y is a string
let x = + y;      // x is a number (NaN)

 

2. 숫자를 문자열로 변환

 

String( ) 및 toString( ) 메소드는 숫자를 문자열로 변환할 때 사용됩니다.

1. String()
var x = 1050;
String(x)         
String(1050)       
String(1000 + 50)

2. toString()
var x = 1050;
x.toString()
(1050).toString()
(1000 + 50).toString()

toExponential( ), toFixed( ), toPrecision( ) 메소드 또한 숫자를 문자열로 바꿔줍니다. toExponential( ), toFixed( )에 대한 설명은 아래의 링크에서 더욱 자세한 내용을 확인할 수 있습니다.

https://bit.ly/2ZkM4ZJ

자바스크립트 숫자 메소드 Number Methods

 특히, toPrecision( )은 지정된 길이로 작성된 숫자와 함께 문자열을 반환하는 메소드입니다.

var x = 123.456;
x.toPrecision()
// 리턴값 '123.456'

 

3. 날짜를 숫자/문자로 변환

 

Number( )와 getTime( ) 메소드는 날짜를 숫자로 변환할 때 사용합니다.

d = new Date();
Number(d)          // returns 1632567059796
d.getTime()        // returns 1632567059796

String( )과 toString( ) 메소드는 날짜를 문자로 변환할 때 사용합니다.

String(Date()) // 'Sat Sep 25 2021 18:51:58 GMT+0800'
Date().toString() // 'Sat Sep 25 2021 18:51:58 GMT+0800'

다음은 날짜와 관련된 메소드로 알아두시면 좋을 것 같습니다.

getDate()	날짜를 숫자로 가져옵니다 (1-31)
getDay()	날짜를 숫자로 가져옵니다 (0-6)
getFullYear()	네 자리 년도를 가져옵니다 (yyyy)
getHours()	시간을 가져옵니다 (0-23)
getMilliseconds()	밀리 초를 가져옵니다 (0-999)
getMinutes()	분을 가져옵니다 (0-59)
getMonth()	월을 가져옵니다 (0-11)
getSeconds()	초를 가져옵니다 (0-59)
getTime()	1970년 1월 1일 이후의 시간을 밀리 초로 가져옵니다.

 

4. 논리값을 숫자/문자로 변환

 

Number( )는 논리값을 숫자로, String( )은 논리값을 문자로 변환합니다.

Number(false)     // returns 0
Number(true)      // returns 1
String(false)      // returns "false"
String(true)       // returns "true"

 

5. 자동 타입 변환

 

자바스크립트에서는 잘못된 데이터 타입의 값을 올바른 타입의 값으로 변환하려고 시도합니다.

5 + null    // returns 5         null은 0으로 변환.
"5" + null  // returns "5null"   null은 문자열 "null"로 변환.
"5" + 2     // returns "52"      숫자 2는 문자열 "2"로 변환.
"5" - 2     // returns 3         문자열 "5"는 숫자 5로 변환.
"5" * "2"   // returns 10        문자열 "5" 와 "2"는 숫자 5 와 2로 변환.