• JavaScript基本数据类型


    文章目录

    声明数据类型

    1、let
    2、var
    推荐使用let，因为var有很多令人头疼的地方。
    1、可以先使用再声明
    2、可以重复声明
    3、比如变量提升、全局变量、没有块级作用域等等…
    这竟然不报错？
    image.png
    这竟然不报错？
    image.png
    注 ：不用这两个（var、let）也可以，但是不提倡。

    age = 10
console.log(age)

    • 1
    • 2

    像java、c等是强类型，说是什么就是什么。
    JavaScript是弱类型，变量是哪种类型，只有赋值后才能知道。
    let a // a 还不知道是什么类型，有可能是数字、字符、对象
    int a // 在Java中，a已经确定是整型了

    检测 数据类型

    使用typeof区分数据类型，有两种用法
    1、typeof(value)
    2、typeof value

    document.write(typeof (1))
document.write(" ")
document.write(typeof 1)

    • 1
    • 2
    • 3

    image.png
    注意：
    typeof只能识别 number、string、boolean、undefined、function、object这几种类型，而不能识别具体的对象类型，例如typeof null的而结果是object

    基本数据类型

    number 数字类型

    不管正数负数小数，统称数字

    let a1 = 10
let a2 = -10
let a3 = 1.5
document.write(typeof (a1))
document.write(typeof (a2))
document.write(typeof (a3))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    image.png

    string 字符串类型

    通过单引号(‘’)、双引号(“”)、反引号(``)，包裹的都是字符串。字符串连接和Java中相同。
    单引号和双引号没有本质区别，但更推荐使用单引号

    let str = '你好'
let str = "你好"
let str = `你好` 

    • 1
    • 2
    • 3

    单引号可以互相嵌套，但不能自己套自己。
    口诀 ：外双内单，外单内双
    image.png
    可以使用转义字符输出单引号或双引号。但一般都是嵌套。
    案例：使用prompt()让用户输入姓名,在HTML页面中显示

    <script type="text/javascript">
    let name = prompt('请输入姓名:')
    document.write('您的姓名为:' + name)
</script>

    • 1
    • 2
    • 3
    • 4

    拓展:
    字符串来回拼接容易出错，使用模板字符串 : ${} 来避免这种错误。
    如果你学过EL表达式或者mybatis框架，可能用过。

    let name = '小明'
let age = 18
let str = `我叫${name},我今年${age}岁了`

    • 1
    • 2
    • 3

    注意是反引号 `` ，单引号/双引号无效。且花括号中比必须有值。
    image.png
    还可以在{}中进行一些操作：

    let str = `我今年${age + 1}岁了`

    • 1

    案例：分别输入名字和年龄，在html页面中显示

    let name = prompt('请输入名字:')
let age = prompt('请输入年龄:')

document.write(`我是${name},我今年${age}岁了`)

    • 1
    • 2
    • 3
    • 4

    案例：分别输入名字和年龄，在html页面中显示，名字和年龄为红色

    <!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>案例2</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        let name = prompt('请输入名字:')
        let age = prompt('请输入年龄:')

        document.write(`我是<span>${name}</span>，我今年<span>${age}</span>岁了`)

    </script>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    boolean 布尔类型

    只有两个值，true、false

    document.write(1 == 2 ? true : false) // 输出false
document.write(typeof true) // 输出boolean

    • 1
    • 2

    undefined 未定义

    未定义数据类型很特殊，只有一个值undefined
    在只声明而不赋值的情况下出现，或者直接给一个变量赋值undefined

    let age 
document.write(age)
document.write(" ")
document.write(typeof age)

    • 1
    • 2
    • 3
    • 4

    image.png
    运用场景：用户登录时啥也没输就提交了，我们就可以判断用户输入的是不是undefined。
    两个undefined相加是NaN，NaN是not a number的缩写，它也是number类型，表示不是一个合法的数字。

    let age
let name
document.write(age + name) // NaN
document.write(typeof NaN) // number

    • 1
    • 2
    • 3
    • 4

    null 空类型

    null 和 undefined 的区别：
    1、undefined 表示没有赋值
    2、null 表示赋值了，但是内容为空

    let obj = null
