【无标题】

目录

一、变量的数据类型

二、数据类型分类

1.布尔型

2.字符串型

3.数字型

4.null

5.undefined

三、数据类型检测

四、数据类型转换

1.转换为字符串型

2.转换为数字型

3.转换为布尔型

---

一、变量的数据类型

JavaScript是一种弱类型语言，不用提前声明变量的数据类型。在程序运行过程中，变量的数据类型会被自动确定。(即给变量赋什么值，变量就是什么类型)

• 强类型语言：如：Java、C、C++
• 弱类型语言：如：JavaScript、Python、Go

二、数据类型分类

JavaScript中的数据类型分为两大类，基本数据类型和复杂数据类型（也称为引用数据类型）。

1.布尔型

布尔型通常用于逻辑判断，它有两个值：true和false，表示事物的“真”和“假”。

        var flag = true;
        console.log(flag);     // 输出：true
        console.log(flag+12);  // 将true转换为整数的1,输出：13
 
        var jia = false;
        console.log(jia);	    // 输出结果：false
        console.log(jia - 1);	// 将false转换为整数的0，输出结果：-1

2.字符串型

字符串是指计算机中用于表示文本的一系列字符，在JavaScript中使用单引号或双引号来包裹字符串。

var str1 = '单引号字符串';
var str2 = "双引号字符串";

(1)单、双引号嵌套

• 在单引号字符串中可以直接书写双引号
• 在双引号字符串中也可以直接书写单引号

var str1 = 'I am a "programmer"';	// I am a "programmer"
var str2 = "I'm a 'programmer'";	// I'm a 'programmer'

(2)转义符

在字符串中使用换行、Tab等特殊符号时，可以用转义符来进行转义，转义符以“\”开始。常见转义符见下表:

(3)字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。（所谓字符串的长度表示字符串中有效字符的个数）

var str1 = 'I\'m a programmer';
console.log(str1.length);

  

(4)访问字符串中的字符

字符串可以使用“字符串变量[index]”语法按照index（索引）访问字符，index必须是0~length-1之间的整数，如果超过了index最大值，会返回undefined。

var str = 'I\'m a programmer';
console.log(str[0]);     // 输出结果：I
console.log(str[1]);     // 输出结果：'
console.log(str[15]);   // 输出结果：r
console.log(str[16]);   // 输出结果：undefined

  

(5)字符串拼接

多个字符串之间可以使用“+”进行拼接，如果数据类型不同，拼接前会把其他类型转成字符串，再拼接成一个新的字符串。

var str = 'I\'m a programmer';
console.log('a' + 'b');      // ab
console.log('a' + 18);      // a18
console.log('_' + true);   // _true
console.log('1' + '2');    // 12  数字字符串：用单/双引号括起来的数字序列
console.log('12' + 14);   // 1214 同上
console.log(12 + 14);     // 两个数字相加，结果为26

 

举例：

“显示年龄”案例：弹出一个输入框，让用户输入年龄。输入后，单击“确定”按钮，程序弹出来一个警告框，显示内容为“您今年x岁了”，x表示刚才输入的年龄。

var age = prompt('请输入您的年龄'); // 弹出一个输入框，让用户输入年龄
var msg = '您今年' + age + '岁了';  // 将年龄与输出的字符串拼接
alert(msg);                        // 弹出警告框，输出程序的处理结果

效果图：

 

3.数字型

JavaScript中的数字型可以用来保存整数或浮点数（小数）。

var age = 18;   // 整数
var pi = 3.14;    // 浮点数(小数)

(1)常见的进制

• 二进制：由0和1组成。
• 八进制数：在数字开头加上0，八进制数由0~7组成，逢8进位。
• 十进制数：是组成以10为基础的数字系统，由0~9组成，逢10进位。
• 十六进制数：在数字开头加上0x，十六进制数由0~9，a~f组成。

(2)范围：数字型的最大值和最小值

• 最大值：Number.MAX_VALUE，输出结果：1.7976931348623157e+308
• 最小值：Number.MIN_VALUE，输出结果：5e-324

    console.log("数字型的最大值：",Number.MAX_VALUE);
    console.log("数字型的最小值：",Number.MIN_VALUE);

 

 (3)数字型的3个特殊值

• Infinity（无穷大） ：如Number.MAX_VALUE*2
• - Infinity（无穷小） ：如-Number.MAX_VALUE*2
• NaN（Not a Number 非数值）： isNaN(args)函数用来判断参数args是否是一个数字，若args是数字(包括数字字符串)函数返回false；若args是非数字,函数返回为true

        // Infinity（无穷大） ：如Number.MAX_VALUE*2
        console.log("无穷大：", Number.MAX_VALUE*2);
        // - Infinity（无穷小） ：如-Number.MAX_VALUE*2
        console.log("无穷小：", -Number.MAX_VALUE*2);
        // NaN（Not a Number 非数值）： isNaN(args)函数用来判断参数args是否是一个数字，若args是数字(包括数字字符串)函数返回false；若args是非数字,函数返回为true
        console.log("非数字：",isNaN("abc"));
        console.log("数字：",isNaN(333));

  

