Convertir cadena a número en jQuery

  2. HowTo
  3. jQuery Howtos
  4. Convertir cadena a número en jQuery
Sheeraz Gul 21 junio 2023
jQuery jQuery String
  1. Convertir una cadena en un número en jQuery
  2. Use Number() para convertir una cadena en un número en jQuery
  3. Utilice el operador unario (+) para convertir cadenas en números en jQuery
  4. Multiplique por 1 para convertir cadena en número en jQuery
  5. Use parseInt() para convertir cadenas en números en jQuery
  6. Use parseFloat() para convertir cadenas en números en jQuery
  7. Use Math.floor para convertir cadenas en números en jQuery
  8. Use Math.ceil para convertir cadenas en números en jQuery
Convertir cadena a número en jQuery

Este tutorial demuestra cómo convertir una cadena en un número usando jQuery.

Convertir una cadena en un número en jQuery

Existen varios métodos para convertir una cadena en un número utilizando JavaScript y jQuery. Los métodos de JavaScript se pueden usar junto con el código jQuery para convertir una cadena en un número.

Los métodos para convertir la cadena en un número incluyen:

  1. Número()
  2. Operador unario (+)
  3. Multiplica por 1
  4. parseInt()
  5. parseFloat()
  6. Piso.matemático()
  7. Matemáticas.ceil()

Todos los métodos anteriores se pueden usar en jQuery para convertir la cadena en un número.

Use Number() para convertir una cadena en un número en jQuery

El método Number() es el método más fácil y más utilizado para convertir una cadena en un número en jQuery/JavaScript. El método Number() puede convertir cadenas con números decimales y cadenas sin caracteres especiales o letras a números; de lo contrario, devolverá NaN.

La sintaxis de este método es:

var number1 = Number(StringNumber);

El StringNumber es el número de la cadena que se convertirá.

Probemos un ejemplo:

<!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>

El código anterior convertirá los números dados en cadenas al formato de número usando el método Number() con jQuery. Ver salida:

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

Utilice el operador unario (+) para convertir cadenas en números en jQuery

El operador unario + se puede usar antes de cualquier cadena para convertirla en un número, que es la forma más rápida de convertir una cadena en un número en jQuery o JavaScript. Los operadores unarios operan en un operando.

La sintaxis de este método es:

var number = +'xx,xxx'

Donde xx,xxx es una cadena de números y + es un operador unario.

Probemos un ejemplo:

<!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>

El operador unario funciona de manera similar al método Número(). Aceptará cualquier carácter especial o letra en la cadena de números para aquellos y devolverá NaN.

Ver la salida:

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

Multiplique por 1 para convertir cadena en número en jQuery

En jQuery o Javascript, cuando multiplicamos una cadena por un número, intentará convertir el resultado en un número. En este caso, podemos multiplicar cualquier cadena por 1 para convertirla en un número y, si es posible, la cadena se convertirá en un número.

La sintaxis de este método es:

var number = 'xx,xxx' * 1

Probemos un ejemplo:

<!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>

Este método también funcionará de manera similar al operador unario y al método Número(). Ver la salida:

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

Use parseInt() para convertir cadenas en números en jQuery

El método parseInt() puede convertir cadenas en números enteros usando jQuery. El parseInt() puede convertir una cadena en un número entero, lo que significa que ignorará el decimal o cualquier otro carácter especial.

La sintaxis de este método es:

var number = parseInt(StringNumber)

StringNumber es la cadena que se convertirá en un número.

Probemos un ejemplo:

<!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>

El código anterior ignorará el decimal y otros caracteres en la cadena si encuentra un número separado.

Ver la salida:

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

Use parseFloat() para convertir cadenas en números en jQuery

El método parseFloat() se utiliza para convertir una cadena en un número con un decimal. Este método funciona de manera similar a parseInt, pero devuelve un número con un decimal.

La sintaxis de este método es:

var number = parseFloat(StringNumber)

Probemos un ejemplo:

<!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>

El código convertirá la cadena en un número con un decimal siempre que encuentre un decimal en la cadena. Ver la salida:

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

Use Math.floor para convertir cadenas en números en jQuery

El método Math.floor devolverá solo la parte entera del número al convertir una cadena en un número en jQuery. El método toma un parámetro.

La sintaxis de Math.floor es:

var number = Math.floor(StringNumber)

Probemos un ejemplo:

<!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>

El código anterior solo convertirá las cadenas con el formato de número correcto. No acepta el carácter especial o letra en la cadena, al igual que el método Number().

Ver la salida:

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

Use Math.ceil para convertir cadenas en números en jQuery

El método Math.ceil es similar al método Math.floor, pero solo redondeará el número dado al siguiente número entero más grande.

La sintaxis de este método es:

var number = Math.ceil(StringNumber)

Probemos un ejemplo:

<!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>

El código anterior convertirá la cadena dada en un número redondeando el número decimal. No aceptará caracteres especiales o letras en la cadena. Ver salida:

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
Autor: 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

Artículo relacionado - jQuery String