HOWTO · jQuery

jQuery에서 문자열을 숫자로 변환

이 자습서는 jQuery를 사용하여 문자열을 숫자로 변환하는 방법을 보여줍니다.

작성자 Sheeraz Gul게시일 2023-06-21업데이트 2023-06-21

이 튜토리얼은 jQuery를 사용하여 문자열을 숫자로 변환하는 방법을 보여줍니다.

jQuery에서 문자열을 숫자로 변환

JavaScript 및 jQuery를 사용하여 문자열을 숫자로 변환하는 방법에는 여러 가지가 있습니다. JavaScript 메서드는 jQuery 코드와 함께 사용하여 문자열을 숫자로 변환할 수 있습니다.

문자열을 숫자로 변환하는 방법은 다음과 같습니다.

  1. 번호()
  2. 단항 연산자(+)
  3. 1을 곱한다
  4. 파싱인트()
  5. parseFloat()
  6. Math.floor()
  7. Math.ceil()

위의 모든 메서드는 jQuery에서 문자열을 숫자로 변환하는 데 사용할 수 있습니다.

Number()를 사용하여 jQuery에서 문자열을 숫자로 변환

Number() 메서드는 jQuery/JavaScript에서 문자열을 숫자로 변환하는 가장 쉽고 널리 사용되는 메서드입니다. Number() 메서드는 10진수를 포함하는 문자열과 특수 문자나 문자가 없는 문자열을 숫자로 변환할 수 있습니다. 그렇지 않으면 NaN을 반환합니다.

이 방법의 구문은 다음과 같습니다.

var number1 = Number(StringNumber);

StringNumber는 변환될 문자열의 숫자입니다.

예를 들어 보겠습니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Number()</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

</head>
<body>
 <div class="html-code-output">
<div id="div1">
  <p>The conversion result for xxxx format is: <b id="Converted1"></b></p>
  <p>The conversion result for xx,xxx format is: <b id="Converted2"></b></p>
  <p>The conversion result for xx.xx format is: <b id="Converted3"></b></p>
  <p>The conversion result for xx.xx format is: <b id="Converted4"></b></p>
  <p>The conversion result for "xxxx Delftstack" format is: <b id="Converted5"></b></p>
  <p>The conversion result for "Delftsackxxxx" format is: <b id="Converted6"></b></p>
</div>
</div>

<script>

    var number1 = Number('4422');      //it should return 4422
    $("#Converted1").text(number1);
    var number2 = Number('99,000')   //it should return NaN (Not a Number)
    $("#Converted2").text(number2);
    var number3 = Number('13.00')     //it should return 13
    $("#Converted3").text(number3);
    var number4 = Number('13.21')     //it should return 13.21
    $("#Converted4").text(number4);
    var number5 = Number('1000 Delftstack')    //it should return NaN (Not a Number)
    $("#Converted5").text(number5);
    var number6 = Number('Delftstack10')      //it should return NaN (Not a Number)
    $("#Converted6").text(number6);

</script>
</body>
</html>

위의 코드는 jQuery에서 Number() 메서드를 사용하여 문자열에 주어진 숫자를 숫자 형식으로 변환합니다. 출력 참조:

The conversion result for xxxx format is: 4422

The conversion result for xx,xxx format is: NaN

The conversion result for xx.00 format is: 13

The conversion result for xx.xx format is: 13.21

The conversion result for "xxxx Delftstack" format is: NaN

The conversion result for "Delftsackxxxx" format is: NaN

단항 연산자(+)를 사용하여 jQuery에서 문자열을 숫자로 변환

단항 연산자 +는 jQuery 또는 JavaScript에서 문자열을 숫자로 변환하는 가장 빠른 방법인 숫자로 변환하기 위해 문자열 앞에 사용할 수 있습니다. 단항 연산자는 하나의 피연산자에서 작동합니다.

이 방법의 구문은 다음과 같습니다.

var number = +'xx,xxx'

여기서 xx,xxx는 숫자 문자열이고 +는 단항 연산자입니다.

