Números de JavaScript

Tabla de contenido

JavaScript tiene solo un tipo de número. Los números se pueden escribir con o sin decimales.

Ejemplo

let x = 3.14;    // A number with decimals
let y = 3;       // A number without decimals

Intentalo Tú mismo "

Los números muy grandes o muy pequeños se pueden escribir con notación científica (exponente):

Ejemplo

let x = 123e5;    // 12300000
let y = 123e-5;   // 0.00123

Intentalo Tú mismo "

Los números de JavaScript son siempre de coma flotante de 64 bits

A diferencia de muchos otros lenguajes de programación, JavaScript no define diferentes tipos de números, como enteros, cortos, largos, coma flotante, etc.

Los números de JavaScript siempre se almacenan como punto flotante de doble precisión números, siguiendo el estándar internacional IEEE 754.

Este formato almacena números en 64 bits, donde el número (la fracción) se almacena en bits 0 al 51, el exponente en los bits 52 al 62 y el signo en el bit 63:

Value (aka Fraction/Mantissa)	Exponent	Sign
52 bits (0 - 51)	11 bits (52 - 62)	1 bit (63)

Precisión entera

Los números enteros (números sin punto ni notación de exponente) tienen una precisión de hasta 15 dígitos.

Ejemplo

let x = 999999999999999;   // x will be 999999999999999
let y = 9999999999999999;  // y will be 10000000000000000

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>

<p>Integers (numbers without a period or exponent notation) are accurate up to 15 digits:</p>

<p id="demo"></p>

<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

El número máximo de decimales es 17.

Precisión flotante

La aritmética de coma flotante no siempre es 100% precisa:

let x = 0.2 + 0.1;

Intentalo Tú mismo "

Para resolver el problema anterior, es útil multiplicar y dividir:

let x = (0.2 * 10 + 0.1 * 10) / 10;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Floating point arithmetic is not always 100% accurate:</p>
<p id="demo1"></p>

<p>But it helps to multiply and divide:</p>

<p id="demo2"></p>

<script>
let x = 0.2 + 0.1;
document.getElementById("demo1").innerHTML = "0.2 + 0.1 = " + x;
let y = (0.2*10 + 0.1*10) / 10;
document.getElementById("demo2").innerHTML = "0.2 + 0.1 = " + y;
</script>

</body>
</html>

Agregar números y cadenas

ADVERTENCIA !!

JavaScript utiliza el operador + tanto para la suma como para la concatenación.

Se suman números. Las cadenas están concatenadas.

Si sumas dos números, el resultado será un número:

Ejemplo

let x = 10;
let y = 20;
let z = x + y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>If you add two numbers, the result will be a number:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = 20;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Si agrega dos cadenas, el resultado será una concatenación de cadenas:

Ejemplo

let x = "10";
let y = "20";
let z = x + y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>If you add two numeric strings, the result will be a concatenated string:</p>

<p id="demo"></p>

<script>
let x = "10";
let y = "20";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Si agrega un número y una cadena, el resultado será una concatenación de cadenas:

Ejemplo

let x = 10;
let y = "20";
let z = x + y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>If you add a number and a numeric string, the result will be a concatenated string:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "20";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Si agrega una cadena y un número, el resultado será una concatenación de cadenas:

Ejemplo

let x = "10";
let y = 20;
let z = x + y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>If you add a numeric string and a number, the result will be a concatenated string:</p>

<p id="demo"></p>

<script>
let x = "10";
let y = 20;
document.getElementById("demo").innerHTML = "The result is: " + x + y;
</script>

</body>
</html>

Un error común es esperar que este resultado sea 30:

Ejemplo

let x = 10;
let y = 20;
let z = "The result is: " + x + y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>A common mistake is to expect this result to be 30:</p>

<p id="demo"></p>

<script>
var x = 10;
var y = 20;
document.getElementById("demo").innerHTML =
"The result is: " + x + y;
</script>

</body>
</html>

Un error común es esperar que este resultado sea 102030:

Ejemplo

