CSDN

JS基础-数据类型转换

2023-09-08 14:05 由 指尖，写不尽 发表于 #前端开发

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’ 的区别， 前者是 代表 的是两个特殊值， 后者代表的是 字符串类型，他们转换 成 布尔类型 后的值完全不同。

微信公众号