非零基础自学前端最后一遍二 JavaScript基础 3 JavaScript变量和数据类型 3.13 数据类型的转换-String-Number-Boolean

梦里梦外; 2024-03-25 10:15 41阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  3 JavaScript变量和数据类型
         *   *  3.13 数据类型的转换-String-Number-Boolean
             *   *  3.13.1 字符串String的转换
                 *  3.13.2 数字类型Number的转换
                 *  3.13.3 布尔类型Boolean的转换

![在这里插入图片描述][c08dcbdbba5d4c84adeaa3aa461d013a.png_pic_center]

#### 二 JavaScript基础 ####

#### 3 JavaScript变量和数据类型 ####

##### 3.13 数据类型的转换-String-Number-Boolean #####

###### 3.13.1 字符串String的转换 ######

*  其他类型经常需要转换成字符串类型，比如和字符串拼接在一起或者使用字符串中的方法。
 *  转换方式一：隐式转换
    
     *  一个字符串和另一个字符串进行+操作；
        
         *  如果+运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼接；
     *  某些函数的执行也会自动将参数转为字符串类型；
        
         *  比如console.log函数；
 *  转换方式二：显式转换
    
     *  调用String()函数；
     *  调用toString()方法（后续面向对象再学习）；
 *  方法和函数的区别，我们后续在讲解面向对象时会讲到；

<!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>
        var num1 = 123
        var age = 18
        var isAdmin = true
    
        // 1.转换方式一: 隐式转换(用的非常多)
        var num1Str = num1 + ""
        var ageStr = age + ""
        var isAdminStr = isAdmin + ""
        console.log(typeof num1Str, typeof ageStr, typeof isAdminStr)
    
        // 2.转换方式一: 显示转换
        var num1Str2 = String(num1)
        console.log(typeof num1Str2)
    
      </script>
    
    </body>
    
    </html>

渲染结果

![在这里插入图片描述][123742a4237b4fd7b96fb32131efa78e.png_pic_center]

###### 3.13.2 数字类型Number的转换 ######

*  其他类型也可能会转成数字类型。
 *  转换方式一：隐式转换
    
     *  在算数运算中，通常会将其他类型转换成数字类型来进行运算；
        
         *  比如 “6” / “2”；
         *  **但是如果是+运算，并且其中一边有字符串，那么还是按照字符串来连接的；**
 *  转换方式二：显式转换
    
     *  我们也可以使用Number()函数来进行显式的转换；
 *  其他类型转换数字的规则：
    
    ![在这里插入图片描述][0fdbf6febdb04993869105421a08d4b8.png_pic_center]

<!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>
        // 方式一: 隐式转换(用的很少)
        var num1 = "8"
        var num2 = "4"
        var result1 = num1 + num2 // 84
        console.log(typeof result1)
    
        var result2 = num1 * num2
        console.log(result2)
    
        // 方式二: 显示转换(Number())
        var result3 = Number(num1)
        console.log(typeof result3)
    
        // 其他类型转成数字类型的规则:
        console.log(Number(undefined)) // NaN
        console.log(Number(true)) // 1
        console.log(Number(false)) // 0
        console.log(Number(null)) // 0
        console.log(Number("abc123")) // NaN
        console.log(Number("         123       ")) // 123
        console.log(Number("")) // 0
    
    
      </script>
    
    </body>
    
    </html>

渲染结果

![在这里插入图片描述][e445e8f2a38d41b4858c3412862a65fa.png_pic_center]

###### 3.13.3 布尔类型Boolean的转换 ######

*  布尔（boolean）类型转换是最简单的。
 *  它发生在逻辑运算中，但是也可以通过调用 Boolean(value) 显式地进行转换。
 *  转换规则如下：
    
     *  直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false。
     *  其他值变成 true。
 *  注意：包含 0 的字符串 “0” 是 true
    
     *  一些编程语言（比如 PHP）视 “0” 为 false。但**在 JavaScript 中，非空的字符串总是 true。**

![在这里插入图片描述][759e58cfca0e4b0a845711b1cd2d9099.png_pic_center]

<!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>
        // 方式一: 隐式转换
        // 分支语句
        var isAdmin = true
        var num1 = 123 // true
    
        // 方式二: 显示转换
        console.log(Boolean(num1), Boolean(undefined))
    
        // 转换有如下的规则: 
        // 直观上为空的值, 转成Boolean类型都是false
        // 直观上为空的值: 0/""/undefined/null/NaN -> false
    
        // 注意事项
        console.log(Boolean("")) // false
        console.log(Boolean("0")) // true
    
      </script>
    
    </body>
    
    </html>

渲染结果

![在这里插入图片描述][99c680665f49482987fa53fc75573f71.png_pic_center]

[c08dcbdbba5d4c84adeaa3aa461d013a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/9e5d628b1ed646d0ba6ce217c0e14d1d.png
[123742a4237b4fd7b96fb32131efa78e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ddcea133ec1046d3a52654582f5ad36a.png
[0fdbf6febdb04993869105421a08d4b8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f82fb5dc33324d90b9b99056aa1e9090.png
[e445e8f2a38d41b4858c3412862a65fa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/47151fd19bd5430e9af68d7519188f56.png
[759e58cfca0e4b0a845711b1cd2d9099.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/aec574638a474164ac90f365ac22f304.png
[99c680665f49482987fa53fc75573f71.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/69e5254aae9443559198ec914205fab7.png