let x = 10;
let y = 20;
let z = "30";
let result = x + y + z;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>A common mistake is to expect this result to be 102030:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = 20;
let z = "30";
let result = x + y + z;
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

El intérprete de JavaScript funciona de izquierda a derecha.

Los primeros 10 + 20 se suman porque xey son ambos números.

Entonces se concatena 30 + "30" porque z es una cadena.

Cadenas numéricas

Las cadenas de JavaScript pueden tener contenido numérico:

let x = 100;         // x is a number

let y = "100";       // y is a 
string

JavaScript intentará convertir cadenas en números en todas las operaciones numéricas:

Esto funcionará:

let x = "100";
let y = "10";
let z = x / y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>JavaScript will try to convert strings to numbers when dividing:</p>

<p id="demo"></p>

<script>
let x = "100";
let y = "10";
let z = x / y;   
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Esto también funcionará:

let x = "100";
let y = "10";
let z = x * y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>JavaScript will try to convert strings to numbers when multiplying:</p>

<p id="demo"></p>

<script>
let x = "100";
let y = "10";
let z = x * y;   
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Y esto funcionará:

let x = "100";
let y = "10";
let z = x - y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>JavaScript will try to convert strings to numbers when subtracting:</p>

<p id="demo"></p>

<script>
let x = "100";
let y = "10";
let z = x - y;   
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Pero esto no funcionará:

let x = "100";
let y = "10";
let z = x + y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>JavaScript will NOT convert strings to numbers when adding:</p>

<p id="demo"></p>

<script>
let x = "100";
let y = "10";
let z = x + y;   
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

En el último ejemplo, JavaScript usa el operador + para concatenar las cadenas.

NaN - No es un número

NaN es una palabra reservada de JavaScript que indica que un número no es un número legal.

Intentar hacer aritmética con una cadena no numérica dará como resultado NaN (no es un Número):

Ejemplo

let x = 100 / "Apple";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>A number divided by a non-numeric string becomes NaN (Not a Number):</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 100 / "Apple";
</script>

</body>
</html>

Sin embargo, si la cadena es numérica, el resultado será un número:

Ejemplo

let x = 100 / "10";

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>A number divided by a numeric string becomes a number:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 100 / "10";
</script>

</body>
</html>

Puede utilizar la función global de JavaScript isNaN() para saber si un valor no es un número:

Ejemplo

let x = 100 / "Apple";
isNaN(x);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>You can use the global JavaScript function isNaN() to find out if a value is not a number:</p>

<p id="demo"></p>

<script>
let x = 100 / "Apple";
document.getElementById("demo").innerHTML = isNaN(x);
</script>

</body>
</html>

Cuidado con NaN. Si utiliza NaN en una operación matemática, el resultado también será NaN:

Ejemplo

let x = NaN;
let y = 5;
let z = x + y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>If you use NaN in a mathematical operation, the result will also be NaN:</p>

<p id="demo"></p>

<script>
let x = NaN;
let y = 5;
document.getElementById("demo").innerHTML = x + y;
</script>

</body>
</html>

O el resultado podría ser una concatenación como NaN5:

Ejemplo

let x = NaN;
let y = "5";
let z = x + y;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>If you use NaN in a mathematical operation, the result can be a concatenation:</p>

<p id="demo"></p>

<script>
let x = NaN;
let y = "5";
document.getElementById("demo").innerHTML = x + y;
</script>

</body>
</html>

NaN es un número: typeof NaN devuelve número:

Ejemplo

typeof NaN;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>The typeof NaN is number:</p>

<p id="demo"></p>

<script>
let x = NaN;
document.getElementById("demo").innerHTML = typeof x;
</script>

</body>
</html>

Infinidad

Infinity (o -Infinity) es el valor que JavaScript devolverá si calcula un número fuera del mayor número posible.

Ejemplo

let myNumber = 2;
// Execute until Infinity
while (myNumber != Infinity) {
    myNumber = myNumber * myNumber;
}

La división por 0 (cero) también genera Infinito:

Ejemplo

let x =  2 / 0;
let y = -2 / 0;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Division by zero generates Infinity;</p>

