web 数据类型

数据类型

目标

• 能够说出 5 种简单数据类型
• 能够使用 typeof 获取变量的类型
• 能够说出 1 - 2 种转换为数值型的方法
• 能够说出 1 - 2 种转换为字符型的方法
• 能够所处什么是隐式转换

目录

• 数据类型简介
• 简单数据类型
• 获取变量数据类型
• 数据类型转换

1. 数据类型简介

1.1 为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

简单来说，数据类型计算数据的类型型号。比如：姓名 “张三”，年龄 18，这些数据的类型是不一样的。

1.2 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

    <script>
      // var num; // 这里的num 我们是不确定属于哪种数据类型的
      var num = 10; // num 属于数字型
      // js 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的
      var str = "pink"; // str 属于字符串类型
    </script>

在代码运行时，变量的数据类型是由 JS 引擎根据 = 右边变量的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型。

    <script>
      var num = 6; // num 为数字类型
      num = "bill"; // num 为字符串类型
      console.log(typeof num);
    </script>

1.3 数据类型的分类

JS 把数据类型分为两类：

• 简单数据类型（Number、String、Boolean、Undefined、Null）
• 复杂数据类型（Object）

2. 简单数据类型

2.1 简单数据类型（基本数据类型）

JavaScript 中的简单数据类型及其说明如下：

2.2 数字型 Number

JavaScript 数字类型既可以用来保存整数值，也可以保存小数（浮点数）。

    <script>
      var age = 21; // 整数
      var age = 21.3734; // 小数
    </script>

1. 数字型进制

最常见的进制有二进制、八进制、十进制、十六进制。

    <script>
      // 1. 八进制 0~7 我们程序里面数字前面加0 表示八进制
      var numl = 010;
      console.log(numl); // 010 八进制 转换为 10进制 就是 8
      var num2 = 012;
      console.log(num2); // 10
      // 2. 十六进制 0~9 a~f 数字的前面加 0x 表示十六进制
      var num3 = 0x9;
      console.log(num3); // 9
      var num4 = 0xa;
      console.log(num4); // 10
    </script>

现阶段我们只需要记住，在 JS 中八进制前面加 0，十六进制前面加 0x

2. 数字型范围

JavaScript 中数值的最大和最小值

    <script>
      // 数字型的最大值
      console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
      // 数字型的最小值
      console.log(Number.MIN_VALUE); // 5e-324
    </script>

• 最大值：Number.MAX_VALUE，这个值为：1.7976931348623157e+308
• 最小值：Number.MIN_VALUE，这个值为：5e-324

3. 数字型三个特殊值

    <script>
      // 无穷大
      console.log(Number.MAX_VALUE * 2); // Infinity
      alert(Infinity); // Infinity
      // 无穷小
      console.log(-Number.MIN_VALUE * 2); // -Infinity
      alert(-Infinity); // -Infinity
      // 非数值
      console.log("pink老师" - 100); // NaN
      alert(NaN); // NaN
    </script>

• Infinity，代表无穷大，大于任何数值
• -Infinity，代表无穷小，小于任何数值
• NaN，Not a number，代表一个非数值

4. isNaN( )

用来判断一个变量是否为非数字的类型，返回 true 或者 false

    <script>
      // isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字返回的是 false 如果不是数字返回的是 true
      console.log(isNaN(12)); // false
      console.log(isNaN("pink老师")); // true
    </script>

2.3 字符串型 String

字符串型可以是引导中的任意文本，其语法为双引号 “” 和单引号 ’ '。

    <script>
      var strMsg1 = "我爱北京天安门~" // 使用双引号表示字符串
      var strMsg2 = '我爱吃猪蹄~' // 使用单引号表示字符串
      // 常见错误
      // var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js，没有这些语法
    </script>

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

1. 字符串引号嵌套

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）

    <script>
      var strMsg = '我是"高富帅"程序员'; // 可以用 '' 包含 ""
      var strMsg2 = "我是'高富帅'程序员"; // 也可以用 "" 包含 ''
      // 常见错误
      // var badQuotes = 'What on earth?"; // 报错，不能单双引号搭配
    </script>

2. 字符串转义符

类似 HTML 里面的特殊字符，字符串中也有特殊字符，我们称为转义符。

转义符都得 \ 开头的，常用的转义符及其说明如下：

案例：弹出网页警示框

酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景，我审视四周。这里，是我的舞台，我就是天地间的王者。这一刻。我豪气冲天，终于大喊一声：“收破烂啦 ~”。

 <script>
      alert(
        '酷热难耐，火辣的太阳底下，我挺拔的身姿，成为了最为独特的风景，\n 我审视四周。这里，是我的舞台，我就是天地间的王者。\n 这一刻。我豪气冲天，终于大喊一声："收破烂啦 ~"。'
      );
 </script>

3. 字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

    <script>
      // 检测获取字符串的长度 length
      var str = "my name is andy";
      console.log(str.length); // 15
    </script>

4. 字符串拼接

• 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

    <script>
      // 字符串的拼接 +
      console.log("沙漠" + "骆驼"); // 字符串的 沙漠骆驼
      console.log("pink老师" + 18); // pink老师18
      console.log("pink" + true); // pinktrue
      console.log(12 + 12); // 24
      console.log("12" + 12); // 1212
    </script>

​ + 号总结口诀：数值相加，字符相连

5. 字符串拼接加强

    <script>
      console.log("pink老师" + 18); // pink老师18
      console.log("pink老师" + 18 + "岁"); // pink老师18岁
      var age = 18;
      // 我们变量不要写到字符串里面，是通过和字符串相连的方式实现的
      console.log("pink老师" + age + "岁"); // pink老师18岁
      // 变量和字符串相连的口诀： 引引加加
    </script>

