WEBSTORM前端 —— 第4章：JavaScript —— 第3节：数据类型与类型转换

<!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>
    // js 弱数据类型的语言 只有当我们赋值了，才知道是什么数据类型
    // let num = 'pink'
    // let num = 10.11
    // console.log(num)
    console.log(1 + 1)
    console.log(1 * 1)
    console.log(1 / 1)
    console.log(4 % 2) // 求余数
    console.log(5 % 3) // 求余数  2 
    console.log(3 % 5) // 求余数  3 
    // java 强数据类型的语言    int num = 10

    console.log('pink老师' - 2)
    console.log(NaN - 2)
    console.log(NaN + 2)
    console.log(NaN / 2)
    console.log(NaN === NaN)
  </script>
</body>

</html>

JavaScript算术运算符执行的优先级顺序：同时使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。 JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级

总结：先乘除后加减，有括号先算括号里面的~~~

案例：计算圆的面积

需求：对话框中输入圆的半径，算出圆的面积并显示到页面

分析：

①：面积的数学公式： π*r²

②：转换为JavaScript写法：变量 * r * r

<!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. 页面弹出输入框
    let r = prompt('请输入圆的半径：')
    // 2. 计算圆的面积（内部处理）
    let re = 3.14 * r * r
    // 3. 页面输出
    document.write(re)
    // NaN   not a number 
  </script>
</body>
</html>

----------------------------------------------------------------------------------------------

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

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

1-2.数据类型 – 字符串类型（string）

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

①注意事项

1.无论单引号或是双引号必须成对使用

2.单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）

3.必要时可以使用转义符\，输出单引号或双引号

②字符串拼接

场景：+运算符可以实现字符串的拼接。

口诀：数字相加，字符相连

③模板字符串

使用场景：拼接字符串和变量；在没有它之前，要拼接变量比较麻烦

语法：``(反引号) ； 在英文输入模式下按键盘的tab键上方那个键（1左边那个键）； 内容拼接变量时，用${}包住变量

案例：页面输出用户信息案例

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年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>
</head>
<body>
  <script>
    // let age = 20
    // // 模板字符串 外面用`` 里面 ${变量名}
    // document.write(`我今年${age}岁了`)
    let uname = prompt('请输入您的姓名:')
    let age = prompt('请输入您的年龄:')
    // 输出
    document.write(`大家好，我叫${uname}， 我今年贵庚${age}岁了`)
  </script>
</body>
</html>

1-3.数据类型–布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值true和false，表示肯定的数据用true（真），表示否定的数据用false（假）。

1-4.数据类型–未定义类型（undefined）

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

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

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

工作中的使用场景：

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

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

1-5.数据类型–null（空类型）

JavaScript中的null仅仅是一个代表“无”、“空”或“值未知”的特殊值。

null和undefined区别：

undefined：表示没有赋值

null表示赋值了，但是内容为空

null开发中的使用场景：

官方解释：把null作为尚未创建的对象

大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

<!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. true  false 是布尔型字面量  
    // console.log(3 > 4)
    // let isCool = false
    // console.log(isCool)
    // 2. 未定义类型   弱数据类型   声明一个变量未赋值就是 undefined
    // let num
    // console.log(num)
    // 3. null 空的
    // let obj = null
    // console.log(obj)
    // 计算有区别
    console.log(undefined + 1)  // NaN
    console.log(null + 1) // 1
  </script>
</body>

</html>

二、检测数据类型

1.控制台输出语句

控制台语句经常用于测试结果来使用。
可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

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

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

1. 作为运算符： typeofx （常用的写法）

2. 函数形式： typeof(x)

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

<!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>
    let num = 10
    console.log(typeof num)
    let str = 'pink'
    console.log(typeof str)
    let str1 = '10'
    console.log(typeof str1)
    let flag = false
    console.log(typeof flag)
    let un
    console.log(typeof (un))
    let obj = null
    console.log(typeof obj)


    let num1 = prompt('请输入第一个数：')
    console.log(typeof num1)
  </script>
</body>

</html>

三、类型转换

1.为什么需要类型转换

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

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

2.隐式转换

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

①规则

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

②缺点

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

③小技巧

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

<!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>
    console.log(1 + 1)
    console.log('pink' + 1)
    console.log(2 + 2)
    console.log(2 + '2') // 22
    console.log(2 - 2)
    console.log(2 - '2')  // 0  
    console.log(+12)
    console.log(+'123')  // 转换为数字型
  </script>
