JavaScript 数据类型

基本数据类型

分为四大基础类型

数值类型

常见的

let n1 = 100 			let n5 = 2e5 
let n2 =-100
let n3 = 100.234
let n4=-100.234 			

 一般为正负数       另一种则是右边这里的 2e5表示2乘以 10的五次方

字符串类型

单引号 和 双引号包裹的内容 就是字符串

js里面不区分单引号双引号 只要前后配套就可以了

字符串的弹窗示例：

alert('hello wrold') 
alert("hello wrold") 

字符串的输入输出结合示例：

    <script>
        // 模板字符串
        let every = prompt('请输入你的名称');
        let age = prompt('请输入你的年龄');
        // console.log(every);
        // 用反引号拼接 字符和大括号组成${} 
        document.write(`大家好,我是${every},今年${age}岁了。我希望世界核平`);
    </script>

布尔类型

分别是 true（ 真 ） 和 false （ 假 ）

当给变量赋值的时候 给 true 或 false 表示这个变量就是一个布尔制

let b1 = true
let b2 = false

空类型 空类型分两种 Undefined Null

Null : 表示有值 ，有一个空值

当我们给变量赋值为null的时候 这个变量保存的才是null 例如：手中无剑，心中有剑 摸不着看不见

let k1 = null

Undefined 表示没有值

当一个变量的定义 但是没有赋值的时候 那么他就是Undefined的表示 例如：刚收楼的房子是个毛坯 里面啥都没有

let k2

引用数据类型

使用 typeof 关键字来进行数据类型检测

语法：typeof 要检测的变量

结果：该变量存储的数据的数据类型

引用数据类型

object 对象 function 函数 array 数组

    <script>
        var n1 = 100
        // 其中 typeof n1 表示正在检测这个变量 会把检测结果复制给 result 这个变量
        var result = typeof n1
        // 最后打印result这个变量 在浏览器控制台查看结果 出现number这个变量表示数值类型的数据
        console.log(result)
    </script>

基础说明总结

数值类型Number：十进制数字、科学计数法、其他进制表示方式的数字

字符串类型 string ：单引号或者双引号包裹的一切内容

布尔类型 Boolean ： true 和 false

**空类型 ** ： udnefined 未定义型 null 空类型 Null

使用 typeof 关键字进行基本数据类型的检测

基础数据类型检测

<script>
        // 基础数据检测 通过 typeof来检测变量的类型
        // 当在控制台检测结果显示number 代表数值类型
        let n1 = 100
        let result1 = typeof n1
        console.log(result1)

        // 当在控制台检测结果显示string 代表字符串类型
        let s1 = 'hello world'
        let result2 = typeof s1
        console.log(result2)

        // 当在控制台检测结果显示boolean 代表布尔类型
        let b1 = true
        let result3 = typeof b1
        console.log(result3)

        // 当在控制台检测结果显示undefined 代表空类型 undefined
        let k1 
        let result4 = typeof k1
        console.log(result4)

        // 当在控制台检测结果显示object 代表空类型  null
        let k2 = null
        let result5 = typeof k2
        console.log(result5)
    </script>

JavaScript数据类型转换

转数值

隐形转换

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

隐性转换 工作中比较常用的转换写法 最简洁

除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

    <script>
        // 隐性转换   工作中比较常用的转换写法  最简洁
        let num1 = +prompt('请输入你的数字');
        let num2 = +prompt('请输入你的数字');
        console.log(num1 + num2);
        //像以下也是隐形装换的写法
        let num3 = '2'; //字符串类型
        let num4 = num2 - 0; //通过减号 让num2转为数值类型 
        console.log(typeof num4);
    </script>

• 一般加号要写在代码前面 表示转为数值类型

显性转换

1、number（）;

语法：number（要转换的内容）

结果：转换好数值类型的结果

1、示例 ：让字符串转换为数值 Number（）

如果转换的是非数字 转换失败时结果为 NaN（Not a Number）即不是一个数字

