ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • string, Number 변환
    Study/JavaScript 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
    

    'Study > JavaScript' 카테고리의 다른 글

    function 함수의 형태와 구성  (0) 2020.06.25
    날짜와 시간  (0) 2020.06.24
    slice  (0) 2020.06.24
    배열의 최소값 구하기:: for문 알아보기  (0) 2020.06.24
    web API :: Navigator  (0) 2020.06.13

    댓글

Designed by Tistory.