본문 바로가기

javascript, typescript

Javascript 문자열 숫자로 바꾸기 ( String to Number )

 

code137.5 (creative coding lab)

한태재

javascript / typescript에서 문자열을 숫자로 바꾸는 7가지 방법

 

 

1. parseInt - 문자를 소수점을 제외한 숫자로 변경

// 변수 st를 정수 num으로 변환
const st = "137.5";
const num = parseInt(st);

console.log(typeof num)
console.log(num)

-> number
-> 137

 

2. parseFloat - 문자를 소수자리를 포함한 숫자로 변경

const st = "137.5";
const num = parseFloat(st);

console.log(typeof num)
console.log(num)

-> number
-> 137.5

 

3. Number - 문자를 소수자리 포함한 숫자로 변경

const st = "137.5";
const num = Number(st);

console.log(typeof num)
console.log(num)

-> number
-> 137.5

 


parseFloatNumber는 변환하려는 문자열(string)이 숫자만 포함되어 있으면 똑같이 작동하지만

숫자가 아닌 다른 문자열이 포함되어있거나 빈 문자열이 포함되어 있으면 다르게 작동한다

const st = "137.5lab";
const pfnum = parseFloat(st);
const num = Number(st);

console.log(pfnum)
console.log(num)

-> 137.5
-> NaN

문자열(string) 앞에 숫자가 있고 뒤에 숫자가 아닌 다른 문자가 있을 경우

parseFloat은 앞의 숫자만 인식하여 그 숫자를 Number는 NaN(not a number)를 반환한다

const st = "xx137.5";
const pfnum = parseFloat(st);
const num = Number(st);

console.log(pfnum)
console.log(num)

-> NaN
-> NaN

문자열(string) 맨 앞에 다른 문자가 있을 경우 parseFloat Number 둘다 Number는 NaN(not a number)를 반환한다

 

const st = "";
const pfnum = parseFloat(st);
const num = Number(st);

console.log(pfnum)
console.log(num)

-> NaN
-> 0

빈 문자열 일경우 parseFloat은 NaN(not a number)을 Number는 0을 반환한다

 

 

4. Math.floor - 뒤에 소수자리 버림

5. Math.ceil -  뒤에 소수자리  올림

6. Math.round -  뒤에 소수자리  반올림

const st = "137.5";
const f_num = Math.floor(st);
const c_num = Math.ceil(st);
const r_num = Math.round(st);

console.log(f_num)
console.log(c_num)
console.log(r_num)

-> 137
-> 138
-> 138

 

*참고로 위의 처럼 하면 typescript에서는 빨간줄이 그어지므로 string을 Number로 변환해서 사용해야 한다. 

 

7. 사칙 연산자 사용 ( 더하기, 1 곱하기, 1 나누기 )

const st = "137.5";
const a_num = +st;
const m_num = st * 1;
const d_num = st / 1;

console.log(typeof a_num)
console.log(typeof m_num)
console.log(typeof d_num)
console.log(a_num)
console.log(m_num)
console.log(d_num)

-> number
-> number
-> number
-> 137.5
-> 137.5
-> 137.5

*참고로 위의 처럼 하면 typescript에서는 빨간줄이 그어지므로 string을 Number로 변환해서 사용해야 한다. 

 

위 처럼 string에 +연산자, 1 곱하기, 1 나누기를 사용하면 문자열을 숫자로 바꿀 수 있다.

하지만 코드 가독성에서는 좋지 않아보인다.

 


정리하자면 7가지 정도가 있지만 1,2,3번에서 사용하는 것이 좋아 보입니다.

 

1. parseInt - 문자를 소수점을 제외한 숫자로 변경

2. parseFloat - 문자를 소수자리를 포함한 숫자로 변경

3. Number - 문자를 소수자리 포함한 숫자로 변경


4. Math.floor- 뒤에 소수자리 버림

5. Math.ceil -  뒤에 소수자리  올림

6. Math.round-  뒤에 소수자리  반올림

7. 사칙 연산자 사용 ( 더하기, 1 곱하기, 1 나누기 )

 

 


code137.5 (creative coding lab)

한태재

10년차 크리에이티브 디벨로퍼 / 웹 그래픽 엔지니어 / 프론트엔드 개발자

로서 가장 좋아하는 작업은 (HTML5)에서 2D/3D Canvas 그래픽스를 다루는 프로젝트입니다