search
HomeWeb Front-endJS TutorialDetailed explanation of JS numerical Number type (graphic tutorial)

This article mainly gives you a detailed analysis of the relevant knowledge points of the JavaScript numerical Number type. Friends who are interested in this can follow me to learn together.

Number Question

Can you answer all the following questions correctly?

  • 0.1 0.2 == 0.3 Is it true?

  • .e-5 means how much? How does

  • represent octal?

  • How to convert base?

  • How to convert a string into a numerical value or integer? What about the other way around? How to deal with hexadecimal?

  • What is the return value of parseInt(0x12, 16)? Is it 0x12?

  • Number.MAX_VALUE is the maximum value. What is (new Number(12)).MAX_VALUE?

  • How to round in JavaScript? How to preserve 3 decimal places of precision?

  • How to get a random number? How to round? How to round up?

Number number representation method

The Number type represents a number, and JavaScript uses the "double-precision 64-bit format defined by the IEEE 754 standard" ("double-precision 64 -bit format IEEE 754 values") represents numbers.

Unlike other programming languages ​​(such as C and Java), JavaScript does not distinguish between integer values ​​and floating point values. All numbers are represented by floating point values ​​in JavaScript, so special attention should be paid when performing numerical operations. Missing progress problem.

0.1 + 0.2 = 0.30000000000000004;
0.1 + 0.2 == 0.3; // false
// 浮点运算判断相等
var ACCURACY = 1e-5; //定义精度精确到0.00001
var a = 0.1;
var b = 0.2;
var sum = 0.3;
// 判断相差小于精度就认为相等
if (a + b - sum < ACCURACY) {
 console.log(&#39;a+b == sum&#39;);
}

In specific implementations, integer values ​​are usually treated as 32-bit integer variables. In individual implementations (such as some browsers), they are also stored in the form of 32-bit integer variables until it is Used to perform certain operations that are not supported by 32-bit integers. This is to facilitate bit operations.

You can omit 0 to represent decimals, or you can use exponential form to represent numbers

.9; // 0.9
1E3 // 1000
2e6 // 2000000
0.1e2 // 10
1e-5 // 0.00001

Number numbers in different bases

Representation methods of different bases

Number can use four numeric bases: decimal, binary, octal and hexadecimal. Only use integers for non-decimal numbers.

  • Binary representation: starting with zero, followed by a lowercase or uppercase Latin letter B (0b or 0B)

  • Octal notation: starting with 0. If the number after 0 is not in the range 0 to 7, the number will be converted to a decimal number.

  • The use of octal syntax is prohibited in ECMAScript 5 strict mode and will be treated as decimal

  • When using octal numbers in ECMAScript 6, you need to give A number is prefixed with "0o"

  • Hexadecimal notation: starting with zero, followed by a lowercase or uppercase Latin letter X (0x or 0X)

// 十进制
12345678
42
0777 // 在非严格格式下会被当做八进制处理 (用十进制表示就是511)
// 二进制
var a = 0b100000; // 32
var b = 0b0111111; // 63
var c = 0B0000111; // 7
// 八进制
var n = 0755; // 493
var m = 0644; // 420
var a = 0o10; // ES6 :八进制
// 十六进制
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
0x123456789ABCDEF // 81985529216486900
0XA    // 10

Conversion of different bases

Conversion of bases mainly uses the toString() method or parseInt() method of Number:

  • toString() method accepts an integer parameter with a value between 2 and 36 to specify the base. The default is decimal. Convert Number to String

  • parseInt() second The parameter accepts an integer parameter with a value between 2 and 36. The parameter specifies the base system. The default is decimal. Convert the String to Number

// toString转换,输入为Number,返回为String
var n = 120;
n.toString(); // "120"
n.toString(2); // "1111000"
n.toString(8); // "170"
n.toString(16); // "78"
n.toString(20); // "60"
0x11.toString(); // "17"
0b111.toString(); // "7"
0x11.toString(12);// "15"
// parseInt转换,输入为String,返回为Number
parseInt(&#39;110&#39;); // 110
parseInt(&#39;110&#39;, 2); // 6
parseInt(&#39;110&#39;, 8); // 72
parseInt(&#39;110&#39;, 16); // 272
parseInt(&#39;110&#39;, 26); // 702
// toString和parseInt结合使用可以在两两进制之间转换
// 将 a 从36进制转为12进制
var a = &#39;ra&#39;; // 36进制表示的数
parseInt(a, 36).toString(12); // "960"

Number objectNumber

Number object It is a built-in number object that encapsulates a series of Number-related constants and methods.

var na = Number(8); // 8
na = Number(&#39;9.5&#39;); // 9.5
na = new Number(&#39;9.3&#39;); // Number 对象,仅可以使用原型方法

Number object properties:

Number.MAX_VALUE The maximum representable value
Number.MIN_VALUE The smallest value that can be represented
Number.NaN Specially refers to "non-number"
Number.NEGATIVE_INFINITY Specifically refers to "negative infinity"; returns upon overflow
Number.POSITIVE_INFINITY Specifically refers to "positive infinity"; upon overflow, it returns
Number.EPSILON represents the distance between 1 and the smallest Number that is closest to 1 and greater than 1 The difference
Number.MIN_SAFE_INTEGER JavaScript minimum safe integer
Number.MAX_SAFE_INTEGER JavaScript maximum Safe integer

Number对象方法

Number对象方法可以使用 Number. 的形式调用,也可以使用全局调用。

Number.parseFloat() 把字符串参数解析成浮点数,左右等效于一元运算法+
Number.parseInt() 把字符串解析成特定基数对应的整型数字
Number.isFinite() 判断传递的值是否为有限数字
Number.isInteger() 判断传递的值是否为整数
Number.isNaN() 判断传递的值是否为 NaN
Number.isSafeInteger() 判断传递的值是否为安全整数

parseInt() 方法需要注意:

  • parseInt() 参数可以有两个参数:数字字符串和进制

  • 如果第一个参数为非指定进制的数字字符串,则结果为0

  • 如果第一个参数为非字符串,会首先调用该参数的toString()方法转换为字符串

  • 第一个参数中非指定进制可识别的字符会被忽略

  • 如果给定的字符串不存在数值形式,函数会返回一个特殊的值 NaN

  • 如果调用时没有提供第二个参数,则使用字符串表示的数字的进制

parseInt(&#39;123&#39;); // 123
parseInt(&#39;123&#39;, 10); // 123
parseInt(&#39;123&#39;, 8); // 83
parseInt(&#39;123&#39;, 16); // 291
parseInt("11", 2); // 3
parseInt(&#39;0x123&#39;, 10); // 0
parseInt(&#39;0x123&#39;, 16); // 291
parseInt(&#39;0x123&#39;); // 291
// 如果第一个参数不是字符串,会先把第一个参数转成字符串
parseInt(&#39;12&#39;, 16); // 18
parseInt(12, 16); // 18
// toString方法会将数字转换为10进制的字符串
parseInt(0xf, 16); // 21
0xf.toString(); // &#39;15&#39;
parseInt(&#39;15&#39;, 16); // 21
parseInt(&#39;23.56&#39;); // 23
parseInt("hello", 16); // NaN
parseInt("aello", 16); // 174

Number类型原型方法

Number类型原型上还有一些方法来对数字进度进行取舍,这些方法可以被 Number 实例对象调用:

toExponential() 返回一个数字的指数形式的字符串
toFixed() 返回指定小数位数的表示形式
toPrecision() 返回一个指定精度的数字

这些原型方法可以被Number实例对象调用:

var numObj = 12345.6789;
numObj.toExponential(); // "1.23456789e+4"
numObj.toExponential(2); // "1.23e+4"
numObj.toExponential(4); // "1.2346e+4"
numObj.toPrecision();  // "12345.6789"
numObj.toPrecision(2); // "1.2e+4"
numObj.toPrecision(4); // "1.235e+4"
numObj.toFixed();   // 返回 "12346":进行四舍五入,不包括小数部分
numObj.toFixed(1);  // 返回 "12345.7":进行四舍五入
numObj.toFixed(6);  // 返回 "12345.678900":用0填充
(1.23e+20).toFixed(2); // 返回 "123000000000000000000.00"
(1.23e-10).toFixed(2); // 返回 "0.00"
2.34.toFixed(1);   // 返回 "2.3"
-2.34.toFixed(1);   // 返回 -2.3 (由于操作符优先级,负数不会返回字符串)
(-2.34).toFixed(1);  // 返回 "-2.3" (若用括号提高优先级,则返回字符串)

数学对象(Math)

和Number相关的是,JavaScript对象中内置的Math对象,提供了很多数学常数和函数的属性和方法。

属性列表:

Math.E 欧拉常数,也是自然对数的底数, 约等于 2.718
Math.LN2 2的自然对数, 约等于0.693
Math.LN10 10的自然对数, 约等于 2.303
Math.LOG2E 以2为底E的对数, 约等于 1.443
Math.LOG10E 以10为底E的对数, 约等于 0.434
Math.PI 圆周率,一个圆的周长和直径之比,约等于 3.14159
Math.SQRT2 2的平方根,约等于 1.414
Math.SQRT1_2 1/2的平方根, 约等于 0.707

The trigonometric function sin and other parameters in Math are radians. If it is an angle, you can use it (Math.PI / 180)

##asin(), acos(), atan(), atan2()Inverse trigonometric function; return value is radianssinh(), cosh(), tanh()Hyperbolic trigonometric function; the return value is radians. asinh(), acosh(), atanh()Inverse hyperbolic trigonometric function; the return value is radians.##pow(), exp(), expm1( ), log10(), log1p(), log2()The above is the knowledge I compiled about the JS numerical Number type All the content clicked, I hope it will be helpful to everyone in the future.
Math.abs (x) Returns the absolute value of x
Math.sign(x) Returns the sign function of x to determine whether x is a positive number or a negative number Or 0
Math.random() Returns a pseudo-random number between 0 and 1
Math.floor (x) Returns the value of x after rounding up
Math.ceil(x) Returns the value of x after rounding up
Math.round(x) Returns the rounded integer.
Math.round(x) Returns the nearest single-precision floating point representation of the number
Math.trunc(x) Returns the integer part of x, removing the decimal number
Math.sqrt(x) Return the square root of x
Math.cbrt(x) Return Cube root of x
Math.hypot([x[,y[,…]]]) Returns the square root of the sum of the squares of its parameters
Math.pow(x,y) Return x raised to the power of y
min(), max() Return the smaller or larger value (respectively) from a comma-separated list of numeric arguments
sin(), cos(), tan() Standard trigonometric function; parameter is radians
Exponential and logarithmic functions

Related articles:

p5.

jsImplementing the Pythagorean tree (with code)

##js

Animation timer usage tutorial
How does JS store original values ​​and reference values

The above is the detailed content of Detailed explanation of JS numerical Number type (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Python vs. JavaScript: Choosing the Right Tool for the JobPython vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AM

Whether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.

Python and JavaScript: Understanding the Strengths of EachPython and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScript's Core: Is It Built on C or C  ?JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript Applications: From Front-End to Back-EndJavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

JavaScript Frameworks: Powering Modern Web DevelopmentJavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AM

The power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.

The Relationship Between JavaScript, C  , and BrowsersThe Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AM

Introduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr

Node.js Streams with TypeScriptNode.js Streams with TypeScriptApr 30, 2025 am 08:22 AM

Node.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.