需求： 設計一個標題，讓中間部分隨著文字而撐大，同時文字漸變，兩邊自適應，這種情況就不能用傳統的背景圖片了，想到可以使用圖片邊框來做 解決思路： 1.需要一個大盒子和三個小盒子 2.大盒子設置display:flex; 左右兩個小盒子分別設置flex-grow; 並設置背景圖片 3.給中間盒子設置邊 ...
JS存在不同的數據類型， 這就需要一些方法將不同的數據類型做轉換。
轉數字類型
其他類型的值轉換成數字， 這在工作中很常見。
有以下幾種轉換方式
- Number 函數
- parseInt 函數
- parseFloat 函數
Number
Number 函數可以將 其他類型轉成 數字類型,具體示例如下
字元串轉數字
<script>
// 輸出123
console.log(Number("123"));
// 輸出: 12000; 支持科學計數法
console.log(Number("12e3"));
// 輸出：123.3; 支持浮點數
console.log(Number("123.3"));
// 輸出: NaN； 帶有非數字字元無法轉換
console.log(Number("12.13zimu"));
</script>
布爾轉數字
<script>
// 輸出0， flase 對應 數字 0
console.log(Number(false));
// 輸出1， true 對應數字 1
console.log(Number(true));
</script>
undefined 和 null 轉數字
<script>
// 輸出NaN
console.log(Number(undefined));
// 輸出 0 ; 所以 要小心null， 如果涉及到 null 不能夠轉數字的情況，提前做好判斷
console.log(Number(null));
</script>
parseInt 函數
只能將字元串轉換成整型值（小數點後面的不要）
和 Number 的區別是 parseInt 如果是數字開頭， 則數字字元部分能夠被提取轉換成數字類型
字元串轉數字
<script>
// 輸出 123
console.log(parseInt('123'));
// 輸出 123 , 保留整數部分
console.log(parseInt('123.56'));
//數字開頭的保留整數部分
console.log(parseInt('123.56是你嗎'));
// 字母開頭的 輸出 NaN
console.log(parseInt('字元串開頭123.56'));
</script>
除了字元， parseInt 函數無法將其他類型值轉成普通數字，統一輸出 NaN
<script>
// 輸出: NaN
console.log(parseInt(true));
console.log(parseInt(false));
console.log(parseInt(undefined));
console.log(parseInt(null));
</script>
paseFloat 函數
字元串轉浮點數字
<script>
// 輸出: 273.1212; 字元串轉浮點數
console.log(parseFloat("273.1212"));
// 輸出: 323.2323; 數字開頭的，則提取數字字元部分，轉換成數字
console.log(parseFloat("323.2323後面跟著字元"));
// 輸出: NaN 首位是非數字字元的無法處理
console.log(parseFloat("前面有字元21212"));
</script>
除了字元， paseFloat 函數無法將其他類型值轉成普通數字，統一輸出 NaN
<script>
console.log(parseFloat(true));
console.log(parseFloat(false));
console.log(parseFloat(undefined));
console.log(parseFloat(null));
</script>
轉字元類型
其他類型轉成字元類型可以用下麵的方法
- String 函數
- toString 函數
String 函數
使用此函數可以將其它類型的值轉為String函數。
數字類型轉字元串類型
<script>
// 輸出 '123', 數字類型轉成字元類型
console.log(String(123));
// 輸出 'NaN'
console.log(NaN);
</script>
布爾類型轉字元串類型
<script>
// 輸出 'true'
console.log(String(true));
//輸出 'false'
console.log(String(false));
</script>
undefined和null 轉 字元串類型
<script>
// 輸出 undefined
console.log(String(undefined));
// 輸出 null
console.log(String(null));
</script>
任何類型的值，都可以原樣轉成字元串類型
toString 函數
數字類型轉字元串類型
<script>
var num = 3;
// 輸出 3
console.log(num.toString());
</script>
布爾類型轉字元串類型
//輸出 true
console.log(true.toString());
undefined和null 無法通過 toString 函數轉成字元類型
轉布爾類型
Boolean 函數
數字類型轉布爾
- 數字0 和 NaN 轉 布爾值為flase
- 除了0 和 NaN 轉成 true
<script>
// 輸出 true
console.log(Boolean(123));
// 輸出true
console.log(Boolean(-124));
// 輸出false
console.log(Boolean(0));
// 輸出 true
console.log(Boolean(NaN));
</script>
字元串類型轉布爾
- 空字元串轉為false
- 其他都是true
<script>
// 輸出 false
console.log(Boolean(''));
// 輸出 true 帶有空格的字元串不算空字元串
console.log(Boolean(' '));
// 輸出 true
console.log(Boolean('halou'));
// 輸出 true
console.log(Boolean('false'));
// 輸出 true
console.log(Boolean('false'));
</script>
undefined 和 null 轉 布爾值
統一為false
<script>
// 輸出 false
console.log(Boolean(undefined));
// 輸出 false
console.log(Boolean(null));
</script>
編碼過程中註意 undefined、null 和 和 ‘undefined’, ‘null’ 的區別， 前者是 代表 的是兩個特殊值， 後者代表的是 字元串類型，他們轉換 成 布爾類型 後的值完全不同。
微信公眾號