​ NaN也是number类型的数据，代表非数字

    <script>
        // 准备一个变量 赋值为字符串类型内容
        let s1 = '100'
        console.log(s1)
        console.log(typeof s1)
        // 使用number（ ）方法进行一下转换
        let n1 = Number(s1)
        console.log(n1)
        console.log(typeof n1)
    </script>

2、parseint（）

语法：parseint（要转换的内容）

结果：转换好数值类型的结果

    <script>
        // 准备一个变量 赋值为字符串类型内容
        let s1 = '100abc'
        console.log(s1)
        console.log(typeof s1)
        // 使用parseInt（  ）方法进行一下转换
        let n1 = parseInt(s1)
        console.log(s1)
        console.log(typeof n1)
    </script>

简便点的写法

使其变成一个简易的计算器

      let num1 = prompt('请输入你的数字');
      let num2 = prompt('请输入你的数字');
      // 代码转换数据的方式 
      console.log(parseInt(num1) + parseInt(num2));

3、parseFloat ( )

语法：parseFloat（要转换的内容）

结果：转换好数值类型的结果 能转换到小数点后的数字

    <script>
        // 准备一个变量 赋值为字符串类型内容
        let s1 = '100abc'
        console.log(s1)
        console.log(typeof s1)
        // 使用number（ ）方法进行一下转换
        // 使用parseInt（  ）方法进行一下转换 只能转换整数
        // 使用parseFloat  ）方法进行一下转换 能转换到小数点后的数字
        let n1 = parseFloat(s1)
        console.log(s1)
        console.log(typeof n1)
    </script>

转字符串

数值类型转换成字符串类型 隐性转换是在数值前加单引号 let str = 123 + '';

显性转换为字符型:

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

下图所示：

    <script>
        // 转成字符串
        let num1 =123;
        let str = 123 + ''; //隐性转换
        // console.log(str);
        // let str = String(num1);  //显示转换
        // console.log(typeof str);
        // let str = num1.toString();  //显示转换
        console.log(typeof str);
    </script>

字符串还可以配合输出代码填写一些css代码

例如 document.write(" "); 也可以在里面书写标签

    <script>
         document.write(`<h1>大标题! <h1/>`);
    </script>

用反引号还可以换行来写代码

如果不换行 用那种引号都可以 如果换行了 那么就只能使用 反引号

只要是写标签字符串 都可以使用反引号 - 模版字符串

结合反引号 用前面的知识做一个订单弹窗页面 案例

    <title>订单付款确认页面</title>
    <style>
        table,tr,td{
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;
            margin: 0 auto;
            padding: 2px;
        }
    </style>
</head>
<body>
    <script>
        let num1 = prompt('请输入你的商品');
        let num2 = prompt('请输入商品价格');
        let num3 = prompt('请输入商品数量');
        let num4 = num2 * num3
        let num5 = prompt('收货地址');
        let table = document.write(`
    <table border="1">
        <caption>订单付款确认页面</caption>
        <thead>
           <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th> 
           </tr> 
        </thead>
        <tbody>
            <tr>
                <td>${num1}</td>
                <td>${num2}</td>
                <td>${num3}</td>
                <td>${num4}</td>
                <td>${num5}</td>
            </tr>
        </tbody>
    </table>`)
    </script>
</body>

注意 ： 变量 在反引号中 只能使用 ${ } 固定用法

转布尔

1、boolean（）；

语法 ： 要转换的内容 .boolean（）；

结果 ： 转换好布尔类型的结果

布尔只有两个值 : true false

转换成true

    <script>
        // 准备一个变量 赋值为字符串类型
        let s1 = 'abc'
        console.log(s1)
        console.log(typeof s1)
        // 使用Boolean( ) 方法进行转换
        let b1 = Boolean(s1)
        console.log(b1)
        console.log(typeof b1)
    </script>

转换成false只有五个内容 其他都会转成true

false ： 分别是 0 nan ‘ 空字符串 ’ undefined null NaN 这几个内容

    <script>
        // 依次转换为false内容
        console.log(Boolean(0))
        console.log(Boolean(NaN))
        console.log(Boolean(''))
        console.log(Boolean(undefined))
        console.log(Boolean(null))
    </script>