หมายเลขจาวาสคริปต์

สารบัญ

JavaScript มีตัวเลขเพียงประเภทเดียวเท่านั้น ตัวเลขสามารถเขียนโดยมีหรือไม่มีทศนิยมก็ได้

ตัวอย่าง

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

ลองมัน ตัวคุณเอง "

ตัวเลขขนาดใหญ่หรือเล็กพิเศษสามารถเขียนด้วยสัญลักษณ์ทางวิทยาศาสตร์ (เลขชี้กำลัง):

ตัวอย่าง

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

ลองมัน ตัวคุณเอง "

หมายเลข JavaScript เป็นจุดลอยตัว 64 บิตเสมอ

ต่างจากภาษาโปรแกรมอื่นๆ มากมาย JavaScript ไม่ได้กำหนดตัวเลขประเภทต่างๆ เช่น จำนวนเต็ม สั้น ยาว จุดลอยตัว ฯลฯ

หมายเลข JavaScript จะถูกจัดเก็บเป็นจุดลอยตัวที่มีความแม่นยำสองเท่าเสมอ ตามมาตรฐาน IEEE 754 สากล

รูปแบบนี้ เก็บตัวเลขในรูปแบบ 64 บิต โดยที่ตัวเลข (เศษส่วน) จะถูกเก็บไว้ในบิต 0 ถึง 51 เลขชี้กำลังในบิต 52 ถึง 62 และเครื่องหมายในบิต 63:

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

ความแม่นยำจำนวนเต็ม

จำนวนเต็ม (ตัวเลขที่ไม่มีจุดหรือสัญลักษณ์ยกกำลัง) มีความแม่นยำสูงสุด 15 หลัก

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

จำนวนทศนิยมสูงสุดคือ 17

ความแม่นยำแบบลอยตัว

เลขคณิตจุดลอยตัวไม่ได้แม่นยำ 100% เสมอไป:

let x = 0.2 + 0.1;

ลองมัน ตัวคุณเอง "

ในการแก้ปัญหาข้างต้น การคูณและหารจะช่วยได้:

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

ลองด้วยตัวคุณเอง →

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

การบวกตัวเลขและสตริง

คำเตือน !!

JavaScript ใช้ตัวดำเนินการ + สำหรับทั้งการบวกและการต่อข้อมูล

มีการเพิ่มตัวเลข สตริงถูกต่อกัน

หากคุณบวกตัวเลขสองตัว ผลลัพธ์จะเป็นตัวเลข:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

หากคุณเพิ่มสองสตริง ผลลัพธ์จะเป็นการต่อสตริง:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

หากคุณเพิ่มตัวเลขและสตริง ผลลัพธ์จะเป็นการต่อสตริง:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

หากคุณเพิ่มสตริงและตัวเลข ผลลัพธ์จะเป็นการต่อสตริง:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

ข้อผิดพลาดทั่วไปคือการคาดหวังผลลัพธ์นี้ให้เป็น 30:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

ข้อผิดพลาดทั่วไปคือการคาดหวังผลลัพธ์นี้ให้เป็น 102030:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

ล่าม JavaScript ทำงานจากซ้ายไปขวา

เพิ่ม 10 + 20 แรกเนื่องจาก x และ y เป็นตัวเลขทั้งคู่

จากนั้น 30 + "30" จะถูกต่อกันเนื่องจาก z เป็นสตริง

สตริงตัวเลข

สตริง JavaScript สามารถมีเนื้อหาที่เป็นตัวเลข:

let x = 100;         // x is a number

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

JavaScript จะพยายามแปลงสตริงเป็นตัวเลขในการดำเนินการตัวเลขทั้งหมด:

สิ่งนี้จะได้ผล:

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

ลองด้วยตัวคุณเอง →

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

สิ่งนี้จะได้ผลเช่นกัน:

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

ลองด้วยตัวคุณเอง →

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

และสิ่งนี้จะได้ผล:

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

ลองด้วยตัวคุณเอง →

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

แต่สิ่งนี้จะไม่ทำงาน:

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

ลองด้วยตัวคุณเอง →

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

ในตัวอย่างสุดท้าย JavaScript ใช้ตัวดำเนินการ + เพื่อเชื่อมสตริงเข้าด้วยกัน

NaN - ไม่ใช่ตัวเลข

NaN เป็นคำสงวน JavaScript ที่ระบุว่าตัวเลขไม่ใช่ตัวเลขตามกฎหมาย

