[JavaScript] 數字與數字的方法
JavaScript數字
JavaScript的數字只有一種型態。
數字可以有小數點也可以不用。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 34.00; // 小數點
var y = 34; // 整數
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
var x = 34.00 定義有小數點。
var y = 34 定義為整數。
x + "<br>" + y 顯示x的值，並換行(<br>)顯示y的值，x與y的值不管整數或有小數點都會顯示為整數。
用科學符號顯示數字:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 123e5; // 12300000
var y = 123e-5; // 0.00123
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
數字的整數最多可以到15位數:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 999999999999999; // 999999999999999
var y = 9999999999999999; // 10000000000000000
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
小數點最多可以到17位，不過小數點的運算並不是百分之百的正確。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 0.2 + 0.1;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
小數點0.2+0.1為0.30000000000000004，並不是準確的0.3。
可以用乘法與除法，來解決上面的問題:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = (0.2 * 10 + 0.1 * 10) / 10;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
十六進位
如果數字常量前面有0x，則JavaScript將其解釋為十六進制。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 0xFF;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
預設情況下，Javascript數字為十進位制。
可以用toString( )方法顯示數字的16進位、8進位、2進位。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var myNumber = 128;
document.getElementById("demo").innerHTML =
myNumber.toString(16) + "<br>"
+ myNumber.toString(8) + "<br>"
+ myNumber.toString(2);
</script>
</body>
</html>
Infinity
當Javscript的數字運算超過最大值時，會返回值Infinity(或-Infinity)。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var myNumber = 2;
var txt = "";
while(myNumber!=Infinity)
{
myNumber = myNumber * myNumber;
txt = txt + myNumber + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
var myNumber = 2 定義變數為數字2。
while(myNumber!=Infinity) 執行while迴圈，一直到數字大於最大值(Infinity)。
myNumber = myNumber * myNumber 數字相乘。
txt = txt + myNumber + "<br>" 將數字放進變數txt，並顯示於畫面上。
將數字除以0，也會顯示Infinity:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 2/0;
var y = -2/0;
document.getElementById("demo").innerHTML = x+"<br>"+y;
</script>
</body>
</html>
2/0時顯示Infinity，-2/0時顯示-Infinity。
雖然數字超過最大值時會顯示Infinity，不過Infinity仍然是Number的型態:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 2/0;
document.getElementById("demo").innerHTML = x+"為"+ typeof x;
</script>
</body>
</html>
var x = 2/0 為Infinity。
typeof x 表示x的型態。
不是數字時的顯示:NaN
NaN為英文Not A Number的縮寫。
當數字為不合理的是數字時，JavaScript會顯示NAN來表示。
如下用一個不是數字的值來做運算，便會顯示NAN:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 2/"字串";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
var x = 2/"字串" 用字串做運算，x的值為NAN。
用字串" "包覆數字來做運算:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 2/"10";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
var x = 2/"10" 在運算時，"10"會被轉換成數字10，x的值為2/10=0.2。
可以用JavaScript的內建function;isNaN( )來判斷值是否不為數字(is Not A Number):
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 2/"字串";
document.getElementById("demo").innerHTML = isNaN(x);
</script>
</body>
</html>
x = 2/"字串" ，變數x的值不是一個數字。
isNaN(x) ，因為x的值為NAN，isNaN()判斷為NAN時，會返回true。
若用值為NAN的變數做運算，其最後的值會顯示NAN:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = NaN;
var y = 10;
var sum = x + y;
document.getElementById("demo").innerHTML = sum;
</script>
</body>
</html>
NAN表示不合理的數字，不過NAN仍然是Number的型態:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 2 / "字串";
document.getElementById("demo").innerHTML = x+"為"+typeof x;
</script>
</body>
</html>
var x = 2 / "字串" 為NAN。
typeof x 表示x的型態。
數字可以為物件
數字的定義通常為:var x = 100。
也可以將數字定義為物件:var y = new Number(100)。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 100;
var y = new Number(100);
document.getElementById("demo").innerHTML = "x為" + typeof x
+ "<br>"
+ "y為" + typeof y ;
</script>
</body>
</html>
var x = 100 定義變數x位數字。
var y = new Number(100) 定義變數y為物件。
數字的方法
因為JavaScript的數字可以定義為物件，所以在JavaScript中的數字可以使用方法與屬性。
當數字執行方法或屬性時，會被當作物件執行。
toString( )
toString( ) : 以字串型態返回數字。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 100;
document.getElementById("demo").innerHTML =
x.toString() + "<br>" +
(100).toString() + "<br>" +
(50 + 50).toString();
</script>
</body>
</html>
x.toString() 將變數x返回100。
(100).toString() 將字串100返回100。
(50 + 50).toString() 將表達式50+50返回100。
取數字小數點
toFixed( )
toFixed( ) : 將數字顯示到指定的小數位數，並以字串顯示。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 123.456;
document.getElementById("demo").innerHTML =
x.toFixed(0) + "<br>" +
x.toFixed(2) + "<br>" +
x.toFixed(4) + "<br>" +
x.toFixed(6);
</script>
</body>
</html>
toFixed()方法的括號中參數表示取到小數點後幾位。
x.toFixed(0) 表示取數字123.456到小數點後第0位。
x.toFixed(2) 表示取數字123.456到小數點後第2位。
x.toFixed(4) 表示取數字123.456到小數點後第4位。
x.toFixed(6) 表示取數字123.456到小數點後第6位。
toPrecision( )
toPrecision( ) : 將數字顯示到指定的長度，並以字串顯示。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 123.456;
document.getElementById("demo").innerHTML =
x.toPrecision() + "<br>" +
x.toPrecision(3) + "<br>" +
x.toPrecision(6) + "<br>" +
x.toPrecision(9);
</script>
</body>
</html>
toPrecision()方法的括號中參數表示取數字的長度。
x.toPrecision() 表示取數字123.456完整長度。
x.toPrecision(3) 表示取數字123.456的前三位數字。
x.toPrecision(6) 表示取數字123.456的前六位數字。
x.toPrecision(9) 表示取數字123.456到前九位數字。
valueOf( )
valueOf( ) : 將數字以數字型態返回。
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 100;
document.getElementById("demo").innerHTML =
x.valueOf() + "<br>" +
(100).valueOf() + "<br>" +
(50 + 50).valueOf();
</script>
</body>
</html>
因為JavaScript的數字的型態可以為Number或物件， valueOf()能夠將其轉換為原始值。
x.valueOf() 將變數x返回100。
(100).valueOf() 將字串100返回100。
(50 + 50).valueOf() 將表達式50+50返回100。
將變數轉換為數字
JavaScript有三個方法可以將變數轉換為數字型態:
-
Number() 方法
-
parseInt() 方法
-
parseFloat() 方法
這三個方法不是數字的方法，而是JavaScript的方法。可以運用在任何型態的資料。
Number( )
Number( ) : 將變數轉換為數字型態。
<!DOCTYPE html>
<html>
<body>
<p>The global JavaScript function Number() converts variables to numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
Number(true) + "<br>" +
Number(false) + "<br>" +
Number(new Date()) + "<br>" +
Number(" 10") + "<br>" +
Number("10 ") + "<br>" +
Number("10 6");
</script>
</body>
</html>
Number(true) 若為true則為1。
Number(false) 若為false則為0。
Number(new Date()) 返回自1970.1.1起的毫秒數。
Number(" 10") 將字串" 10"中的數字10轉為數字型態。
Number("10 ") 將字串"10 "中的數字10轉為數字型態。
Number("10 6") 返回NAN，"10 6"不為合理的數字。
parseInt( )
parseInt( ) : 將字串中的第一個數字轉換為整數的數字型態。
<!DOCTYPE html>
<html>
<body>
<p>The global JavaScript function parseInt() converts strings to numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
parseInt("10") + "<br>" +
parseInt("10.33") + "<br>" +
parseInt("10 6") + "<br>" +
parseInt("10 years") + "<br>" +
parseInt("years 10");
</script>
</body>
</html>
parseInt("10") 將字串"10"轉換為整數10的數字。
parseInt("10.33") 將字串"10.33"轉換為整數10的數字。
parseInt("10 6") 將字串"10 6"中第一個字10轉換為整數10的數字。
parseInt("10 years") 將字串"10 years"中第一個字10轉換為整數10的數字。
parseInt("years 10") 返回NAN，"years 10"第一個字years不為合理的數字。
parseFloat( ) : 將字串中的第一個數字轉換為數字型態。
<!DOCTYPE html>
<html>
<body>
<p>The global JavaScript function parseFloat() converts strings to numbers:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
parseFloat("10") + "<br>" +
parseFloat("10.33") + "<br>" +
parseFloat("10 6") + "<br>" +
parseFloat("10 years") + "<br>" +
parseFloat("years 10");
</script>
</body>
</html>
parseFloat("10") 將字串"10"轉換為浮點數10的數字。
parseFloat("10.33") 將字串"10.33"轉換為浮點數10.33的數字。
parseFloat("10 6") 將字串"10 6"中第一個字10轉換為浮點數10的數字。
parseFloat("10 years") 將字串"10 years"中第一個字10轉換為浮點數10的數字。
parseFloat("years 10") 返回NAN，"years 10"第一個字years不為合理的數字。
