JavaScript / Number()로 문자열을 숫자로 변환하고 검사하기

Number(value)는 문자열 등 전달한 값을 숫자 기본형으로 변환합니다. 숫자로 해석할 수 없는 문자열은 NaN이 되지만, 빈 문자열과 공백만 있는 문자열은 0이 됩니다. 사용자 입력을 계산에 쓰려면 빈 값·변환 실패·허용할 숫자 형식을 따로 확인하세요.

Number()가 반환하는 값

문자열 전체가 하나의 숫자로 해석되어야 합니다. 앞뒤 공백은 무시하지만 숫자 뒤에 단위나 쉼표가 붙으면 NaN이 됩니다. 결과의 자료형은 성공 여부와 관계없이 number입니다.

Number("12.5")       // 12.5
Number(" 12.5 ")     // 12.5
Number("12px")       // NaN
Number("1,000")      // NaN
Number("")           // 0
Number("   ")        // 0
typeof Number("bad") // "number"

문자열 외의 값도 변환할 수 있습니다. 특히 null과 undefined는 결과가 다르므로 누락된 값을 곧바로 Number()에 전달하지 않도록 주의하세요.

인수를 생략한 Number()도 0을 반환합니다. 이 동작과 BigInt의 변환 규칙은 MDN의 Number() 문서에서 확인할 수 있습니다.

사용자 입력을 검사하는 순서

입력창의 값은 문자열입니다. 먼저 trim()으로 양끝 공백을 제거하고 빈 문자열인지 확인한 다음, 필요한 경우 허용할 형식을 검사합니다. 마지막으로 Number()로 변환하고 Number.isFinite()로 NaN과 무한대를 거릅니다. Number.isFinite()는 문자열을 자동 변환하지 않으므로 숫자로 변환한 결과에 적용해야 합니다.

const text = input.value.trim();
if (text === "") {
  // 빈 값을 0으로 잘못 받아들이지 않기
} else {
  const value = Number(text);
  if (Number.isFinite(value)) {
    // 유한한 숫자로 변환됨
  }
}

예제의 십진수 전용 선택지는 부호와 소수점을 허용하지만 지수 표기·16진수·쉼표는 거부합니다. 일반적인 Number()의 규칙보다 좁은, 이 입력창의 규칙입니다. 허용할 자리수나 소수 자릿수 같은 업무 규칙이 있다면 별도로 검사해야 합니다.

전체 예제: 변환과 십진수 제한 비교

아래 코드를 UTF-8로 number-example.html에 저장해 브라우저로 엽니다. 기본 상태에서 0x10을 입력하면 16으로 바뀝니다. 이어서 ‘십진수 형식만 허용’을 선택하고 다시 검사하면 형식 오류가 나옵니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Number() 입력값 검사</title>
</head>
<body>
<label for="value">변환할 문자열</label>
<input id="value" type="text" value="12.5">
<label><input id="decimal-only" type="checkbox"> 십진수 형식만 허용</label>
<button id="convert" type="button">검사하기</button>
<button id="reset" type="button">처음으로</button>
<pre id="output" aria-live="polite"></pre>
<script>
const input = document.querySelector('#value');
const decimalOnly = document.querySelector('#decimal-only');
const output = document.querySelector('#output');

function checkValue() {
  const text = input.value.trim();
  if (text === '') {
    output.textContent = '값을 입력하세요.';
    return;
  }

  // 이 화면에서 허용할 십진수 형식: 부호, 정수, 소수(지수 표기는 제외)
  const decimalPattern = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/;
  if (decimalOnly.checked && !decimalPattern.test(text)) {
    output.textContent = '십진수 형식으로 입력하세요.';
    return;
  }

  const number = Number(text);
  if (!Number.isFinite(number)) {
    output.textContent = '유한한 숫자로 변환할 수 없습니다.';
    return;
  }

  if (/^[+-]?\d+$/.test(text) && !Number.isSafeInteger(number)) {
    output.textContent = '안전한 정수 범위를 벗어났습니다. 원본 문자열을 확인하세요.';
    return;
  }

  output.textContent = `값: ${number}\n자료형: ${typeof number}\n2를 더한 값: ${number + 2}`;
}

document.querySelector('#convert').addEventListener('click', checkValue);
document.querySelector('#reset').addEventListener('click', () => {
  input.value = '12.5';
  decimalOnly.checked = false;
  checkValue();
});
checkValue();
</script>
</body>
</html>

처음 화면에는 값: 12.5, 자료형: number, 2를 더한 값: 14.5가 표시됩니다. 공백만 입력하면 입력 안내가, 12px와 Infinity는 변환 실패 안내가 나옵니다. 9007199254740993처럼 안전한 정수 범위를 벗어난 십진 정수는 계산에 쓰기 전에 원본 문자열을 다시 확인하도록 막습니다. ‘처음으로’를 누르면 입력값과 선택지가 복원됩니다.

이 예제는 형식과 유한성, 안전한 정수 범위를 보여 주지만 소수 계산의 정확성까지 보장하지는 않습니다. 예를 들어 0.1 + 0.2는 이진 부동소수점 표현 때문에 정확히 0.3으로 비교되지 않을 수 있습니다.

parseInt()·parseFloat()와 선택 기준

Number()는 전체 문자열을 숫자로 해석합니다. parseInt()와 parseFloat()는 앞부분부터 읽다가 숫자로 해석할 수 없는 문자를 만나면 멈춥니다. 따라서 단위가 붙은 값을 의도적으로 분리하는 경우가 아니라면, 입력값 검증에 부분 파싱 결과만 사용하지 마세요.

Number("12.5px")       // NaN
parseInt("12.5px", 10)  // 12
parseFloat("12.5px")    // 12.5
Number("1e3")          // 1000
parseInt("1e3", 10)    // 1

정수를 읽을 때는 parseInt(text, 10)처럼 진수를 명시하고, 전체가 정수 형식인지 별도 검사하세요. 큰 정수는 Number()로 바꾸는 순간 자릿수가 달라질 수 있습니다. Number.isSafeInteger()의 범위를 확인하고, 정확한 큰 정수가 필요하다면 원본 문자열을 보관해 BigInt 등 적절한 표현을 검토하세요.

쉼표가 있는 숫자를 처리해야 한다면 천 단위 구분 쉼표의 위치를 확인하는 방법처럼 입력 형식을 먼저 검증하세요. 모든 쉼표를 지우기만 하면 "1,00" 같은 잘못된 입력도 정상 숫자로 바뀝니다. 일반적인 형 변환에는 숫자 객체를 만드는 new Number() 대신 Number()를 사용합니다.