• 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
• 变量是不能添加引号的，因为加引号的变量会变成字符串
• 如果变量两侧都有字符串拼接，口诀 “引引加加”，删掉数字，变量写加中间

案例：显示年龄

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示 “您今年 xx 岁啦”（xx 表示刚才输入的年龄）

案列分析：

• 这是利用 JS 编写的一个非常简单的交互效果程序
  • 弹出一个输入框（prompt），让用户输入年龄（用户输入）
  • 把用户输入的值用变量保存起来，把刚才输入的年龄与所要输出的字符串拼接（程序内部处理）
  • 使用 alert 语句弹出警示框（输出结果）

    <script>
      var age = prompt("请输入您的年龄");
      alert("您今年" + age + "岁啦");
    </script>

2.4 布尔型 Boolean

布尔类型有两个值：true 和 false，其中 true 表示真（对），而 false 表示假（错）。

布尔值和数字型相加的时候，true 的值为 1，false 的值为 0

    <script>
      var flag = true; // flag 布尔型
      var flag1 = false; // flag1 布尔型
      console.log(flag + 1); // 2 true 参与加法运算当 1 来看
      console.log(flag1 + 1); // 1 false 参与加法运算当 0 来看
    </script>

2.5 Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined（如果进行相连或者相加，注意结果）

    <script>
      // 如果一个变量声明未赋值 就是 undefined 未定义数据类型
      var str;
      console.log(str); // undefined
      var variable = undefined;
      console.log(variable + "pink"); // undefinedpink
      console.log(variable + 1); // NaN
    </script>

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究 null）

    <script>
      // null 空值
      var space = null;
      console.log(space + "pink"); // nullpink
      console.log(space + 1); // 1
    </script>

3. 获取变量数据类型

3.1 获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型

    <script>
      var num = 10;
      console.log(typeof num); // number
      var str = "pink";
      console.log(typeof str); // string
      var flag = true;
      console.log(typeof flag); // boolean
      var vari = undefined;
      console.log(typeof vari); // undefined
      var timer = null;
      console.log(typeof timer); // object
    </script>

3.2 字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

• 数字字面量：8,9,10
• 字符串字面量：‘黑马程序员’，‘大前端’
• 布尔字面量：true，false

4. 数据类型转换

4.1 什么是数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现 3 种方式的转换：

• 转换为字符串类型
• 转换为数字型
• 转换为布尔型

4.2 转换为字符串

• toString() 和 String() 使用方式不一样。

• 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

•     <script>
        // 1. 把数字型转换为字符串型
        var num = 10;
        var str = num.toString();
        console.log(typeof str); // string
        // 2. 我们利用 String(变量)
        var str1 = String(num);
        console.log(typeof str1); // string
        // 3. 利用 + 拼接字符串的方法实现转换效果
        var str2 = num + "";
        console.log(typeof str2); // string
      </script>
  

4.3 转换为数字型（重点）

• 注意 parseInt 和 parseFloat 单词的大小写，这 2 个是重点

• 隐式转换是我们在进行算术运算的时候，JS 自动转换了数据类型

•     <script>
        var age = prompt("请输入您的年龄");
        // 1. parseInt(变量) 可以把 字符型的转换为数字型 得到是整数
        console.log(parseInt(age));
        console.log(parseInt("3.14")); // 3 取整
        console.log(parseInt("3.94")); // 3 取整
        console.log(parseInt("120px")); // 120 会去掉这个px单位
        console.log(parseInt("rem120px")); // NaN
        // 2. parseFloat(变量) 可以把 字符串的转换为数字型 得到是小数 浮点数
        console.log(parseFloat("3.94")); // 3.94
        console.log(parseFloat("120px")); // 120 会去掉这个px单位
        console.log(parseFloat("rem120px")); // NaN
        // 3. 利用 Number(变量)
        var str = "123";
        var num = Number(str);
        console.log(typeof num); // number
        // 4. 利用了算术运算  隐式转换
        console.log("12" - 0); // 12
        console.log("123" - "120"); // 3
        console.log("123" + "120"); // 123120
        console.log("123" + 1); // 1231
      </script>
  

案例1：计算年龄

此案例要求在页面中弹出一个输入框，我们输入出生年份后，能计算出我们的年龄。

案例分析：

1. 弹出一个输入框（prompt），让用户输入出生年份（用户输入）
2. 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄（程序内部处理）
3. 弹出警示框（alert），把计算的结构输出（输出结果）

    <script>
      var born = prompt("请您输入出生年份");
      var age = 2022 - born; // born 取过来的是字符串 但是这里用的减法 有隐式转换
      alert("您今年" + age + "岁了");
    </script>

案例2：简单加法器

计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，然后通过弹出窗口显示出两次输入值相加的结果。

案例分析：

1. 先弹出第一个输入框，提示用户输入第一个值，保存起来
2. 再弹出第二个框，提示用户输入第二个值，保存起来
3. 把这两个值相加，并将结果赋给新的变量（注意数据类型转换）
4. 弹出警示框（alert），把计算的结果输出（输出结果）

    <script>
      var num1 = prompt("请你输入第一个值");
      var num2 = prompt("请您输入第二个值");
      var num3 = parseFloat(num1) + parseFloat(num2);
      alert(num3);
    </script>

4.4 转换为布尔型

• 代表空、否定的值会被转换为 false，如 ’ '、0、NaN、null、undefined
• 其余值都会被转换为 true

    <script>
      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("----------");
      console.log(Boolean("小白")); // true
      console.log(Boolean(2)); // true
    </script>