JavaScript 数据类型

2021/7/10 17:13:42

本文主要是介绍JavaScript 数据类型,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

目录

目标

数据类型简介

为什么需要数据类型

变量的数据类型

简单数据类型

数字型

数字型范围

数字型三个特殊值

isNaN

字符串型 String

字符串转义符

字符串长度及拼接

字符串长度

字符串拼接

字符串拼接加强

案例:显示年龄

布尔型 Boolean

Undefined 和 Null

获取变量数据类型

typeof

字面量

数据类型转换

含义

转换为字符串

转换为数字型(重点)

案例1:计算年龄

案例2:简单加法器

转换为布尔型


目标

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

数据类型简介

为什么需要数据类型

在计算机中,不同的数据所需占用的存储空间是不同的

为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,我们定义了不同的数据类型

简单来说,数据类型就是数据的类别型号

变量的数据类型

  • 变量是用来存储数据的场所,具有名称和数据类型
  • JavaScript 是一种弱类型或者说动态语言
  •  这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定
  • 在代码运行时,变量的数据类型是由 JS 引擎根据 " = " 右边变量值的数据类型来判断的,运行完毕之后,变量的数据类型才最终确定
  • JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型

简单数据类型

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

简单数据类型说明默认值
number数字型,包含整型值和浮点型值;如 12,0.120
boolean布尔值类型;如 true、false;等价于 1 和 0false
string字符串类型;如 '张三';JS 中,字符串都带引号" "
undefinedvar a; 声明了变量 a 但并没有给 a 赋值;此时 a = undefinedundefined
nullvar a = null;  声明了变量 a 为空值null

数字型

    <script>
        // 整型值和浮点型值都属于数字型
        var num1 = 10;
        var num2 = 3.14;
    </script>

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

在 JS 中八进制前面加 0 ;十六进制前面加 0x

    <script>
        // 八进制数字序列范围:0~7
        // 八进制前面加 0
        var num1 = 016;
        console.log(num1);
        var num = 023;
        console.log(num);
        // 十六进制数字序列范围:0~9 A~F
        // 十六进制前面加 0x
        var num2 = 0xf;
        console.log(num2);
    </script>

 

数字型范围

    <script>
        //数字型最大值
        console.log(Number.MAX_VALUE);
        //数字型最小值
        console.log(Number.MIN_VALUE);
    </script>

 

数字型三个特殊值

  • infinity;代表无穷大,大于任何值
  • -infinity;代表无穷小,小于任何值
  • NaN,not a number;代表一个非数值
    <script>
        // 无穷大
        console.log(Number.MAX_VALUE * 2);
        // 无穷小
        console.log(-Number.MAX_VALUE * 2);
        // 非数值
        console.log('zhangsan' - 100);
    </script>

isNaN

  1. isNaN() 此方法用于验证数值是否是数字型,并返回一个布尔值
  2. 如果该值是数字型,返回 false;如果该值不是数字型,返回 true
    <script>
        console.log(isNaN(10));
        console.log(isNaN('张三'));
    </script>

字符串型 String

  • 字符串型可以是引号中的任意文本,其语法为双引号 " " 和单引号 ' '
  • 因为 HTML 标签里面的属性使用的是双引号,所以 JS 更推荐使用单引号
  • JS 可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)

字符串转义符

类似 HTML 里面的特殊字符,字符串中也有特殊字符,称之为转义符

转义符以  \  开头,常用的转义符及其说明如下:

转义符解释说明
\n换行符,n 是newline
\\斜杠 \
\'' 单引号
\"" 双引号
\ttab 缩进
\b空格,b 是 blank
    <script>
        var str = '\t空山新雨后,天气晚来秋。\n\t明月松间照,清泉石上流。';
        console.log(str);
    </script>

 

字符串长度及拼接

字符串长度

  • 字符串由若干字符组成,这些字符的数量就是字符串的长度
  • 通过字符串的 length 属性可以获取整个字符串的长度
    <script>
        var str = '\t空山新雨后,天气晚来秋。\n\t明月松间照,清泉石上流。';
        console.log(str.length);  //长度为27
    </script>

字符串拼接

  • 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
  • 拼接前会把与字符串相加的任何类型转换为字符串,然后拼接成一个新的字符串
  • + 号总结口诀:数值相加,字符相连
  • 无论什么类型的数据与字符串进行拼接,结果都是字符串
console.log('中国有' + 56 + '个民族');

字符串拼接加强

// 变量尽量不要写到字符串里,通过字符串与变量名进行拼接即可
// 方便修改拼接字符串的内容
var str1 = '中国有';
var num = 56;
var str2 = '个民族';
console.log(str1 + num + str2);

案例:显示年龄

    <script>
        var age = prompt('请输入您的年龄:');
        var str = '您的年龄为' + age + '岁';
        alert(str);
    </script>

布尔型 Boolean

  • 布尔类型有两个值:true 和 false
  • 布尔型和数字型相加时,true 的值为 1,false 的值为 0
    <script>
        var flag1 = true;
        var flag2 = false;
        console.log(flag1 + 1); // 结果为 2
        console.log(flag2 + 1); // 结果为 1
    </script>

Undefined 和 Null

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

    <script>
        var str;
        console.log(str);
        var variable = undefined;
        console.log(variable + '张三'); // 结果为 undefined张三
        console.log(variable + 1); // 结果为 NaN
    </script>