예를 들어 보겠습니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Unary Operator</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

</head>
<body>
 <div class="html-code-output">
<div id="div1">
  <p>The conversion result for xxxx format is: <b id="Converted1"></b></p>
  <p>The conversion result for xx,xxx format is: <b id="Converted2"></b></p>
  <p>The conversion result for xx.00 format is: <b id="Converted3"></b></p>
  <p>The conversion result for xx.xx format is: <b id="Converted4"></b></p>
  <p>The conversion result for "xxxx Delftstack" format is: <b id="Converted5"></b></p>
  <p>The conversion result for "Delftsackxxxx" format is: <b id="Converted6"></b></p>
</div>
</div>

<script>

    var number1 = +'4422';
    $("#Converted1").text(number1);
    var number2 = +'99,000'
    $("#Converted2").text(number2);
    var number3 = +'13.00'
    $("#Converted3").text(number3);
    var number4 = +'13.21'
    $("#Converted4").text(number4);
    var number5 = +'100.01 Delftstack'
    $("#Converted5").text(number5);
    var number6 = +'Delftstack10'
    $("#Converted6").text(number6);


</script>

</body>
</html>

단항 연산자는 Number() 메서드와 유사하게 작동합니다. 숫자 문자열의 특수 문자나 문자를 받아들이고 NaN을 반환합니다.

출력을 참조하십시오.

The conversion result for xxxx format is: 4422

The conversion result for xx,xxx format is: NaN

The conversion result for xx.00 format is: 13

The conversion result for xx.xx format is: 13.21

The conversion result for "xxxx Delftstack" format is: NaN

The conversion result for "Delftsackxxxx" format is: NaN

jQuery에서 문자열을 숫자로 변환하려면 1을 곱하십시오.

jQuery 또는 Javascript에서 문자열에 숫자를 곱하면 결과를 숫자로 변환하려고 시도합니다. 이 경우 임의의 문자열에 1을 곱하여 숫자로 변환할 수 있으며, 가능한 경우 문자열을 숫자로 변환합니다.

이 방법의 구문은 다음과 같습니다.

var number = 'xx,xxx' * 1

예를 들어 보겠습니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Multiply by One</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

</head>
<body>
 <div class="html-code-output">
<div id="div1">
  <p>The conversion result for xxxx format is: <b id="Converted1"></b></p>
  <p>The conversion result for xx,xxx format is: <b id="Converted2"></b></p>
  <p>The conversion result for xx.00 format is: <b id="Converted3"></b></p>
  <p>The conversion result for xx.xx format is: <b id="Converted4"></b></p>
  <p>The conversion result for "xxxx Delftstack" format is: <b id="Converted5"></b></p>
  <p>The conversion result for "Delftsackxxxx" format is: <b id="Converted6"></b></p>
</div>
</div>

<script>

    var number1 = '4422' * 1;
    $("#Converted1").text(number1);
    var number2 = '99,000' * 1;
    $("#Converted2").text(number2);
    var number3 = '13.00' * 1;
    $("#Converted3").text(number3);
    var number4 = '13.21' * 1;
    $("#Converted4").text(number4);
    var number5 = '100.01 Delftstack' * 1;
    $("#Converted5").text(number5);
    var number6 = 'Delftstack10' * 1;
    $("#Converted6").text(number6);


</script>

</body>
</html>

이 메서드는 단항 연산자 및 Number() 메서드와 유사하게 작동합니다. 출력을 참조하십시오.

The conversion result for xxxx format is: 4422

The conversion result for xx,xxx format is: NaN

The conversion result for xx.00 format is: 13

The conversion result for xx.xx format is: 13.21

The conversion result for "xxxx Delftstack" format is: NaN

The conversion result for "Delftsackxxxx" format is: NaN

parseInt()를 사용하여 jQuery에서 문자열을 숫자로 변환

parseInt() 메서드는 jQuery를 사용하여 문자열을 정수로 변환할 수 있습니다. parseInt()는 문자열을 정수로 변환할 수 있습니다. 즉, 십진수 또는 기타 특수 문자는 무시합니다.

