• JavaScript——数据类型、类型转换

    数据类型

    计算机世界中的万事万物都是数据。

    计算机程序可以处理大量的数据，为什么要给数据分类?

    • 更加充分和高效的利用内存
    • 也更加方便程序员的使用数据

    基本数据类型

    number 数字型

    • JavaScript中正数、负数、小数等统一称为number
      • JS是弱数据类型，变量到底属于哪种类型，只有赋值之后，才能确定
      • Java是强数据类型，例如： int a = 3，必须是整数
      • 可以进行+、-、*、/、%的运算
        • *、/、%的优先级相同

    NaN

    代表一个计算错误。它是一个不正确的或者一个未定义的数字操作所得到的结果

    console.log("good" - 2) //输出：NaN

    NaN是粘性的。任何对NaN的操作都会返回NaN

    console.log(NaN+2) // 输出：NaN

    甚至两个NaN都不相等

    console.log(NaN === NaN) // 输出：false

    string 字符串型

    通过单引号(")、双引号（"")或反引号(`)包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

    string 字符串型

    通过单引号(")、双引号（"")或反引号(`)包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

    模板字符串

    使用场景

    • 拼接字符串和变量
    • 在没有它之前，要拼接变量比较麻烦

    语法

    • ··（反引号）
    • 内容拼接变量时，用${}包住变量

    boolean 布尔型

    只有两个值：true和false

    undefined 未定义型

    未定义是比较特殊的类型，只有一个值undefined。

    什么情况出现未定义类型?

    只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined。

    1. let num
    2. console.log(num)

    开发场景

    我们开发中经常声明一个变量，等待传送过来的数据。

    如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

    null 空类型

    1.     let obj = null
    2.     confirm.log(obj)

    引用数字类型

    object 对象

    检测数据类型

    通过typeof关键字检测数据类型

    typeof运算符可以返回被检测的数据类型。它支持两种语法形式:

    1.作为运算符: typeof x（常用的写法)

    2.函数形式: typeof(x)

    换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。

    1. let obj = null
    2. console.log(typeof obj) // object  
    3. // 这是一个比较特殊的结果

    类型转换

    隐式转换

    某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

    规则:

    • ＋号两边只要有一个是字符串，都会把另外一个转成字符串
    • 除了+以外的算术运算符，比如–、*、/等都会把数据转成数字类型

    缺点:

    • 转换类型不明确，靠经验才能总结

    小技巧:

    • +号作为正号解析可以转换成数字型
    • 任何数据和字符串相加结果都是字符串
    1.     console.log(2 + '2') // 22 string
    2.     console.log(2 - '2') // 0  number
    3.     console.log(+ '2')  // 把字符串类型转化为了数字型
    4.     console.log(typeof + '2')  // 类型为数字型

    显示转换

    • Number()
      • 把对象的值转换为数字，如果无法转换为数字，那么Number()函数返回NaN
    • parseInt()
      • 分析一个字符串，并且返回一个整数
    • parseFloat
      • 分析一个字符串，并且返回一个浮点数
    1.     console.log(Number(str))
    2.     // 1   显示转化
    3.     // let age = Number(prompt('请输入你的年龄')) // 转化为数字型
    4.     // 2   隐式转换
    5.     let age = + prompt('请输入你的年龄')
    6.     console.log(typeof age)
    7.     
    8.     console.log(parseInt('12ps')) // 只能取数字开头的字符串中的整数  12
    9.     console.log(parseInt('13.12ps')) // 只能取数字开头的字符串中的整数  13
    10.     console.log(parseInt('asd123dfa'))   // 结果为NaN
    11.  
    12.     //.................  
    13.     console.log(parseFloat('12ps'))   // 12
    14.     console.log(parseFloat('13.12ps'))  // 13.12
    15.     console.log(parseFloat('asd123dfa'))   // 结果为NaN

    操作实例

    1.     let num1 = +prompt('请输入第一个数字:')
    2.     let num2 = +prompt('请输入第二个数字:')
    3.  
    4.     alert(`两个数之和为:${num1 + num2}`)

    综合案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Document</title>
    8.   <style>
    9.     h2 {
    10.       text-align: center;
    11.       /*给字体为h2的设为中心对齐*/
    12.     }
    13.  
    14.     table {
    15.       /*合并边框*/
    16.       border-collapse: collapse;
    17.       /* 设置每个表格的高度为80px */
    18.       height: 80px;
    19.       /* 设置表格中的数据都居中对齐 */
    20.       text-align: center;
    21.       /* 让块元素水平剧中 */
    22.       margin: 0 auto;
    23.     }
    24.  
    25.     th {
    26.       /* 设置表头单元格的左右边宽距 */
    27.       padding: 5px 30px;
    28.       /* padding: 10px 5px 15px 20px;
    29.       上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px 顺时针的 
    30.       padding: 10px 5px 15px;
    31.       上填充是 10px 右填充和左填充是 5px 下填充是 15px 
    32.       padding: 10px 5px;
    33.       上填充和下填充是 10px 右填充和左填充是 5px 
    34.       padding: 10px;
    35.       所有四个填充都是 10px */
    36.     }
    37.  
    38.     table,
    39.     th,
    40.     td {
    41.       border: 1px solid #000
    42.         /*solid定义实现边框*/
    43.     }
    44.   </style>
    45. </head>
    46.  
    47. <body>
    48.   <h2>订单付款确认</h2>
    49.   <!-- 下面这个表达式的快捷键为:table>tr>th*5  -->
    50.   <!--
    51.     tr  table row 表示表格的一行
    52.     td table data 表示表格的数据单元格
    53.     th table header 表示表格的表头单元格
    54.   -->
    55.  
    56.   <script>
    57.     // 1 用户输入
    58.     let price = +prompt('请输入商品价格：')
    59.     let num = +prompt('请输入商品数量：')
    60.     let address = prompt('请输入收货地址：')
    61.     // 2 计算总额
    62.     let total = price * num
    63.     // 3 页面打印
    64.     document.write(`
    65.   <table>
    66.     <tr>
    67.       <th>商品名称</th>
    68.       <th>商品价格</th>
    69.       <th>商品数量</th>
    70.       <th>总价</th>
    71.       <th>收货地址</th>
    72.     </tr>
    73.     <tr>
    74.       <td>HUAWEI Mate 60 Pro</td>
    75.       <td>${price}元</td>
    76.       <td>${num}</td>
    77.       <td>${total}元</td>
    78.       <td>${address}</td>
    79.     </tr>
    80.   </table>
    81.  
    82.   `)
    83.  
    84.   </script>
    85. </body>
    86.  
    87. </html>

  • 相关阅读:
    设计资讯 | 迷你PC：配备 Ryzen 9 芯片组和 7 英寸触摸屏，与 Mac Studio 大小相当
    【JAVA设计模式】适配器模式
    hexo博客发布换电脑换地方了怎么办？
    论文翻译：2021_Acoustic Echo Cancellation with Cross-Domain Learning
    2022南京邮电大学-计软网安学院-电子信息-应届生-考研分享
    Servlet学习之Listener
    智慧矿山系统中的猴车安全监测与识别
    【C++游戏引擎Easy2D】想做游戏，这三个功能少不了(time+renderer+logger)
    大专毕业，24岁了，转行软件测试还行吗？
    Spring Cloud微服务架构：实现分布式系统的无缝协作
  • 原文地址：https://blog.csdn.net/m0_48638643/article/details/133025935