jQueryで文字列を数値に変換する

  2. プログラミングのヒント
  3. jQuery ハウツー
  4. jQueryで文字列を数値に変換する
Sheeraz Gul 2023年6月21日
jQuery jQuery String
  1. jQuery で文字列を数値に変換する
  2. Number() を使用して、jQuery で文字列を数値に変換する
  3. 単項演算子 (+) を使用して、jQuery で文字列を数値に変換する
  4. jQueryで1を掛けて文字列を数値に変換する
  5. jQuery で parseInt() を使用して文字列を数値に変換する
  6. jQuery で parseFloat() を使用して文字列を数値に変換する
  7. jQuery で Math.floor を使用して文字列を数値に変換する
  8. Math.ceil を使用して、jQuery で文字列を数値に変換する
jQueryで文字列を数値に変換する

このチュートリアルでは、jQuery を使用して文字列を数値に変換する方法を示します。

jQuery で文字列を数値に変換する

JavaScript と jQuery を使用して文字列を数値に変換するには、いくつかの方法があります。 JavaScript メソッドを jQuery コードと一緒に使用して、文字列を数値に変換できます。

文字列を数値に変換するメソッドには、次のものがあります。

  1. 数値()
  2. 単項演算子 (+)
  3. 1 を掛ける
  4. parseInt()
  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 で文字列を数値に変換する最速の方法です。 単項演算子は 1つのオペランドで動作します。

このメソッドの構文は次のとおりです。

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

jQuery で parseInt() を使用して文字列を数値に変換する

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

jQuery で parseFloat() を使用して文字列を数値に変換する

parseFloat() メソッドは、文字列を 10 進数のある数値に変換するために使用されます。 このメソッドは parseInt と同様に機能しますが、10 進数を含む数値を返します。

このメソッドの構文は次のとおりです。

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

jQuery で Math.floor を使用して文字列を数値に変換する

Math.floor メソッドは、jQuery で文字列を数値に変換するときに、数値の整数部分のみを返します。 このメソッドは 1つのパラメーターを取ります。

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>

上記のコードは、指定された文字列を 10 進数を切り上げて数値に変換します。 文字列内の特殊文字や文字は受け入れません。 出力を参照してください:

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 Gul avatar Sheeraz Gul avatar

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.

LinkedIn Facebook

関連記事 - jQuery String