이 방법의 구문은 다음과 같습니다.

var number = parseInt(StringNumber)

StringNumber는 숫자로 변환될 문자열입니다.

예를 들어 보겠습니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Parse Int</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

</head>
<body>
 <div class="html-code-output">
<div id="div1">
  <p>The conversion result for xxxx format is: <b id="Converted1"></b></p>
  <p>The conversion result for xx,xxx format is: <b id="Converted2"></b></p>
  <p>The conversion result for xx.00 format is: <b id="Converted3"></b></p>
  <p>The conversion result for xx.xx format is: <b id="Converted4"></b></p>
  <p>The conversion result for "xxxx Delftstack" format is: <b id="Converted5"></b></p>
  <p>The conversion result for "Delftsackxxxx" format is: <b id="Converted6"></b></p>
</div>
</div>

<script>

    var number1 = parseInt('4422');
    $("#Converted1").text(number1);
    var number2 = parseInt('99,000')
    $("#Converted2").text(number2);
    var number3 = parseInt('13.00')
    $("#Converted3").text(number3);
    var number4 = parseInt('13.21')
    $("#Converted4").text(number4);
    var number5 = parseInt('1000 Delftstack')
    $("#Converted5").text(number5);
    var number6 = parseInt('Delftstack10')
    $("#Converted6").text(number6);


</script>

</body>
</html>

위의 코드는 별도의 숫자를 찾으면 문자열에서 십진수 및 기타 문자를 무시합니다.

출력을 참조하십시오.

The conversion result for xxxx format is: 4422

The conversion result for xx,xxx format is: 99

The conversion result for xx.xx format is: 13

The conversion result for xx.xx format is: 13

The conversion result for "xxxx Delftstack" format is: 1000

The conversion result for "Delftsackxxxx" format is: NaN

parseFloat()를 사용하여 jQuery에서 문자열을 숫자로 변환

parseFloat() 메소드는 문자열을 십진수가 포함된 숫자로 변환하는 데 사용됩니다. 이 메서드는 parseInt와 유사하게 작동하지만 소수점 이하 숫자를 반환합니다.

이 방법의 구문은 다음과 같습니다.

var number = parseFloat(StringNumber)

예를 들어 보겠습니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Parse Float</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

</head>
<body>
 <div class="html-code-output">
<div id="div1">
  <p>The conversion result for xxxx format is: <b id="Converted1"></b></p>
  <p>The conversion result for xx,xxx format is: <b id="Converted2"></b></p>
  <p>The conversion result for xx.00 format is: <b id="Converted3"></b></p>
  <p>The conversion result for xx.xx format is: <b id="Converted4"></b></p>
  <p>The conversion result for "xxxx Delftstack" format is: <b id="Converted5"></b></p>
  <p>The conversion result for "Delftsackxxxx" format is: <b id="Converted6"></b></p>
</div>
</div>

<script>

    var number1 = parseFloat('4422');
    $("#Converted1").text(number1);
    var number2 = parseFloat('99,000')
    $("#Converted2").text(number2);
    var number3 = parseFloat('13.00')
    $("#Converted3").text(number3);
    var number4 = parseFloat('13.21')
    $("#Converted4").text(number4);
    var number5 = parseFloat('100.01 Delftstack')
    $("#Converted5").text(number5);
    var number6 = parseFloat('Delftstack10')
    $("#Converted6").text(number6);


</script>
</body>
</html>

이 코드는 문자열에서 소수점을 찾을 때마다 문자열을 소수점이 있는 숫자로 변환합니다. 출력을 참조하십시오.

The conversion result for xxxx format is: 4422

The conversion result for xx,xxx format is: 99

The conversion result for xx.00 format is: 13

The conversion result for xx.xx format is: 13.21

The conversion result for "xxxx Delftstack" format is: 100.01

The conversion result for "Delftsackxxxx" format is: NaN

Math.floor를 사용하여 jQuery에서 문자열을 숫자로 변환

