前端百題斬【006】——js中三類字符串轉數字的方式

寫該系列文章的初衷是「讓每位前端工程師掌握高頻知識點，爲工做助力」。這是前端百題斬的第6斬，但願朋友們關注公衆號「執鳶者」，用知識武裝本身的頭腦。

js中字符串轉數字主要有三種方式：利用轉換函數、強制類型轉換、利用js變量弱類型轉換，下面就從這三個方面來闡述一下該轉換方式：

6.1 轉換函數

js中字符串轉數字的轉換函數有兩個：parseInt、parseFloat。

1. parseInt

parseInt() 函數可解析一個字符串，並返回一個整數。

parseInt(string, radix)

radix爲可選參數，表示要解析的數字的基數。該值介於 2 ~ 36 之間，超出該範圍將返回NaN。

console.log(parseInt('123abc', 10)); // 123
console.log(parseInt('123abc', 2)); // 1
console.log(parseInt('123abc', 8)); // 83
console.log(parseInt('123abc', 16)); // 1194684
console.log(parseInt('abc', 10)); // NaN

2. parseFloat

parseFloat() 函數可解析一個字符串，並返回一個浮點數。該函數指定字符串中的首個字符是不是數字。若是是，則對字符串進行解析，直到到達數字的末端爲止，而後以數字返回該數字，而不是做爲字符串。若是字符串的第一個字符不能被轉換爲數字，那麼 parseFloat() 會返回 NaN。

parseFloat(string)

console.log(parseFloat('123.4d')); // 123.4
console.log(parseFloat('123abc')); // 123
console.log(parseFloat('abc')); // NaN

6.2 強制類型轉換

js中提供了一些強制類型轉換函數，將字符串強制轉換爲數字的轉換函數是Number()。以這種方式調用 Number() 時，它會把本身的參數轉化成一個數字，而後返回轉換後的原始數值（或 NaN）。(注：其轉換的爲整個值，部分值爲數字並不能完成轉換，將返回NaN)

console.log(Number('123.456')); // 123.456
console.log(Number('123abc')); // NaN
console.log(Number('1.2.3')); // NaN

6.3 弱類型轉換

1. 按位非

能夠將字符串轉換爲整數，其原理是按位非運算符（~）會先將全部值轉換爲整數，再以二進制表示，最後執行按位取反操做。(注意：該方法轉換的也是整個值，部分值爲數字也不能完成轉換)

console.log(~~'123'); // 123
console.log(~~'123.456'); // 123
console.log(~~'abc'); // 0
console.log(~~'123abc'); // 0
console.log(~~'0'); // 0
console.log(~~'-123'); // -123

2. 正號運算符

該方法轉換的也是整個值，部分值爲數字也不能完成轉換

console.log(+'123'); // 123
console.log(+'123.456'); // 123.456
console.log(+'abc'); // NaN
console.log(+'123abc'); // NaN
console.log(+'0'); // 0
console.log(+'-123'); // -123

2. 四則運算符中的-、*、/

該方法轉換的也是整個值，部分值爲數字也不能完成轉換

console.log('123' - 0); // 123
console.log('123.456' * 1); // 123.456
console.log('abc' * 1); // NaN
console.log('123abc' - 0); // NaN
console.log('0' * 1); // 0
console.log('-123' * 1); // -123
console.log('0XFF' / 1); // 255

1.若是以爲這篇文章還不錯，來個分享、點贊吧，讓更多的人也看到

2.關注公衆號執鳶者，與號主一塊兒斬殺前端百題。