前端-JavaScript1-6——JavaScript之變數型別的轉換
6.1 string → number
先來學習一個語句，這個語句和alert差不多，也是彈窗，彈的是輸入框：
| 1 prompt("請輸入你的電話","139"); |
這些小功能，就叫做程式給我們提供的API，每個API都有自己不同的語法。
| 1 prompt(“提示文字”,”預設值”); |
預設值可以省略。
可以把使用者輸入的值，存入變數：
| 1 var a = prompt("請輸入你的電話","139"); 2 alert("哈哈，你輸入的電話是" + a); |
用prompt接收的任何東西都是字串，哪怕使用者輸入了一個數字，也是字串的數字。
好了，下面附上程式碼
prompt的樣子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type="text/javascript"> // 輸入框 // 第一步先讓輸入電話號碼，存入變數 // var a = prompt("請輸入你的電話","139"); // //第二步顯示使用者輸入的電話 // alert("哈哈，你輸入的電話是" + a);//計算器 //第1步讓使用者先輸入第1個數字 var a = prompt("請輸入第1個數字啊"); //第2步讓使用者先輸入第2個數字 var b = prompt("請輸入第2個數字啊啊"); //第3步求和 var sum = parseFloat(a) + parseFloat(b); //第4步彈出結果 alert(sum); </script> </head> <body> </body> </html>
有一些方法可以將記憶體中表示一個數字的字串轉換為對應的數字
parseInt()和parseFloat()。
parseInt就是將一個string轉為一個整數，不四捨五入，直接擷取整數部分。如果這個string有亂七八糟的東西，那麼就擷取前面數字部分。
| 1 var a = "123"; 2 var b = parseInt(a); //parseInt就把字串123轉為數字123了 3 console.log(b); 4 console.log(typeof b); |
下面的例項結果都是123，最後一個是-123：
| 1 parseInt("123") //123 2 parseInt("123.6") //123 3 parseInt("123年都會很愛你") //123 4 parseInt("123年11月") //123 5 parseInt("123px") //123 6 parseInt("-123.99999999") //-123 |
parseInt()不僅僅能夠進行一個轉為整數，更能進行一個進位制的轉換，把任何進位制的數字，都換為10進位制。
進位制和要轉換的字串，用逗號隔開。
下面的運算結果都是15：
| 1 parseInt(15,10) 2 parseInt(17,8) 3 parseInt(1111,2) 4 parseInt("0xf",16) 5 parseInt("f",16) 6 parseInt(16,9) 7 parseInt("15e6",10) 8 parseInt("15*6",10) |
parseInt如果不能轉，那麼就返回NaN
| 1 parseInt("Hello", 8); 2 parseInt("546", 2); 3 parseInt("三百六十五"); |
得到NaN的方法又多了一種，上午講的是6/0得到Infinity。0/0得到NaN。
parseInt的樣子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type="text/javascript"> // var a = "123"; // var b = parseInt(a); //parseInt就把字串123轉為數字123了 // console.log(b); // console.log(typeof b); // console.log(parseInt("123")); //123 // console.log(parseInt("123.6")); //123 // console.log(parseInt("123年都會很愛你")); //123 // console.log(parseInt("123年11月")); //123 // console.log(parseInt("123px")); //123 // console.log(parseInt("-123.99999999")); //-123 // 下面的結果都是15 // console.log(parseInt(15,10)); // console.log(parseInt(17,8)); // console.log(parseInt(1111,2)); // console.log(parseInt("0xf",16)); // console.log(parseInt("f",16)); // console.log(parseInt(16,9)); // console.log(parseInt("15e6",10)); // console.log(parseInt("15*6",10)); //NaN console.log(parseInt("三百六十五")); </script> </head> <body> </body> </html>
parseFloat就是將字串轉為浮點數
儘可能的將一個字串轉為浮點數，浮點數之後如果有亂七八糟的內容，直接捨棄。
| 1 <script type="text/javascript"> 2 var a = "123.67.88"; 3 var b = parseFloat(a); 4 console.log(b); 5 </script> |
也就是說，數字型別都是number，不分整數和浮點數，但是轉換的時候分。
parseFloat的樣子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type="text/javascript"> // var a = "123.67.88"; // var b = parseFloat(a); // console.log(b); console.log(parseFloat("123.67年")); //123.67 console.log(parseFloat("哈哈123.67年")); //NaN </script> </head> <body> </body> </html>
5.2 number → string
將一個數字，與一個空字串進行連字元運算，那麼就是自動轉為字串了。
| 1 var a = 123; 2 var b = a + ""; 3 console.log(b); 4 console.log(typeof b); |
轉型的樣子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <script type="text/javascript"> var a = 123; var b = a + ""; console.log(b); console.log(typeof b); </script> </head> <body> </body> </html>
over，next！