JavaScript / parseInt·parseFloat·Number 차이와 숫자 변환

parseFloat()는 문자열 앞부분에서 소수로 해석할 수 있는 값을, parseInt()는 정수로 해석할 수 있는 값을 읽습니다. 두 함수는 숫자가 아닌 문자를 만나면 거기서 멈출 수 있습니다. 문자열 전체가 숫자인지 확인하려면 Number()로 변환한 뒤 결과와 입력 조건을 검증하세요.

parseFloat()와 parseInt()의 기본 차이

parseFloat("12.5px")는 앞의 12.5를 반환합니다. parseInt("12.5px", 10)은 소수점 앞의 12에서 멈춥니다. parseInt()는 소수점을 버리는 일반적인 반올림 함수가 아니라 문자열을 앞에서부터 정수로 해석하는 함수입니다.

console.log(parseFloat('12.5px')); // 12.5
console.log(parseInt('12.5px', 10)); // 12
console.log(parseInt('-12.9', 10)); // -12 (0 쪽으로 잘림)

parseInt()의 두 번째 인수는 진법입니다. 십진 정수를 읽는다면 10을 명시하세요. 16진 문자열을 읽을 때는 parseInt("ff", 16)처럼 16을 사용합니다. MDN의 parseFloat() 문서와 parseInt() 문서에서 허용 문법을 확인할 수 있습니다.

문자열 전체를 검사할 때는 Number()

Number("12.5px")는 뒤의 px 때문에 NaN이 됩니다. 반면 Number("12.5")는 12.5입니다. 입력 전체가 숫자여야 하는 폼에서는 이 차이가 중요합니다.

빈 문자열을 Number()에 그대로 넘기면 0이 되므로 빈 입력은 별도로 막아야 합니다. 변환 실패 여부는 Number.isNaN()으로, 무한대까지 제외하려면 Number.isFinite()로 확인하세요. MDN의 Number() 문서를 참고하세요.

어떤 방식을 선택할까

문자열 앞에서 숫자와 단위를 분리해야 하고 단위 형식을 따로 검증한다면 parseFloat()가 유용합니다. 정수 표기나 다른 진법을 읽는다면 parseInt()에 진법을 명시합니다. 일반 사용자 입력에서 전체 문자열이 하나의 숫자여야 한다면 Number()와 빈 값·유한성 검사를 함께 사용하세요.

예를 들어 CSS 길이 문자열 "12.5px"에서 숫자만 취할 때 parseFloat()는 12.5를 반환하지만 "12.5unknown"도 똑같이 12.5가 됩니다. 따라서 단위가 허용되는지 별도로 확인하지 않으면 잘못된 입력을 받아들일 수 있습니다.

전체 예제: 세 변환 결과 비교

아래 코드를 parse-number.html로 저장해 브라우저에서 엽니다. 문자열을 입력하고 버튼을 누르면 parseFloat(), 십진 parseInt(), Number()의 결과를 나란히 보여 줍니다. 변환에 실패하면 NaN으로 표시합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>문자열의 숫자 변환 비교</title>
</head>
<body>
<label for="value">변환할 문자열</label>
<input id="value" value="12.5px">
<button id="compare" type="button">세 방식 비교</button>
<pre id="result" aria-live="polite"></pre>
<script>
const input = document.querySelector('#value');
const result = document.querySelector('#result');

function label(value) {
  return Number.isNaN(value) ? 'NaN (변환 실패)' : String(value);
}

function compare() {
  const text = input.value.trim();
  if (text === '') {
    result.textContent = '빈 문자열이 아닌 값을 입력하세요.';
    return;
  }
  result.textContent = [
    `parseFloat: ${label(parseFloat(text))}`,
    `parseInt(10): ${label(parseInt(text, 10))}`,
    `Number: ${label(Number(text))}`
  ].join('\n');
}

document.querySelector('#compare').addEventListener('click', compare);
compare();
</script>
</body>
</html>

기본값 12.5px는 각각 12.5, 12, NaN입니다. 12.5로 바꾸면 12.5, 12, 12.5가 됩니다. 공백만 입력하면 숫자로 해석하지 않고 안내 문구를 보여 줍니다. 이 화면은 동작을 비교하는 실습이므로 실제 폼에서는 허용할 숫자 형식을 먼저 정해 그 형식에 맞게 검증하세요.