iT邦幫忙

2023 iThome 鐵人賽

DAY 30
0
自我挑戰組

從0到有學習JavaScript系列 第 30

第三章 型別、值和變數 型別轉換 explicit conversion

  • 分享至 

  • xImage
  •  

(一)Number.prototype.toString()
Number與toString()方法連用,可接受一個額外引數(下面範例的radix),如果沒有指定引數,轉換會以10進位進行。

radix: 可以填入其他基數,範圍2-36之間,來轉換數字。

toString()
toString(radix)
let n = 17;
let binary = "0b" + n.toString(2);    //binary == "0b100001"
let octal = "0o" + n.toString(8);     //octal == "0o21"
let hex = "0x" + n.toString(16);      //hex == "0x11"

(二)JavaScript 中不同類型的值在進行數字轉換時的行為,請搭配昨日文章內容:JS型別轉換表

  • 數字(Number)保持不變。
  • undefined 被轉換為 NaN。
  • null 被轉換為 0。
  • true 被轉換為 1,false 被轉換為 0。
  • 字串(Strings)通過解析它們,就好像它們包含一個數字文字。解析失敗將導致 NaN。與實際數字文字相比,存在一些細微差異:
    • 開頭和結尾的「空格」或「換行符號」被忽略。
    • 開頭的 0 數字不會導致該數字變成八進位(或在嚴格模式下被拒絕)。
    • 字串開頭的 + 和 - 字元用於指示數字的正負。+-符號只能出現一次,且後面不有空格。
    • Infinity 和 -Infinity 被識別為字面值。實際上,它們是全域變數。
    • 空白或只包含空白的字串將被轉換為 0。
    • 不允許使用數字分隔符。
  • BigInt 會引發 TypeError,以防止意外的隱藏轉換,導致精確度流失。
  • 符號(Symbols)會引發 TypeError。
  • 對象(Objects)會先調用 convert to a primitive 它們的 @@toPrimitive 方法(帶有 "number" 作為提示)、valueOf() 方法和 toString() 方法,依次進行轉換為原始值,生成的原始值會轉換為數字。

總結來說,這段文字描述了不同類型的值如何在數字上下文中進行轉換,以及它們的轉換行為。這對於理解 JavaScript 中的類型轉換非常重要。

介紹Number定義的三個方法,進行數字對字串的轉換。

  • toFixed()
  • toExponential()
  • toPrecision()
let n = 123456.789;
n.toFixed(0);       //"123457"
n.toFixed(2);       //"123456.79"
n.toFixed(5);       //"123456.78900"
n.toExponential(1);   //"1.2e+5"
n.toExponential(3);   //"1.235e+5"
n.toPrecision(4);     //"1.235e+5"
n.toPrecision(7);     //"123456.8"
n.toPrecision(10);    //"123456.78900"

(三) 概略介紹Number.parseFloat()Number.parseInt()
Number.parseFloat()Number.parseInt() 是 JavaScript 中用於將字符串轉換為數字的方法,它們與 Number() 方法類似,但有一些不同的規則。parseInt() 無法辨認小數點、parseFloat() 無法辨認前綴詞"0x"。

  • parseFloat()
  1. 無法辨認前綴詞"0x",故回傳0
  2. 整數和服點數皆能頗析
  3. 跳過前導空白字元,並忽略後面接的任何東西
  4. 第一個字元不是有效的數值字面值,回傳NaN
Number.parseFloat("3.14");     //3.14 正常回傳數字
Number.parseFloat("0x10");     //0    無法辨認前綴詞0x,故回傳0
  • parseInt()
  1. Number.parseInt()用於解析整數的字符串,並回傳一個整數(即去掉小數部分的數字)
  2. radix範圍為2-36的數字,如無設定數字,便以10進位為基準,除了number本身開頭是0x0X,代表16進位數字
  3. 跳過前導空白字元,並忽略後面接的任何東西
  4. 第一個字元不是有效的數值字面值,回傳NaN
Number.parseInt(string)
Number.parseInt(string, radix)
Number.parseInt("42");     //執行結果:42
Number.parseInt("0x11");   //執行結果:17 17轉換成16進位為0x11

parseInt()與radix:

parseInt("11", 2);     
// 3:(1*2+1) 
// 將字串 "11" 視為二進制數,因此它的值為 3,因為二進制中的 11 相當於十進制的 3。

parseInt("ff", 16);    
// 255: (15*16+15)
// 將字串 "ff" 視為十六進制數,因此它的值為 255,因為十六進制中的 ff 相當於十進制的 255。ff 表示 15*16 + 15。

parseInt("zz", 36);    
// 1295:(35*36+35)
// 將字串 "zz" 視為三十六進制數,因此它的值為 1295,因為三十六進制中的 zz 相當於十進制的 1295。zz 表示 35*36 + 35。

parseInt("077", 8);    
// 63:(7*8+7)
//將字串 "077" 視為八進制數,因此值為 63,因為八進制中的 077 相當於十進制的 63。077 表示 7*8 + 7。

parseInt("077", 10);   
// 77:(7*10+7)
// 將字串 "077" 視為十進制數,因此它的值為 77,因為十進制中的 077 相當於十進制的 77。

(四)parseFloat() 與parseInt()的運作

parseInt("3 blind mice");    //3
parseFloat(" 3.14 meters")   //3.14
parseInt("-12.34");          //-12
parseInt("0xFF");            //255
parseInt("0xff");            //255
parseInt("-0xFF");           //-255
parseFloat(".1");            //0.1
parseInt("0.1");             //0
parseInt(".1");              //NaN 整數不能以"."開頭
parseFloat("$72.47");        //NaN 數字不能以"$"開頭

Reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString


上一篇
第三章 型別、值和變數-問題筆記 型別轉換
下一篇
這是比賽第31天,距離第30天好遠了...寫些工作上的碎碎念^^
系列文
從0到有學習JavaScript31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言