
<body>
  <script> 
    let score = 100 // 正整数
    let price = 12.345 // 小数
    let temperature = -40 // 负数
    document.write(typeof score) // 结果为 number
    document.write(typeof price) // 结果为 number
    document.write(typeof temperature) // 结果为 number

    //不同数字类型一起运算，就会有NaN
    console.log('一个人'-12)  //NaN

    //任何对 NaN 的操作都会返回 NaN
    console.log(NaN + 2)   //NaN

  </script>
</body>

算术运算符

数字类型经常和算术运算符一起

数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）

+：求和加法 +
-：求差减法 -
*：求积乘法 *
/：求商除法 /
%：取模（取余数，开发中经常作为某个数字是否被整除）

注意：在计算失败时，显示的结果是 NaN （not a number）

运算优先级

同时使用多个运算符时，存在执行优先级

乘、除、取余优先级相同，加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级
优先级相同时以书从左向右执行

语法格式案例

运算符体验


<body>
  <script> 
    // 1. 页面弹出输入框
    let r = prompt('请输入圆的半径：')
    // 2. 计算圆的面积（内部处理）
    let re = 3.14 * r * r
    // 3. 页面输出
    document.write(re)

    // NaN   not a number

    // 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>

字符串类型

通过单引号（ ''）、双引号（ ""）或反引号（`）包裹的数据都叫字符串

单引号和双引号没有本质上的区别，推荐使用单引号

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已
必要时可以使用转义符 \，输出单引号或双引号

字符串拼接

场景： + 运算符可以实现字符串的拼接。
口诀：数字相加，字符相连

模板字符串

使用场景：拼接字符串和变量
语法：`(反引号)
内容拼接变量时，用 ${ } 包住变量

语法格式案例

字符串类型


<body>
  <script> 
    let user_name = '小明' // 使用单引号
    let gender = "男" // 使用双引号
    let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了
    let str1 = '' // 这种情况叫空字符串
		
    documeent.write(typeof user_name) // 结果为 string
    documeent.write(typeof gender) // 结果为 string
    documeent.write(typeof str) // 结果为 string

    // let str = 'pink'
    // let str1 = "pink"
    // let str2 = `中文`
    // console.log(str2)
    // console.log(11)
    // console.log(`11`)
    // console.log(str)
    // console.log('str')

    // console.log('pink老师讲课非常有"基情"')
    // console.log("pink老师讲课非常有'基情'")

    // 转义字符
    // console.log('pink老师讲课非常有\'基情\'')

    // 字符串拼接
    // console.log(1 + 1)
    // console.log('pink' + '老师')

    let age = 25

    // document.write('我今年' + 19)
    // document.write('我今年' + age)
    // document.write('我今年' + age + '岁了')
    document.write('我今年' + age + '岁了')
  </script>
</body>

语法格式案例

模板字符串


<body>
  <script>
    // let age = 20
    // // 模板字符串 外面用`` 里面 ${变量名}
    // document.write(`我今年${age}岁了`)
    let uname = prompt('请输入您的姓名:')
    let age = prompt('请输入您的年龄:')
    // 输出
    document.write(`大家好，我叫${uname}， 我今年贵庚${age}岁了`)
  </script>
</body>

布尔类型

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

布尔值是两个固定的值
表示肯定的数据用 true （真）
表示否定的数据用 false （假）

语法格式案例

布尔类型


<body>
  <script> 
    //  pink老师帅不帅？回答 是 或 否
    let isCool = true // 是的，摔死了！
    console.log(isCool)
    isCool = false // 不，套马杆的汉子！

    document.write(typeof isCool) // 结果为 boolean
  </script>
</body>

undefined 未定义

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

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

underfined 开发中的使用场景：

开发中经常声明一个变量，等待传送过来的数据
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就能判断用户是否有数据传递过来

语法格式案例

undefined类型


<body>
   <script> 
    // 只声明了变量，并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
</body>

null 空类型

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

null 和 undefined 区别：

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

null 开发中的使用场景：

官方解释：把 null 作为尚未创建的对象
简单理解：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

语法格式案例

null 空类型


<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>

检测数据类型

通过控制台输出语句检测：

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

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

作为运算符： typeof x （常用的写法）
函数形式： typeof(x)

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

语法格式案例

数据类型检测


<body>
  <script> 
    // 检测 1 是什么类型数据，结果为 number
    document.write(typeof 1)

    //检测案例
    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>

类型转换

由于 JavaScript 是弱类型语言，变量的值决定了变量的数据类型
不同数据类型之间存在着转换的关系

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算

隐式转换

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

系统自动做转换

规则：

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

缺点：

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

小技巧：

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

数据类型的隐式转换是 JavaScript 的特征

语法格式案例

隐式转换

<body>
  <script> 
    let num = 13 // 数值
    let num2 = '2' // 字符串

    // 结果为 132
    // 原因是将数值 num 转换成了字符串，相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2)

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值，相当于 2
    // 然后数值 13 减去 数值 2
    console.log(num - num2)

    let a = prompt('请输入一个数字')
    let b = prompt('请再输入一个数字')

    alert(a + b);

    //案例

    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>

显式转换

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

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

转换为数字型

语法：

Number(数据)

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

parseInt(数据)

只保留整数

parseFloat(数据)

可以保留小数

转换为字符型

语法：

String(数据)
变量.toString(进制)

语法格式案例

显式转换

<body>
  <script> 
    let t = '12'
    let f = 8

    // 显式将字符串 12 转换成数值 12
    t = Number(t)

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f) // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello'
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str))

    //案例
    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>

变量+数据综合案例

语法格式案例

变量+数据综合案例

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

语法格式案例

变量+数据综合案例2

<head>
  <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>