<p id="demo"></p>

<script>
let x = 2/0;
let y = -2/0;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>

</body>
</html>

Infinito es un número: tipo de Infinity devuelve número.

Ejemplo

typeof Infinity;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Infinity is a number:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = typeof Infinity;
</script>

</body>
</html>

hexadecimal

JavaScript interpreta las constantes numéricas como hexadecimales si están precedidas por 0x.

Ejemplo

let x = 0xFF;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Numeric constants, preceded by 0x, are interpreted as hexadecimal:</p>

<p id="demo"></p>

<script>
let x = 0xFF;
document.getElementById("demo").innerHTML = "0xFF = " + x;
</script>

</body>
</html>

Nunca escriba un número con un cero a la izquierda (como 07).
Algunas versiones de JavaScript interpretan Los números son octales si se escriben con un cero a la izquierda.

De forma predeterminada, JavaScript muestra los números como decimales de base 10.

Pero puedes usar el método toString() para generar números desde la base 2. a base 36.

El hexadecimal es base 16. El decimal es base 10. Octal es base 8. El binario es base 2.

Ejemplo

let myNumber = 32;
myNumber.toString(32);
myNumber.toString(16);
myNumber.toString(12);
myNumber.toString(10);
myNumber.toString(8);
myNumber.toString(2);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>The toString() method can output numbers from base 2 to 36:</p>

<p id="demo"></p>

<script>
let myNumber = 32;
document.getElementById("demo").innerHTML =
"Decimal 32 = " + "<br><br>" + 

"Hexatrigesimal (base 36): " + myNumber.toString(36) + "<br>" +
"Duotrigesimal (base 32): " + myNumber.toString(32) + "<br>" +
"Hexadecimal (base 16): " + myNumber.toString(16) + "<br>" +
"Duodecimal (base 12): " + myNumber.toString(12) + "<br>" +
"Decimal (base 10): " + myNumber.toString(10) + "<br>" +
"Octal (base 8): " + myNumber.toString(8) + "<br>" +
"Binary (base 2): " + myNumber.toString(2);
</script>

</body>
</html>

Números de JavaScript como objetos

Normalmente los números de JavaScript son valores primitivos creados a partir de literales:

let x = 123;

Pero los números también se pueden definir como objetos con la palabra clave new:

let y = new Number(123);

Ejemplo

let x = 123;
let y = new Number(123);

No cree objetos numéricos.

La palabra clave new complica el código y ralentiza la velocidad de ejecución.

Los objetos numéricos pueden producir resultados inesperados:

Cuando se utiliza el operador ==, x e y son iguales:

let x = 500;
let y = new Number(500);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Numbers and Number objects cannot be safely compared:</p>

<p id="demo"></p>

<script>
// x is a number
let x = 500;

// y is an object
let y = new Number(500);
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

Cuando se utiliza el operador ===, x e y no son iguales.

let x = 500;
let y = new Number(500);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>Numbers and Number objects cannot be safely compared:</p>

<p id="demo"></p>

<script>
// x is a number
let x = 500;

// y is an object
let y = new Number(500);

document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

Tenga en cuenta la diferencia entre (x==y) y (x===y).

(x == y) ¿verdadero o falso?

let x = new Number(500);
let y = new Number(500);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>JavaScript objects cannot be compared:</p>

<p id="demo"></p>

<script>
// x is an object
let x = new Number(500);

// y is an object
let y = new Number(500);

document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

(x === y) ¿verdadero o falso?

let x = new Number(500);
let y = new Number(500);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Numbers</h2>

<p>JavaScript objects cannot be compared:</p>

<p id="demo"></p>

<script>
// x is an object
let x = new Number(500);

// y is an object
let y = new Number(500);

document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

La comparación de dos objetos JavaScript siempre devuelve falso.

Referencia completa de números de JavaScript

Para obtener una referencia numérica completa, visite nuestro:

Referencia completa de números de JavaScript.

La referencia contiene descripciones y ejemplos de todas las propiedades y métodos de Number.