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
parseFloat과 Number는 변환하려는 문자열(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 그래픽스를 다루는 프로젝트입니다