String <-> Number 변환?
JavaScript 에서 Data Type은 Dynamic하게 결정되기 때문에, 여러가지 신기한 일들이 많이 일어난다!
let a = 10; // typeof number
a = "나는 String인데.."; // typeof string
console.log(a); // 나는 String인데.. 출력같은 변수에서 type이 자유자재로 변하기도 하고...
console.log('200'+'10'); // 20010
console.log('200'-'10'); // 190
console.log('200'/'10'); // 20
console.log(200+'11'); // 20011
console.log('200'+11); // 20011
console.log('200'-'안녕'); // NaN이렇게 string 끼리의 연산에서 - 가 나오면 열심히 number로 변환해서 억지로 계산해주고, string과 number의 계산은 열심히 string으로 변환해서 문자열로 출력해주기도 한다.
( + 는 문자열에서도 사용되지만, - / * 등은 숫자에서만 사용되는 연산이기 때문에 )
이러한 특징이 간단한 프로젝트를 만들때는 쉽고 편할 수 있지만, 협업이나 큰 프로젝트 에서는 오히려 불편하기 때문에 추가로 등장한것이 바로 TypeScript
따라서 이런식으로 코드를 짜도 잘 동작하게 된다.
let birthYear = "2000"; // 난 string!
let currentYear = 2019; // 난 number!
if (currentYear - birthYear < 14) { // 그래! 내가 알아서 계산해줄게!
alert("가입할 수 없습니다.");
}하지만, 이런 코드는 사람의 눈으로 보면 명확하지 않고, 오해의 소지가 있다.
그러므로 문자열의 숫자를 계산할 때는, 값이 잘 계산된다 하더라도 꼭 숫자로 바꿔줘야 한다!
String → Number
Number()
number를 생성하는 함수!
⇒ 매개 변수로 문자열 타입의 숫자도 가질 수 있다. ("1234")
이 경우에, 문자열을 숫자로 변환해준다.
const strNum = "1"; // 1, string type
const changeNum = Number(strNum); // 1, numer type💁🏻♀️ Number() 의 특징
(1) 날짜(Date)는 밀리세컨 크기로 변환해서 반환!const a = Number(new Date()); console.log(a); // 1590582662566 console.log(Date(a)); // Wed May 27 2020 21:31:02 GMT+0900 (대한민국 표준시)⇒ 이 경우 Date 객체(= 생성자 함수)를 이용해 다시 날짜와 시간을 가지는 인스턴스로 반환할 수 있다.
(2) null은 0으로, undefined는 NaN으로 반환!let a; // undefined Number(null); // 0 Number(a); // undefined = NaN(3) boolean(true, false) 값은 1과 0으로 바꿔 반환
Number(true); // 1 Number(false); // 0 Number(1 < 0); // false = 0(4) 빈 문자열은 0 반환!
Number(""); // 0
parseInt()
문자열을 파싱해서 number를 찾아내는 함수!
⇒ 매개 변수 값으로 문자열을 넘기면 문자열 내의 숫자를 반환해준다.
const strNum = "1"; // 1, string type
const changeNum = parseInt(strNum); // 1, number type엥? Number() 와 parseInt() 랑 같은거 아님?
얼핏 비슷해보이는 두 함수 이지만, 태생적으로 차이가 있다.
Number() 함수는 숫자를 생성하는 함수로, 문자열의 숫자를 숫자 타입으로 바꿔주는 기능을 지원하는 것이고, parseInt()함수는 문자열을 숫자로 변환하는 함수이다.
예를 들어, 위에서와 같은 경우에는 둘 다 number 타입 숫자 1이 출력된다.
하지만, 다음과 같은 경우에 차이가 생긴다.const strNum = "2020년 5월"; console.log(Number(strNum)); // NaN console.log(parseInt(strNum)); // 2020"2020년 5월" 처럼 숫자가 포함된 문자열의 경우,
Number는 NaN (not a number)를,parseInt는 2020을 출력한다.
👉parseInt는 스페이스 뒤의 "5월"의 5는 출력을 못하는게 보인다.
또한, 문자열에 숫자가 포함되어 있어도 문자로 시작하면 NaN을 출력한다.const strNum = "올해는 2020년 5월"; console.log(parseInt(strNum)); // NaN그럼 무조건
parseInt가 좋은거 아냐? 라고 할 수 있는데, 숫자에 정통한Number는 당연히 출력하는 소수점을parseInt는 출력하지 못한다는 특징이 있다.const decimalNum = "20.2005"; console.log(Number(decimalNum)); // 20.2005 console.log(parseInt(decimalNum)); // 20💁🏻♀️문자열 중에 숫자가 아닌 일반 문자가 섞여 있는가? 소수점을 표현해야 하는가? 등등의 목적을 잘 생각해서 그에 맞게 사용하자!
🤓 사실,
parseInt가 소수점을 출력 못할 뿐,parseInt의 친구인parseFloat를 이용하면, 소수를 가진 문자열을 숫자로 변환할 수 있다.
console.log(parseFloat(decimalNum));// 20.2005
- 연산을 활용
- JavaScript 에서의
-연산의 특성을 확용하여 변환!
const string = "2020";
const strNum = string - 0; // "2020"에서 0을 빼? "2020"이 숫자인가 보네!
console.log(typeof string); // string
console.log(typeof strNum); // number🍎 + 는 어떻게 될까?
const string = "2020";
const strNum = string + 0; // "2020"이랑 0을 더해? 아 0이 문자인가보구나~ 20200이 되버림
console.log(typeof string); // string
console.log(typeof strNum); // stringNumber → String
toString()
number를 생성하는 함수!
⇒ 매개 변수로 문자열 타입의 숫자도 가질 수 있다. ("1234")
이 경우에, 문자열을 숫자로 변환해준다.
const numStr = 2020;
typeof(numStr.toString()); // string+ 연산을 활용
- JavaScript 에서의
+연산의 특성을 확용하여 변환!
const strNum = 2020;
const numStr = 2020 + ""; // 2020에 ""(빈문자열)을 더했네? 2020이 문자인가 보네!
console.log(typeof strNum); // number
console.log(typeof numStr); // string🍎 - 는 어떻게 될까?
const strNum = 2020;
const numStr = 2020 - "";
console.log(typeof strNum); // number
console.log(typeof numStr); // number