js的类型转换（显示转换+隐式转换）

你想要那颗糖

已于 2023-03-15 11:23:00 修改

阅读量333

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

于 2023-03-14 21:30:09 首次发布

本文链接：https://blog.csdn.net/qq_50260510/article/details/129540675

版权

JavaScript 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

类型转换：把一种数据类型转换成另外一种数据类型；数据类型转换可以分为：显示转换和隐式转换

为什么需要类型转换呢？ 例如：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算；此时需要转换数据类型

一、显式转换

自己手动写代码告诉系统该转成什么类型（数据类型明确、程序员主导）；类型转换主要转换为数字型、字符串型、布尔型

1.显示转换为数字型

（1）Number(数据)

转换成功返回一个数字类型；转换失败则返回 NaN (例如数据里面包含非数字）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显式转换-Namber</title>
</head>
<body>
    <script>
    let num1 = prompt('请输入第一个月工资:')
    let num2 = prompt('请输入第二个月工资:')
    //  输出结果
    alert(Number(num1) + Number(num2))


    let num = '500元'
    let p1 = Number(num)    //NaN
    console.log(p1)

    // Nember虽好，但是它无法混合字符串，如果字符串中有非数字，则会被转成NaN
    </script>


    
</body>
</html>

（2） parseInt(数据)

只保留整数；如果数字开头的字符串，只保留整数数字；比如 12px 返回 12

（3）parseFloat(数据)

可以保留小数；如果数字开头的字符串，可以保留小数；比如 12.5px 返回 12.5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>parseInt</title>
</head>
<body>
    <script>
        let price = '500元'
        let p1 = parseInt(price)
        console.log(p1)
        console.log(typeof p1)

        let price2 = '500.2元'
        let p2 = parseInt(price2)
        console.log(p2)
        console.log(typeof p2)
        // parseInt注意事项：
        // parseInt会自动舍弃小数点后的字符串，
        // 必须保证开头是数字，否则一样也是NaN

        let price3 = '500.3元'
        let p3 = parseFloat(price3)
        console.log(p3)
        console.log(typeof p3)
        // parseFloat注意事项：
        // parseFloat可以显示小数，
        // 必须保证开头是数字，否则一样也是NaN

    </script>
    
</body>
</html>

2.显示转换为字符串和布尔型

（1）布尔型转换为数字： true 为 1 ， false 为 0

（2）null 转换为数字为 0 ， undefined 为 NaN

（3）如果值为 false、 0、 ''、 null、 undefined、 NaN, 则返回 false，其余返回为 true

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>布尔值</title>
  </head>
  <body>
    <script>
      // 布尔转数字 true 为 1 ；false 为 0
      let isLogin = false;
      // let l1 = Number(isLogin)
      console.log(Number(isLogin));

      // undefined转数字  NaN
      let age; //age是undefined,转成数字就是NaN
      console.log(parseInt(age)); //NaN

      //null 转数字  0
      let uname = null;
      console.log(Number(name)); //0

      // 2. 转换为布尔型 Boolean  (重点) 
      // 2.1 有6种情况为false： false 0 '' null undefined NaN (无，没有);因为他们都有一种表示没有/否定的表达
      // 2.2 其余的都为true
      console.log(Boolean(false)); // false
      console.log(Boolean(0)); // false
      console.log(Boolean("")); // false
      console.log(Boolean(null)); // false
      console.log(Boolean(undefined)); // false
      console.log(Boolean(NaN)); // false
      console.log(Boolean(1)); // true
    </script>
  </body>
</html>

转换为字符串类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    // 1. 把其他类型转换为字符串类型 
    // 1.1 String(要转换的数据) 开发中提倡使用这种方式 
    console.log(String(1))     // '1'
    console.log(typeof String(1))  // string
    console.log(String(undefined))  // undefined
    console.log(typeof String(undefined))  // string
    console.log(String(true))  //'true'
    console.log(typeof String(true))  // string

    // 1.2 要转换的数据.toString(进制)
    let num = 10
    console.log(typeof num.toString()) //  string 
    console.log(num.toString(10)) //  string   '10'
    console.log(num.toString(8)) //  string   '12'
    // 生活中都用10进制，程序中有很多种进制
    // 例如：16进制 0-9 ABCDEF,用于颜色
    // 进制，最底层执行的代码 01

    let age = 18
    console.log(age.toString(16))

    </script>
    
</body>
</html>

二、隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。学了隐式转换可以帮我们解决很多疑惑

1. 算术运算符 - * / 比较运算符 > ==

2.+ 正号使用的时候，也会把字符串转换为数字型

3. 隐式转换为字符串型的运算符 + 拼接字符串两侧只要有一个是字符串，结果就是字符串

4.隐式转换为布尔型的运算符！逻辑非

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>隐式转换</title>
  </head>
  <body>
    <script>
      // 隐式转换：在参与运算的过程中，某些运算会自动进行转换，不需要程序员人为干预
      // 1.转为数字型
      // a.算术运算符 （ - * / % ）
      // + 如果遇到字符串，就是拼接
      let str = "123";
      console.log(str - 2); // 121
      console.log(str / 3); //41

      // b.比较运算符  除了全等，都会转
      let age = "18";
      console.log(age < 20); //true
      console.log(age == 18); //true
      console.log(age === 18); //false

      //c.正号回进行转换  + 放在字符串前面，就是正号
      let num = "19";
      console.log(+num); // 19

      // 2.转成字符串型
      let num1 = 18;
      console.log(num1 + "岁"); // '18岁'

      // 3.转成布尔型
      let age1 = 18;
      console.log(Boolean(age)); // true

      // !取反，一元运算符,逻辑运算
      // !按理说只能对布尔值进行使用,但是age不是布尔值，所以会先隐式转换成布尔值，后取反
      console.log(!age); // false

      //比如登录功能，登陆成功后，服务器回给一个‘令牌’，让我们存储起来，令牌就是这个字符串，我们可以使用 ! 来判断用户是否登录（！有值是true）

      // 3. 隐式转换为布尔型的运算符  ！逻辑非
      console.log(!true); // false
      console.log(!0); // true
      console.log(!""); // true
      console.log(!null); // true
      console.log(!undefined); // true
      console.log(!NaN); // true
      console.log(!false); // true
      console.log(!"小淳要开心"); // false
    </script>
  </body>
</html>

隐式转换例题：

需求：询问用户年龄，用户输入年龄后，把用户输入的年龄增加5岁；增加5岁后，通过弹出框提示用户 “ 据我估计，五年后，你可能XX岁了”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、询问用户年龄，用户输入年龄后，把用户输入的年龄增加5岁
         2、增加5岁后，通过弹出框提示用户 “ 据我估计，五年后，你可能XX岁了” -->
</head>
<body>
    <script>
        let age = +prompt('您现在多少岁了？')
        let num = 5
        let re = Number(prompt)+Number(num)
        document.write(`据我估计，您5年后应该${re}岁了`)
    </script>
    
</body>
</html>