4.null

空值。

// 演示null的使用
var b = null;
console.log(b + '_');	// 输出结果：null_（字符串型）
console.log(b + 1);             // 输出结果：1（b转换为0）
console.log(b + true);        // 输出结果：1（b转换为0，true转换为1）

注意：空值和空串的区别

var a = '';  //空串
var b = null;  //空值

5.undefined

未定义类型。如果一个变量声明后没有赋值，则变量的值就是undefined。下面通过代码演示undefined的使用。

// 演示undefined的使用
console.log(true);		// 输出结果：true
var a;
console.log(a);		// 输出结果：undefined
console.log(a + '_');	// 输出结果：undefined_（字符串型）
console.log(a + 1);	// 输出结果：NaN

三、数据类型检测运算符

可以利用typeof运算符进行数据类型检测，返回一个变量或者一个数据的数据类型。

console.log(typeof 12);	            // 输出结果：number
console.log(typeof null);	        // 输出结果：object
var a = '12';
console.log(typeof a);              // 输出变量a的数据类型。输出结果：string
console.log(typeof a == 'string');  // 输出结果：true

四、数据类型转换

1.转换为字符串型

转换为字符串型的3种常见的方式：

①利用“+”拼接字符串（最常用的一种方式）

②利用toString()转换成字符串

举例：

var t1 = 1024;
console.log(t1.toString()); //将数值变量t1转换成字符串

注意：null和undefined无法使用toSting()方式进行转换；对于数字型的变量，可以在toString()的小括号中传入参数，来进行进制转换。

数值转换举例：

var t1 = 10;
console.log(t1.toString(2)); //转换成二进制

效果图：

 

③利用String()转换成字符串，以对象方式输出。(是JavaScript的内置类，可以直接使用） 

举例：

var str = new String('早睡早起长头发');        
console.log(str);

 效果图：

2.转换为数字型

转换为数字型的4种常见的方式：

①使用parseInt()将数字字符串转为整数

举例：

var temp = '1234';      // 数字字符串
var k = parseInt(temp); // 转成整数
console.log(k);
console.log(typeof k);

效果图：

②使用parseFloat()将数字字符串转为浮点数

举例：

var temp = '3.14159';     // 数字字符串
var k = parseFloat(temp); // 转成小数
console.log(k);
console.log(typeof k);

效果图：

③使用Number()将字符串转为数字型（整数、小数都可以）

举例：

var temp = '3.14159';
var k = Number(temp);
console.log(k);
console.log(typeof k);

效果图:

④利用算术运算符（-、*、/）隐式转换

例题：

(1)“计算年龄”案例，要求在页面中弹出一个输入框，提示用户输入出生年份，利用出生年份计算用户的年龄。

var year = prompt('请输入您的年龄');
var age = 2020 - parseInt(year); 
alert('您今年已经' + age + '岁了');

(2)“简单加法器”案例，要求在页面中弹出两个输入框，分别输入两个数字，然后返回两个数字相加的结果。

var num1 = prompt('请输入第一个数：');
var num2 = prompt('请输入第二个数：');
var result = parseFloat(num1) + parseFloat(num2);
alert('计算结果是：' + result);

(3)“计算商品总价”案例

<body>
    <label>
        商品单价：<input type="text" id="price">
    label>
    <br><br>
    <label>
        购买数量：<input type="text" id="num">
    label>
    <br><br>
    <label>
        预计总价：<input type="text" id="total">
    label>
    <br><br>
    
    <button onclick="getTotal()">计算看看button>
 
    <script>
        //定义函数
        function getTotal() {
            //1.获取单价和数量：获取input中的值
            // var p1 = document.getElementById('price')  // 获取的是Input文本框
            var p1 = document.getElementById('price').value  // 获取的是文本框中的值
            var n1 = document.getElementById('num').value
 
            //2.进行转换：将字符串转换成数字
            var sum = Number(p1) * Number(n1);
 
            //3.将运算结果放入总价的input中
            document.getElementById('total').value = sum;
        }
    script>
body>

示例图：

3.转换为布尔型

转换为布尔型使用Boolean()，在转换时，代表空、否定的值会被转换为false，如空字符串、0、NaN、null和undefined，其余的值转换为true。

console.log(Boolean(''));	              // false
console.log(Boolean(0));	              // false
console.log(Boolean(NaN));            // false
console.log(Boolean(null));              // false
console.log(Boolean(undefined));   // false
console.log(Boolean('小白'));	// true
console.log(Boolean(12));		// true