Javascript-类型转换-CSDN博客

本文链接：https://blog.csdn.net/m0_64105917/article/details/139373727

学习目标：

掌握类型转换

学习内容：

为什么需要类型转换
隐式转换
显示转换
综合案例

为什么需要类型转换：

Javascript是弱数据类型：Javascript也不知道变量到底属于那种数据类型，只有赋值了才清楚。
使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

console.log('10000' + '2000') //输出结果  100002000

此时需要转换变量的数据类型。
通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

隐式转换：

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

规则

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

缺点
转换类型不明确，靠经验才能总结。
小技巧

+号作为正号解析可以转换成数字型。
任何数据和字符串相加结果都是字符串。

代码

<title>类型转换-隐式转换</title>
</head>

<body>
  <script>
    console.log('10000' + '2000') //输出结果  100002000

    console.log(1 + 1)
    console.log('雪碧' + 1)
    console.log(2 + 2)
    console.log(2 + '2')
    console.log(2 - 2)
    console.log(2 - '2')
    console.log(+20)
    console.log(+123)//转换成数字型


  </script>

</body>

在这里插入图片描述

显式转换：

编写程序时过度依靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根据逻辑需要对数据进行显示转换。

概念
自己写代码告诉系统该转成什么类型。
转换成数字型：

Number（数据）
✔转成数字类型。
✔如果字符串内容里有非数字，转换失败时结果为NaN(Not a Number）即不是一个数字。
✔NaN也是number类型的数据，代表非数字。
parseInt（数据）
只保留整数。
parseFloat（数据）
可以保留小数。

代码

<title>类型转换-显式转换</title>
</head>

<body>
  <script>
    let str = '123'
    console.log(Number(str))

    // let num = prompt('请输入年薪') //显示出的是字符串,字体颜色是gray
    // console.log(num)

    //方法1:
    // let num = Number(prompt('请输入年薪'))
    // console.log(num)

    // 方法2：
    // let num = +prompt('请输入年薪')
    // console.log(num)

    // 方法3：
    console.log(parseInt('12px'))   //输出结果12
    console.log(parseInt('12.33'))  //输出结果12
    console.log(parseInt('12.99'))  //输出结果12

    //方法4：
    console.log(parseFloat('12px'))  //输出结果12
    console.log(parseFloat('12.39'))  //输出结果12.39
    console.log(parseFloat('12.98'))  //输出结果12.98

  </script>

</body>

在这里插入图片描述

综合案例：

<title>练习-输入2个数，计算两者的和，打印到页面中</title>
</head>

<body>
  <script>
    // 1.用户输入  prompt 得到的是字符串类型 要转换成数字型
    let num1 = +prompt('请输入第一个数：')
    let num2 = +prompt('请输入第二个数：')
    // 2.输出
    alert(`两个数相加的和是：${num1 + num2}`)

  </script>

</body>