JavaScript / 함수 / Number() - 문자열을 숫자로 변환하는 함수

Number(value)는 문자열 등을 숫자로 변환합니다. 문자열 전체가 숫자 형식으로 해석될 수 없으면 NaN을 반환하지만, 빈 문자열이나 공백만 있는 문자열은 0이 되므로 입력 검사 없이 변환하면 안 됩니다.

변환 결과와 예외적인 입력

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

NaN은 “Not a Number”의 약자로 숫자 계산이 유효하지 않다는 뜻입니다. 다만 typeof NaN은 "number"이므로 자료형 확인만으로는 검증이 되지 않습니다. Number.isNaN()은 NaN인지, Number.isFinite()는 NaN과 양·음의 무한대를 제외한 유한한 숫자인지 검사합니다. Number()의 변환 규칙과 Number.isFinite()의 검사 범위를 함께 확인하세요.

전체 예제: 빈 값부터 검사하기

아래 코드를 UTF-8의 number-example.html로 저장해 브라우저로 여세요. trim()으로 앞뒤 공백을 없앤 뒤 빈 값을 먼저 검사하고, 그다음 변환한 숫자가 유한한지 확인합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Number() 입력값 검사</title>
  <style>
    body { margin: 24px; font: 16px/1.7 sans-serif; }
    input, button, select { font: inherit; max-width: 100%; }
    label { display: block; margin-top: 12px; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<label for="value">변환할 문자열</label>
<input id="value" type="text" value="12.5">
<button id="convert" type="button">숫자로 변환</button>
  <pre id="output" aria-live="polite"></pre>
  <script>
    function convert() {
      const text = document.getElementById("value").value.trim();
      const output = document.getElementById("output");
      if (text === "") {
        output.textContent = "값을 입력하세요.";
        return;
      }
      const number = Number(text);
      if (!Number.isFinite(number)) {
        output.textContent = "유한한 숫자로 변환할 수 없습니다.";
        return;
      }
      output.textContent = `값: ${number} / 자료형: ${typeof number} / 2를 더한 값: ${number + 2}`;
    }
    document.getElementById("convert").addEventListener("click", convert);
    convert();
  </script>
</body>
</html>

처음에는 값: 12.5 / 자료형: number / 2를 더한 값: 14.5가 표시됩니다. 공백만 입력하면 입력 안내가, 12px나 Infinity를 입력하면 변환 실패 안내가 나옵니다. 문자열 "1" + "2"는 "12"지만, 두 값을 각각 Number()로 변환한 뒤 더하면 3입니다.

Number(), parseInt(), parseFloat()의 차이

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

Number("12.5")         // 12.5
parseInt("12.5", 10)    // 12

parseInt()와 parseFloat()는 앞부분부터 숫자를 읽다가 해석할 수 없는 문자를 만나면 멈춥니다. 단위가 있는 CSS 값에서 숫자 부분만 얻는 경우와, 사용자가 입력한 전체 문자열을 검증하는 경우를 구분하세요. 정수를 파싱할 때는 parseInt(text, 10)처럼 진수를 명시할 수 있습니다. parseFloat()의 파싱 설명에 이 차이가 정리되어 있습니다.

입력 형식과 정밀도까지 확인하기

• Number()는 16진수나 지수 표기도 허용합니다. 일반적인 십진수 입력만 받을 목적이라면 변환 전에 별도의 형식 검사 규칙을 적용하세요.
• "1,000" 같은 구분 기호가 있는 입력은 쉼표 위치를 검증한 뒤 숫자로 바꾸는 방법으로 처리하세요. 모든 문자를 무조건 제거하면 잘못된 입력도 정상 값으로 바뀔 수 있습니다.
• 계산할 정수가 안전한 범위 안에 있는지는 Number.isSafeInteger()로 검사합니다. 큰 정수는 이미 Number로 변환하는 순간 정확한 자릿수를 잃을 수 있으므로 원본 문자열을 보관하세요.
• new Number()는 숫자 객체를 만들므로 일반적인 변환에는 사용하지 않습니다.