Day4隐式转换与显示转换

在js中prompt关键字中取的值，还有单选框多选框获取的值输出时都默认为字符串类型
因此需要类型转换：
image
而类型转换又分为隐式转换与显示转换
首先是隐式类型
image

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隐式转换</title>
</head>

<body>
  <script>
    console.log(1 + 1)
    console.log('pink' + 1)
    console.log(2 + '2')//22
    console.log(2 - 2)
    console.log(2 - '2')
    console.log(+12)
    console.log(+'123')//将字符串123转变为数字型123
  </script>
</body>

</html>

image

显示转换：
image

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>显示转换</title>
</head>

<body>
  <script>
    let str = '123'
    console.log(Number(str))
    console.log(Number('pink'))//NAN
    // let num = Number(prompt('请输入年薪'))
    // 也可以用隐式转换达成相同的作用，会更简洁一点
    // let num = +prompt('请输入年薪')
    // console.log(num)



    console.log(parseInt('12px'))
    console.log(parseInt('12.24px'))
    console.log(parseInt('12.36px'))
    //=============================================
    console.log(parseFloat('12px'))
    console.log(parseFloat('12.64px'))
    console.log(parseFloat('13.58px'))
  </script>
</body>

</html>

image

小案例，输入两个数字，计算它们的和，打印到页面中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算用户输入的两个数的和</title>
</head>

<body>
  <script>
    // 1.用户输入两个数字  但由于prompt默认为字符串，要转换为数字型
    let num1 = +prompt('请输入第一个数字')
    let num2 = +prompt('请输入第二个数字')
    // 2.输出
    alert(`两个输入数字的和为${num1 + num2}`)
  </script>
</body>

</html>

image
image
image

posted @ 2025-12-29 22:32  冰涿  阅读(6)  评论(0)    收藏  举报