การพยายามคำนวณด้วยสตริงที่ไม่ใช่ตัวเลขจะส่งผลให้ NaN (ไม่ใช่ ตัวเลข):

ตัวอย่าง

let x = 100 / "Apple";

ลองด้วยตัวคุณเอง →

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

อย่างไรก็ตาม หากสตริงเป็นตัวเลข ผลลัพธ์จะเป็น a ตัวเลข:

ตัวอย่าง

let x = 100 / "10";

ลองด้วยตัวคุณเอง →

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

คุณสามารถใช้ฟังก์ชัน JavaScript ส่วนกลางได้ isNaN() เพื่อดูว่าค่าไม่ใช่ตัวเลขหรือไม่:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

โปรดระวัง NaN หากคุณใช้ NaN ในการดำเนินการทางคณิตศาสตร์ ผลลัพธ์จะเป็น NaN เช่นกัน:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

หรือผลลัพธ์อาจเป็นการต่อข้อมูลเช่น NaN5:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!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 คือตัวเลข: typeof NaN ส่งคืน number:

ตัวอย่าง

typeof NaN;

ลองด้วยตัวคุณเอง →

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

อินฟินิตี้

Infinity (หรือ -Infinity) คือค่าที่ JavaScript จะส่งกลับหากคุณคำนวณตัวเลขที่อยู่นอกค่าที่ใหญ่ที่สุด หมายเลขที่เป็นไปได้

ตัวอย่าง

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

การหารด้วย 0 (ศูนย์) จะสร้าง Infinity:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

Infinity คือตัวเลข: typeof Infinity ส่งคืน number.

ตัวอย่าง

typeof Infinity;

ลองด้วยตัวคุณเอง →

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

เลขฐานสิบหก

JavaScript ตีความค่าคงที่ตัวเลขเป็นเลขฐานสิบหกหากนำหน้าด้วย 0x.

ตัวอย่าง

let x = 0xFF;

ลองด้วยตัวคุณเอง →

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

อย่าเขียนตัวเลขโดยมีศูนย์นำหน้า (เช่น 07)
JavaScript บางเวอร์ชันตีความได้ ตัวเลขเป็นฐานแปดหากเขียนด้วยศูนย์นำหน้า

ตามค่าเริ่มต้น JavaScript จะแสดงตัวเลขเป็นทศนิยม ฐาน 10

แต่คุณสามารถใช้เมธอด toString() เพื่อส่งออกตัวเลขจาก ฐาน 2 ถึง ฐาน 36

เลขฐานสิบหกคือ ฐาน 16 ทศนิยมคือ ฐาน 10 ฐานแปดคือ ฐาน 8 ไบนารี่คือ ฐาน 2

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

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

หมายเลข JavaScript เป็นวัตถุ

โดยปกติตัวเลข JavaScript จะเป็นค่าดั้งเดิมที่สร้างขึ้นจากตัวอักษร:

let x = 123;

แต่ตัวเลขยังสามารถกำหนดเป็นวัตถุที่มีคำหลัก ใหม่:

let y = new Number(123);

ตัวอย่าง

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

อย่าสร้างวัตถุ Number

คำหลัก ใหม่ ทำให้โค้ดซับซ้อนและทำให้ความเร็วในการดำเนินการช้าลง

วัตถุตัวเลขสามารถสร้างผลลัพธ์ที่ไม่คาดคิด:

เมื่อใช้ตัวดำเนินการ == x และ y จะ เท่ากัน:

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

ลองด้วยตัวคุณเอง →

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

เมื่อใช้ตัวดำเนินการ === x และ y ไม่เท่ากัน

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

ลองด้วยตัวคุณเอง →

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

สังเกตความแตกต่างระหว่าง (x==y) และ (x===y)

(x == y) จริงหรือเท็จ?

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

ลองด้วยตัวคุณเอง →

<!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) จริงหรือเท็จ?

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

ลองด้วยตัวคุณเอง →

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

การเปรียบเทียบวัตถุ JavaScript สองรายการ เสมอ จะส่งกลับค่า false

อ้างอิงหมายเลข JavaScript ให้สมบูรณ์

สำหรับการอ้างอิงหมายเลขที่สมบูรณ์ โปรดไปที่:

อ้างอิงหมายเลข JavaScript ให้สมบูรณ์

ข้อมูลอ้างอิงประกอบด้วยคำอธิบายและตัวอย่างของคุณสมบัติและวิธีการ Number ทั้งหมด