본문 바로가기
기초 및 언어/▶ JavaScript&JQuery

3. JavaScript_숫자변환

by 류딩이 2025. 9. 8.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문자열 숫자 변환</title>
</head>
<body>
  <h2>문자열 → 숫자 변환 비교</h2>
  <script>
    let su = prompt("정수를 입력하세요"); // 입력값은 항상 문자열

    document.write("<p><b>입력값:</b> " + su + "</p>");

    // 문자열 → 숫자 변환 방법
    document.write("<h3>1) 변환 방식 비교</h3>");
    document.write("su + 1 → " + (su + 1) + "<br>");
    document.write("parseInt(su) + 1 → " + (parseInt(su) + 1) + "<br>");
    document.write("Number(su) + 1 → " + (Number(su) + 1) + "<br>");
    document.write("(+su) + 1 → " + ((+su) + 1) + "<br>");
    document.write("eval(su) + 1 → " + (eval(su) + 1) + "<br>");

    // 소수점 문자열
    document.write("<h3>2) 소수점 문자열 '1.73' + 1</h3>");
    document.write("parseInt('1.73') + 1 → " + (parseInt("1.73") + 1) + "<br>");
    document.write("Number('1.73') + 1 → " + (Number("1.73") + 1) + "<br>");
    document.write("(+'1.73') + 1 → " + ((+"1.73") + 1) + "<br>");
    document.write("eval('1.73') + 1 → " + (eval("1.73") + 1) + "<br>");

    // 수식 문자열
    document.write("<h3>3) 수식 문자열 '3+5' + 1</h3>");
    document.write("parseInt('3+5') + 1 → " + (parseInt("3+5") + 1) + "<br>");
    document.write("Number('3+5') + 1 → " + (Number("3+5") + 1) + "<br>");
    document.write("(+'3+5') + 1 → " + ((+'3+5') + 1) + "<br>");
    document.write("eval('3+5') + 1 → " + (eval("3+5") + 1) + "<br>");
  </script>
</body>
</html>

✅ 핵심 요약

  • 문자열 그대로 더하기 → "3" + 1 = 31
  • parseInt() → 정수만 변환, 소수점 이하 버림
  • Number(), + → 숫자(정수/실수) 변환
  • eval() → 문자열을 식으로 실행 (보안상 권장 X)