给一个声明的变量赋值为 null,里面存的值为空

    <script>
        var space = null;
        console.log(space + '张三'); // 结果为 null张三
        console.log(space + 1); // 结果为 1
    </script>

获取变量数据类型

typeof

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

可以在程序出错时进行简单测试

    <script>
        var num = 10;
        console.log(typeof num); // number
        var str = '张三';
        console.log(typeof str); // string
        var bool = true;
        console.log(typeof bool); // boolean
        var high;
        console.log(typeof high); // undefined
        var space = null;
        console.log(typeof space); // object
        // prompt 取出的值是字符型
        var age = prompt('请输入您的年龄:');
        console.log(typeof age); // string
    </script>
    <script>
        console.log(18);
        console.log('18');
        console.log(true);
        console.log(undefined);
        console.log(null);
    </script>

蓝色为数字型或者布尔型,黑色为字符串型,浅灰色为 undefined 和 null 型

字面量

字面量是在源代码中一个固定值的表示法

通俗来讲,就是我们看到这个变量就可以知道它属于什么数据类型

  • 数字字面量:8,9,10
  • 字符串字面量:'张三','zhangsan'
  • 布尔字面量:true,false

数据类型转换

含义

使用表单、prompt 获取过来的数据默认是字符串类型的。此时就不能直接简单地进行加法运算,而需要抓换变量的数据类型。

通俗来讲,就是把一个变量从自身的数据类型转换为另外一种数据类型

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

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

转换为字符串

方式说明示例
toString()转换为字符串型var num = 1; alert(num.toString());
String() 强制转换转换为字符串型var num = 1; alert(String(num))
加号拼接字符串和字符串拼接的结果都是字符串var num = 1; alert(num+'zhangsan');
    <script>
        // 把数字型转换为字符串型 toString()
        var num = 10;
        var str1 = num.toString();
        console.log(str1);
        console.log(typeof str1);
        // 把布尔型转换为字符串型 String()
        var bool = true;
        var str2 = String(bool);
        console.log(str2);
        console.log(typeof str2);
        // 把数字型转换为字符串型 加号拼接
        var age = 20;
        var str = '张三'
        var str3 = '张三' + age;
        console.log(str3);
        console.log(typeof str3);
    </script>

  •  toString() 和 String() 的使用方式不一样
  • 三种转换方式,最常用的是第三种加号拼接字符串转换方式,这种转换方式也称为隐式转换

转换为数字型(重点)

方式说明示例
parseInt(string) 函数将 string 类型转换为整数数值型parseInt('12')
parseFloat(string) 函数将 string 类型转换成浮点数数值型parseFloat('12.34')
Number() 强制转换函数将 string 类型转换为数值型Number('23')
js 隐式转换(- * /)利用算术运算隐式转换为数值型'23' - 0
    <script>
        var age = prompt('请输入您的年龄:');
        console.log(age);
        console.log(typeof age);
        // parseInt()可以把字符型转换为整数数值型,得到的必定是整数
        // 当原字符型数字为浮点型时,转换后的结果仅保留整数位
        // 带有单位的字符型,如200px,转换后将去掉单位,仅保留 200
        // 当括号中的字符串不是以数字开头时,得到的结果为 NaN 
        console.log(typeof parseInt(age));
        var height = prompt('请输入您的身高:');
        console.log(height);
        console.log(typeof height);
        // 当括号中的字符串为浮点数时,应使用 parseFloat()
        // 其他与 parseInt() 相同
        console.log(typeof parseFloat(height));
        var weight = prompt('请输入您的体重:');
        console.log(weight);
        console.log(typeof weight);
        // Number()
        console.log(typeof Number(weight));
        // 隐式转换,与数字型数值 - * /
        var BMI = height - 65;
        console.log(BMI);
        var info = '您的年龄为' + age + '岁\n' + '您的身高为' + height + 'cm\n' + '您的体重为' + weight + 'kg';
        alert(info);
    </script>

案例1:计算年龄

在页面中演出一个输入框,输入出生年份,计算年龄

    <script>
        var year = prompt('请输入您的出生年份:');
        var age = 2021 - year + 1;
        var str = '您的年龄为' + age + '岁';
        alert(str);
    </script>

案例2:简单加法器

计算两个数的值,用户输入第一个值后,继续弹出第二个输入框并输入第二个值,最后通过弹出窗口显示两个输入值之和

    <script>
        var num1 = prompt('请输入第一个值:');
        var num2 = prompt('请输入第二个值:');
        // 注意 + 为字符串拼接
        // 进行加法运算时,两侧的值均需转换为数字型
        var result = parseInt(num1) + parseInt(num2);
        alert('相加结果为:' + result);
    </script>

转换为布尔型

方式说明示例
Boolean() 函数其他类型转换为布尔值Boolean('true')
  • 代表空、否定的值会被转换为 false,如 ''、0、NaN、null、undefined
  • 其余值会被转换为 true
    <script>
        // 当''中只有空格时,输出结果也为 true
        console.log(Boolean(''));
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(null));
        console.log(Boolean(undefined));
        // 除以上五种外,其他都为true
        console.log(Boolean('张三'));
        console.log(Boolean(' '));
        console.log(Boolean(12));
    </script>


这篇关于JavaScript 数据类型的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程