Study/JavaScript

string, Number 변환

더 멋진 세상을 꿈꾸는 개발자 2020. 6. 24. 16:22

 

 

JS 언어의 특징 중 하나가 데이터 타입을 신경쓰지 않는다는 것이다. 

이것은 양날의 검이라고 할 수 있다. 

 

let a = '900';  
let b = 350; 
let c = Math.random(); 
let d = '5' + 5; 

console.log(typeof a);  // string
console.log(typeof b);  // number
console.log(typeof c);;  // number
console.log(typeof a);  //string

 

위와 같은 코드에서 우리는 당황할 것이다 

 

string인 '5'와 숫자인 5가 서로 더해질 수 있따고??? 😵

 

자바스크립트에서는 가능하다. 자바스크립트는 스스로 타입을 변동시켜 연산을 하기 때문이다.

 

심지어 아래의 상황은 프로그램을 잘 못 짜면 날 수 있는 상황이다.

 

console.log('200'+'10');  // 20010
console.log('200'-'10');  // 190
console.log(200+'11');  // 20011  -> number+string = string
console.log('200'+11);  // 20011  -> 위와 같은 원리
console.log('200'-'안녕');  // NaN  -> string끼리 -는 안됨.

 

위의 코드를 보면, string끼리 + 연산자는 가능하지만, -는 안되는 것을 알 수 있다.

 

그렇다면 아래의 코드를 다시한번 살펴보자. 

14세 미만의 사람이 가입했는지 확인하려면 아래의 코드가 필요하다. 

 

let birthYear = "2000";
let currentYear = 2019;
if (currentYear - birthYear < 14) {
  alert("가입할 수 없습니다.");
}

 

하나는 string, 하나는 number의 수학계산인데.. 

이번에는 오류가 없는 코드이다...

 

각각 어떤 결과가 나오는지 확인해보자. 

 

console.log(2019+"2000");  // 20192000
console.log(2019-"2000");  // 19

 

컴퓨터가 +의 양쪽을 보고 하나라도 string이 있으면 문자열로서 합쳐준다

 

그런데 -라면, string의 마이너스는 존재하지 않으므로, 양쪽의 값을 모두 숫자로 변환해서 계산해준다.

 

물론 위의 코드가 잘 동작되긴 하지만, 

함께 코드를 보는 동료가 충분히 오해할 수 있는 코드이다. 

 

계산이 잘 되더라도 텍스트로 표현된 숫자는, 꼭 숫자로 바꿔서 계산을 해주어야 한다. 

 

 

문자에서 숫자로 변환 할 때


방법 1. Number 함수 사용


다음과 같이 Number 함수를 사용해서 string에서 Number형으로 전환 할 수도 있다.

var birthYearInput = "2000";
console.log(typeof birthYearInput);

var numberBirthYear = Number(birthYearInput);
console.log(typeof numberBirthYear);

 

방법 2. parseInt, parseFloat 사용


parseInt("1.901");
parseFloat("1.901");
Number("1.901");
parseInt("200") + 1;

 

parseFloat( string )

  • 수로 시작할 때 그 수를 실수로 바꿉니다.
  • 띄어 쓰기로 여러 개의 수가 있으면 첫번째 수만 바꿉니다.
  • 공백으로 시작하면 공백은 무시합니다.
  • 수가 아닌 문자로 시작하면 NaN을 반환합니다.

parseInt( string, n )

  • string을 n진법일 때의 값으로 바꿉니다. n은 옵션으로 2부터 36까지 입력할 수 있습니다. 입력하지 않으면 10으로 처리합니다.
  • string의 처리는 parseFloat()와 거의 같습니다.
  • 소수 부분은 버립니다.
  • 0x로 시작하면 16진법으로 처리합니다.

 

방법 3. - 연산의 특성 활용

var numberAsNumber = "1234"; 
var numberAsString = numberAsNumber - 0;

console.log(numberAsNumber, typeof numberAsNumber);  // 1234 string
console.log(numberAsString, typeof numberAsString);  // 1234 'number'

 

 

 

숫자에서 문자열로 변환 할 때


방법 1. toString 사용


var numberAsNumber = 1234; 
var numberAsString = numberAsNumber.toString();

console.log(numberAsNumber, typeof numberAsNumber);
console.log(numberAsString, typeof numberAsString);

 

 

방법 2. + 연산의 특성 활용


var numberAsNumber = 1234; 
var numberAsString = 1234 + "";

console.log(numberAsNumber, typeof numberAsNumber);  // 1234 'number'
console.log(numberAsString, typeof numberAsString);  // 1234 string