js数据类型(1)----简单数据类型_js16进制转0x-CSDN博客

本文链接：https://blog.csdn.net/h54211/article/details/127999752

本文详细介绍了JavaScript中的五种基本数据类型：Number、String、Boolean、undefined和null，包括它们的特点、转换规则和常见操作。此外，还讲解了如何获取和设置元素属性以及操作表单元素内容的方法。内容涵盖了数据类型检测、数值转换、字符串操作以及布尔值转换等核心概念。

摘要由CSDN通过智能技术生成

1、基本数据类型（5种）

typeof 检测变量的数据类型

语法：

typeof 变量名

typeof(变量名)

<script>
        var a = 10;
        var b = '10';
        console.log(typeof a,typeof(a))
        console.log(typeof b,typeof(b))
 </script>

（1）Number 数字类型

（1）基本数值：整数、小数、负数

（2）进制数

八进制：由0,1,2,3，4,5,6,7来构成，以0开头，没有超过8以上的数字就是八进制

例070 0*8^0 + 7* 8^1 = 56 个位*8^0+十位*8^1...

十六进制：由0-9,a-f来构成，以0x开头

例0xa1 1*16^0+ a*16^1=161 个位*16^0+十位*16^1...

（3）特殊

NaN: not a number 不是一个数字

Infinity: 无穷大

(2)String

只要被引号包裹起来的就是字符串

用户输入的都是字符串类型的

字符串遇到+会变成字符串拼接
<script>
    var name1 = 'hou'
    var age1 = 18
    console.log(""+name1+"才"+age1+"岁")
</script>
基本操作：

获取字符串的长度字符串.length

获取某个具体的字符（通过下标获取，下标从0开始）

字符串[下标]

字符串.charAt(下标)
<script>
        var str1 = 'hello world'
        console.log(str1.charAt(0))
        console.log(str1.charAt(5))
        console.log(str1[0])
        console.log(str1.length); 
 </script>

（3）Boolean

只有两个值： true false

可以通过比较得到true或者false

非空为真，非0为真

(4)undefined

未定义，变量只声明未赋值的时候会出现undefined

(5)null

空值，空对象

是一个特殊的对象

2、数据类型的强制转换

（1）转成数值型

Number(要转换的值)

纯数字字符串可以直接转成数字

空字符串转成0

true---1

false---0

null---0

其他不能转的就是NaN

<script>
        var a = 10
        var b = '16px'
        var g = ""
        var c = true
        var d = false
        var e = null
        var f = undefined
    
        

        console.log(typeof a);
        console.log(Number(a));  //纯数字字符串可以直接转化为数字
        console.log(Number(b));  //NaN
        console.log(Number(g));  //空字符串转成0
        console.log(Number(c));  //1
        console.log(Number(d));  //0
        console.log(Number(e));  //0
        console.log(Number(f));  //NaN
    </script>

parseInt(要转换的值)

转成整数、小数部分直接省略

转换规则: 从左到右一位一位进行转换，只能转纯数字，遇到小数省略，遇到非数字就停止转换，开头就不能转就直接是NaN
 <script>
        var a = '10'
        var b = '16px'
        var g = ""
        var c = true
        var d = false
        var e = null
        var f = undefined

        console.log(parseInt(b));

    </script>

parseFloat(要转换的值)

保留小数

转换规则: 从左到右一位一位进行转换，只能转纯数字，遇到非数字就停止转换，开头就不能转就直接是NaN

 <script>
        var a = '10'
        var a1 = '10.11'
        var b = '16.5px'
        var b1 = '16a5px'
        var g = ""
        var c = true
        var d = false
        var e = null
        var f = undefined
        var num = 9.9

        console.log(parseFloat(a)); //10
        console.log(parseFloat(a1));  //10.11
        console.log(parseFloat(b));  //16.5
        console.log(parseFloat(b1));  //16
        console.log(parseFloat(g));  //NaN
        console.log(parseFloat(c,d,e,f));  //NaN
        console.log(parseFloat(num));  //9.9
        console.log(parseInt(num));  //9

    </script>

（2）转成字符串型

String(要转换的值) ：任何类型都可以转

变量.toString() ： null和undefined会报错

<script>
        // 简单数据类型
        var a = 10
        var b = 100.1
        var c = true
        var d = false
        var e = null
        var f = undefined

        console.log(a,typeof a,String(a));
        console.log(b,typeof b,String(b));
        console.log(c,typeof c,String(c));
        console.log(d,typeof d,String(d));
        console.log(e,typeof e,String(e));
        console.log(f,typeof f,String(f));

        console.log(a,a.toString());
        console.log(b,b.toString());
        console.log(c,c.toString());
        console.log(d,d.toString());
       // console.log(e,e.toString());  //报错
        //console.log(f,f.toString());  //报错

        var num = 115
        console.log(num.toString(16));
     </script>

（3）转成布尔类型

Boolean(要转换的值）

通过Boolean()来转，我们发现哪些结果是false?

false、0、NaN、""、undefined、null

<script>
        var a = 10
        var b = 0
        var c = 20.5
        var d = -20.5
        var e = 'hello'
        var f = ''
        var g = '0'
        var h = null
        var i = undefined
        var j = NaN

        console.log(Boolean(j));
        console.log(Boolean(i));
    </script>

3、操作元素的属性

获取元素的属性 var 变量名 = 元素.属性

设置元素的属性元素.属性 = 值

<!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: 300px;
            height: 300px;
        }
        .red {
            background: red;
        }
        .blue {
            background: blue;
        }
    </style>
</head>
<body>
   

     <div id="box" class="blue"></div>
     <button id="btn1">获取id属性</button>
     <button id="btn2">换红色背景</button>
     <button id="btn3">换蓝色背景</button>

     <script>
        // 1、获取元素
        var btn1 = document.getElementById('btn1')
        var btn2 = document.getElementById('btn2')
        var btn3 = document.getElementById('btn3')
        var box = document.getElementById('box')

        //2、给btn1添加点击事件
        btn1.onclick = function() {
            //3、干啥事   获取box的id值
            var i = box.id
            var c = box.className
            console.log(i,c);
        }

        btn2.onclick = function() {
            box.className = 'red'
        }
        btn3.onclick = function() {
            box.className = 'blue'
        }
     </script>
</body>
</html>

4、操作表单元素的内容

获取表单元素的内容 var 变量名 = 元素.value

设置表单元素的内容元素.value = 值

<!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>
   
    <input id="inp" type="text">
    <button id="btn1">获取用户输入的值</button>
    <button id="btn2">设置用户输入的值</button>

    <script>
        var inp = document.getElementById('inp')
        var btn1 = document.getElementById('btn1')
        var btn2 = document.getElementById('btn2')

        btn1.onclick = function () {
            var text = inp.value;
            console.log(text);
        }
        btn2.onclick = function () {
            inp.value = '今晚吃啥呢？'
        }     
    </script>
</body>

</html>