</body>

</html>

3.显式转换

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

①概念

自己写代码告诉系统该转成什么类型

②转换为数字型

Number(数据)

转成数字类型
如果字符串内容里有非数字，转换失败时结果为NaN（NotaNumber）即不是一个数字
NaN也是number类型的数据，代表非数字

parseInt(数据)

只保留整数

parseFloat(数据)

可以保留小数

③转换为字符型

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>
  <style>
    .box {
      width: 50px;
      height: 50px;
    }
  </style>
</head>

<body>
  <script>
    let str = '123'
    console.log(Number(str))
    console.log(Number('pink'))
    // let num = Number(prompt('输入年薪'))
    // let num = +prompt('输入年薪')
    // console.log(Number(num))
    // console.log(num)
    console.log(parseInt('12px'))
    console.log(parseInt('12.34px'))
    console.log(parseInt('12.94px'))
    console.log(parseInt('abc12.94px'))

    // -------------------
    console.log(parseFloat('12px')) // 12
    console.log(parseFloat('12.34px')) // 12.34
    console.log(parseFloat('12.94px')) // 12.94
    console.log(parseFloat('abc12.94px')) // 12.94
  </script>
</body>

</html>

4.练习

输入2个数，计算两者的和，打印到页面中

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

四、实战演练——用户订单信息案例

1.需求

用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

2.分析1

①：使用Scanner键盘录入一个三位数

②：个位的计算：数值%10

123除以10（商12，余数为3）

③：十位的计算：数值/10%10

123除以10（商12，余数为3，整数相除只能得到整数）

12除以10（商1，余数为2）

④：百位的计算：数值/10/10%10

123/10/10%10（123/10得到12，12/10得到1，1%10得到1）

3.分析2

①：需要输入3个数据，所以需要3个变量来存储 price num address

②：需要计算总的价格total

③：页面打印生成表格，里面填充数据即可

④：记得最好使用模板字符串

4.常见错误1

下面可能出现的原因是什么？

const声明的时候必须要赋值，进行初始化

5.常见错误2

分析：

提示age变量没有定义过
很可能age变量没有声明和赋值
或者我们输出变量名和声明的变量不一致引起的（简单说写错变量名了）

6.常见错误3

分析：

提示“age”已经声明
很大概率是因为重复声明了一个变量。
注意let或者const不允许多次声明同一个变量

7.常见错误4

分析：

常量被重新赋值了
常量不能被重新赋值

8.常见错误5

分析：

因为prompt获取过来的是字符型，所以会出现字符相加的问题
prompt如果出现相加记得要转为数字型，可以利用+最简单

9.源代码

<!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>
  <style>
    h2 {text-align: center;}
    table { /* 合并相邻边框 */
      border-collapse: collapse;height: 80px;margin: 0 auto;text-align: center;}
    th {padding: 5px 30px;}
    table,
    th,
    td {border: 1px solid #000;}
  </style>
</head>
<body>
  <h2>订单确认</h2>
  <script>
    // 1 用户输入
    let price = +prompt('请输入商品价格：')
    let num = +prompt('请输入商品数量：')
    let address = prompt('请输入收获地址：')
    // 2.计算总额
    let total = price * num
    // 3.页面打印渲染
    document.write(`<table>
          <tr><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总价</th><th>收货地址</th>
          </tr>
          <tr><td>小米青春版PLUS</td><td>${price}元</td><td>${num}</td><td>${total}元</td><td>${address}</td>
          </tr>
        </table>`)
  </script>
</body>
</html>

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

KMP全栈开发：从Android到AI Agent的技术演进与实践

总结 KMP 作为全栈开发核心纽带的价值。强调“全栈”思维从技术栈统一向“业务能力闭环”的演进。鼓励开发者拥抱 KMP，探索 AI 赋能的下一代应用开发。

AI Agent技术社区

rvs（rust-verb-shell）：一款面向人类和 AI Agent 的结构化 Shell

Rust-Verb-Shell（rvs）是一款基于Rust开发的创新型Shell工具，采用MulanPSL-2.0开源协议。其核心特性包括：1）严格遵循verb-noun语义命名规范（如get-child-item）；2）内置沙盒安全模式，可限制文件系统访问范围；3）双模输出（人类友好的表格格式和AI/脚本专用的JSON格式）；4）采用日历版本号（CalVer）YY.M.P格式。项目特别注重AI友