-
[타입] - 타입 변환JavaScript/기본 1 2022. 1. 8. 18:23
- 타입변환 (type conversion)
- 자바스크립트 변수는 타입이 정해져 있지 않다.
- 같은 변수에 다른 타입의 값을 다시 대입해도 된다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript Type Conversion</title> </head> <body> <h1>같은 변수에 다른 타입의 값 대입</h1> <p id = "result"></p> <script> var num = 20; // 변수의 선언과 함께 초기화 document.getElementById("result").innerHTML = num + "<br>"; num = "이십"; // 문자열 대입 document.getElementById("result").innerHTML += num + "<br>"; var num; // 한 변수를 여러 번 초기화할 수는 있으나, 재선언은 불가 document.getElementById("result").innerHTML += num; </script> </body> </html> <!-- output 같은 변수에 다른 타입의 값 대입 20 이십 이십 -->
- 묵시적 타입 변환 (implicit type conversion)
- 특정타입의 값을 기대하는 곳에 다른 타입이 오면 자동으로 타입을 변환하여 사용
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript Type Conversion</title> </head> <body> <h1>묵시적 타입 변환</h1> <p id="result"></p> <script> var result = 10 + "문자열"; // 문자열 연결을 위해 숫자 10이 문자열로 변환됨 document.getElementById("result").innerHTML = result + "<br>"; result = "3" * "5"; // 곱셈 연산을 위해 두 문자열이 모두 숫자로 변환됨 document.getElementById("result").innerHTML += result + "<br>"; result = 1 - "문자열"; // NaN document.getElementById("result").innerHTML += result; </script> </body> </html> <!-- output 묵시적 타입 변환 10문자열 15 NaN -->
- 특정타입의 값을 기대하는 곳에 다른 타입이 오면 자동으로 타입을 변환하여 사용
NaN
Not a Number
정의되지 않은 값이나 표현할 수 없는 값
ex) 0을 0으로 나누거나, 숫자로 변환할 수 없는 피연산자로 산술 연산을 시도하는 경우 반환되는 읽기 전용 값- 명시적 타입 변환 (explicit type conversion)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript Type Conversion</title> </head> <body> <h1>명시적 타입 변환 함수</h1> <p id="result"></p> <script> document.getElementById("result").innerHTML = Number("10") + "<br>"; //10 document.getElementById("result").innerHTML += String(true) + "<br>"; // true document.getElementById("result").innerHTML += Boolean(0) + "<br>"; // false document.getElementById("result").innerHTML += Object(3); // new Number(3) </script> </body> </html> - 숫자를 문자열로 변환
- String( ) 함수 사용
- 숫자 객체는 숫자를 문자열로 변환하는 다음과 같은 메소드를 별도로 제공
- toExponential( )
- 정수 부분은 1자리, 소수 부분은 입력받은 수만큼 e표기법을 사용하여 숫자를 문자열로 변환
- toFixed( )
- 소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환
- toPrecision( )
- 입력받은 수만큼 유효 자릿수를 사용하여 숫자를 문자열로 변환
- toExponential( )
- 불리언 값을 문자열로 변환
- String( )
- String(true); // "true"
- toString( )
- false.toString( ); // "false"
- String( )
- 날짜를 문자열이나 숫자로 변환
- String( )
- toString( )
- 날짜(Date) 객체 : 문자열과 숫자로 모두 변환할 수 있는 유일한 타입
메소드 설명 getDate( ) 날짜 중 일자를 숫자로 반환함. (1 ~ 31) getDat( ) 날짜 중 요일을 숫자로 반환함. (일요일 : 0 ~ 토요일: 6) getFullYear( ) 날짜 중 연도를 4자리 숫자로 반환함. (yyyy년) getMonth( ) 날짜 중 월을 숫자로 반환한. (1월: 0 ~ 12월: 11) getTime( ) 1970년 1월 1일부터 현재까지의 시간을 밀리초 단위의 숫자로 반환함. getHours( ) 시간 중 시를 숫자로 반환함. (0 ~ 23) getMinutes( ) 시간 중 분을 숫자로 반환함. (0 ~ 59) getSeconds( ) 시간 중 초를 숫자로 반환함. (0 ~ 59) getMilliseconds( ) 시간 중 초를 밀리초 단위의 숫자로 반환함. (0 ~ 999) <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript Type Conversion</title> </head> <body> <h1>날짜를 문자열이나 숫자로 변환</h1> <p id="result"></p> <script> var result = String(Date()); document.getElementById("result").innerHTML = result + "<br>"; retult = Date.toString(); document.getElementById("result").innerHTML += result + "<br>"; var date = new Date(); result = date.getFullYear(); document.getElementById("result").innerHTML += result + "<br>"; result = date.getTime(); document.getElementById("result").innerHTML += result; </script> </body> </html> <!-- output 날짜를 문자열이나 숫자로 변환 Sat Jan 08 2022 18:16:07 GMT+0900 (한국 표준시) Sat Jan 08 2022 18:16:07 GMT+0900 (한국 표준시) 2022 1641633367442 -->
- 문자열을 숫자로 변환
- Number( )함수 사용
- 전역함수 제공
- parseInt( )
- 문자열을 파싱하여 특정 진법의 정수를 반환
- parseFloat( )
- 문자열을 파싱하여 부동 소수점 수를 반환
- parseInt( )
- 불리언값을 숫자로 변환
- Number( )함수 사용
- Number(true) // 숫자 1
- Number(false) // 숫자 0
'JavaScript > 기본 1' 카테고리의 다른 글
[연산자(operator)] - 산술, 대입, 증감, 비교, 논리 (0) 2022.01.09 [타입] - 변수 (0) 2022.01.08 [타입] - 기본 타입 (0) 2022.01.08 [기초] - 자바스크립트 적용 (0) 2022.01.08 [기초] - 자바스크립트 출력 (0) 2022.01.08 - 타입변환 (type conversion)