Math.floor 메서드는 jQuery에서 문자열을 숫자로 변환할 때 숫자의 정수 부분만 반환합니다. 이 메서드는 하나의 매개변수를 사용합니다.

Math.floor의 구문은 다음과 같습니다.

var number = Math.floor(StringNumber)

예를 들어 보겠습니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Math Floor</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

</head>
<body>
 <div class="html-code-output">
<div id="div1">
  <p>The conversion result for xxxx format is: <b id="Converted1"></b></p>
  <p>The conversion result for xx,xxx format is: <b id="Converted2"></b></p>
  <p>The conversion result for xx.00 format is: <b id="Converted3"></b></p>
  <p>The conversion result for xx.xx format is: <b id="Converted4"></b></p>
  <p>The conversion result for "xxxx Delftstack" format is: <b id="Converted5"></b></p>
  <p>The conversion result for "Delftsackxxxx" format is: <b id="Converted6"></b></p>
</div>
</div>

<script>

    var number1 = Math.floor('4422');
    $("#Converted1").text(number1);
    var number2 = Math.floor('99,000')
    $("#Converted2").text(number2);
    var number3 = Math.floor('13.00')
    $("#Converted3").text(number3);
    var number4 = Math.floor('13.21')
    $("#Converted4").text(number4);
    var number5 = Math.floor('100.01 Delftstack')
    $("#Converted5").text(number5);
    var number6 = Math.floor('Delftstack10')
    $("#Converted6").text(number6);


</script>

</body>
</html>

위의 코드는 올바른 숫자 형식의 문자열만 변환합니다. Number() 메서드와 마찬가지로 문자열의 특수 문자나 문자를 허용하지 않습니다.

출력을 참조하십시오.

The conversion result for xxxx format is: 4422

The conversion result for xx,xxx format is: NaN

The conversion result for xx.00 format is: 13

The conversion result for xx.xx format is: 13

The conversion result for "xxxx Delftstack" format is: NaN

The conversion result for "Delftsackxxxx" format is: NaN

Math.ceil을 사용하여 jQuery에서 문자열을 숫자로 변환

Math.ceil은 Math.floor 메소드와 유사하지만 주어진 숫자를 다음으로 큰 정수로만 반올림합니다.

이 방법의 구문은 다음과 같습니다.

var number = Math.ceil(StringNumber)

예를 들어 보겠습니다.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Math Ceil</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

</head>
<body>
 <div class="html-code-output">
<div id="div1">
  <p>The conversion result for xxxx format is: <b id="Converted1"></b></p>
  <p>The conversion result for xx,xxx format is: <b id="Converted2"></b></p>
  <p>The conversion result for xx.00 format is: <b id="Converted3"></b></p>
  <p>The conversion result for xx.xx format is: <b id="Converted4"></b></p>
  <p>The conversion result for "xxxx Delftstack" format is: <b id="Converted5"></b></p>
  <p>The conversion result for "Delftsackxxxx" format is: <b id="Converted6"></b></p>
</div>
</div>

<script>

    var number1 = Math.ceil('4422');
    $("#Converted1").text(number1);
    var number2 =Math.ceil('99,000')
    $("#Converted2").text(number2);
    var number3 = Math.ceil('13.00')
    $("#Converted3").text(number3);
    var number4 = Math.ceil('13.21')
    $("#Converted4").text(number4);
    var number5 = Math.ceil('100.01 Delftstack')
    $("#Converted5").text(number5);
    var number6 = Math.ceil('Delftstack10')
    $("#Converted6").text(number6);


</script>
</body>
</html>

위의 코드는 십진수를 반올림하여 주어진 문자열을 숫자로 변환합니다. 문자열에 특수 문자나 문자를 허용하지 않습니다. 출력 참조:

The conversion result for xxxx format is: 4422

The conversion result for xx,xxx format is: NaN

The conversion result for xx.00 format is: 13

The conversion result for xx.xx format is: 14

The conversion result for "xxxx Delftstack" format is: NaN

The conversion result for "Delftsackxxxx" format is: NaN

작성자 소개

Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

작성자 프로필 보기
LinkedInFacebook