let age 
document.write(obj)
document.write(" ")
document.write(age)

    • 1
    • 2
    • 3
    • 4
    • 5

    image.png

    类型转换

    js是弱类型，他也不知道变量是什么类型，只有赋值了才知道。
    坑 ：使用表单、prompt获取的数据默认是字符串类型，此时就不能做类似加减乘除的运算。

    let a = prompt('请输入:')
document.write(`${a}->${typeof a}`)
// 输入 : 18
// 输出 : 18->string 

    • 1
    • 2
    • 3
    • 4

    隐式类型转换

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

    • +号两边只要有一个字符串，就会将另一个转换为字符串。
    • +号以外的算术运算符，比如：减乘除，会将数据转换为数字类型。
    console.log(5 + '3') // 53
console.log(5 - '3') // 2
console.log(5 * '3') // 15
console.log(5 / '3') // 1.6666666666666667
console.log(5 % '3') // 2

    • 1
    • 2
    • 3
    • 4
    • 5

    小技巧 ：在字符串前加 + ，可以将其转换为数字类型

    let num = '100'
document.write(num + '是' + typeof(num) + '类型的 ')
document.write(num + '是' + typeof(+num) + '类型的')

    • 1
    • 2
    • 3

    image.png
    案例：使用prompt输入两个数字，计算他们的加减乘除并分别打印到HTML页面

    let num1 = prompt('请输入第一个数:')
let num2 = prompt('请输入第二个数:')
document.write(' 加:'+ ( (+num1) + (+num2)) )
document.write(' 减:' + (num1 - num2))
document.write(' 乘:' + (num1 * num2))
document.write(' 除:' + (num1 / num2))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    显示类型转换

    隐式转换不清晰，通常根据需要，进行显示类型转换。
    1、转换为数字型：

    • Number

    将字符串转为数字类型，如果其中有非数字，转换失败为NaN

    let str1 = '12'
let str2 = '1f3'
let num1 = Number(str1) // 12
let num2 = Number(str2) // NaN

    • 1
    • 2
    • 3
    • 4
    • parseInt

    只保留字符串中的整数

    let num = parseInt('100') // 100
let num1 = parseInt('100.5') // 100

    • 1
    • 2
    • parseFloat

    保留全部

    let str = '100.5'
let num = parseFloat(str) // 100.5
document.write(num) // 100.5

    • 1
    • 2
    • 3

    parseFloat 常用作于过滤掉单位

    document.write(parseFloat('103只')) // 103
document.write(parseFloat('103.6px')) // 103.6
document.write(parseFloat('103.6斤')) // 103.6

    • 1
    • 2
    • 3

    2、转换为字符型

    • String(value)
    let str = String('12') // 字符型的12

    • 1
    • 变量名.toString(进制)，默认进制为10
    let age = 18
document.write(age.toString()) // 字符型的18
document.write(age.toString(2)) // 10010

    • 1
    • 2
    • 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>输入购物信息</title>
    <style>
      table {
        /* margin: 0px; */
        text-align: center;
        border-collapse: collapse;
      }
      table th, 
      td {
        border: 1px solid #000;
        padding: 15px;
        
      }
      table caption {
        margin: 15px;
      }
    </style>
  </head>
  <body>
    
    <script>
      let price = prompt('请输入商品单价')
      let count = prompt('请输入购买数量')
      let adddress = prompt('请输入收货地址')
      document.write(`
      <table>
      <caption>
      <h2>您的购物信息</h2>
      </caption>
      <tr>
      <th>商品名称</th>
      <th>商品单价</th>
      <th>购买数量</th>
      <th>总金额</th>
      <th>收货地址</th>
      </tr>
      <tr>
      <td>三只松鼠</td>
      <td>${price}</td>
      <td>${count}</td>
      <td>${price * count}</td>
      <td>${adddress}</td>
      </tr>
      
      </table>     
      `)
    </script>
  </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
  • 相关阅读:
    LeetCode刷题系列 -- 39. 组合总和
    ldd用于打印程序或库文件所依赖的共享库列表
    5 分钟教你快速掌握 GitHub Actions 自动部署博客
    linux篇【3】：Linux 环境基础开发工具
    第二十二章 ： Docker 部署 MySQL8
    Vue 3的新特性包括
    Vue--router和route的区别
    怎么把gif动图尺寸改小？一招教你轻松修改gif大小
    Hive之函数
    图像分割之k-means聚类分割
  • 原文地址：https://blog.csdn.net/qq_62939743/article/details/125618006