二、数据类型 - JavaScript+jQuery 笔记

最新推荐文章于 2022-04-21 17:29:23 发布
最新推荐文章于 2022-04-21 17:29:23 发布
阅读量993 收藏 2
点赞数 3
分类专栏： JavaScript程序 文章标签： javascript jquery 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57002282/article/details/121071984
版权

目录

前言

  在计算机中，不同的数据所占用的存储空间是不同的，为了充分利用储存空间，在编程语言中定义了多种不同的数据类型。本节将对数据类型以及数据类型转换进行介绍。

一、变量的数据类型

  JavaScript 是一种弱类型语言，不用提前声明变量的数据类型。在程序运行过程中，变量的数据类型会被自动确定。

  • 强类型语言：如Java、C 等
  • 弱类型语言：JavaScript 等
//强类型语言（Java）
int num = 10;  //这里的变量 num 是 int 型（整数型）
//弱类型语言（JavaScript）
var num = 10;  //这里的变量 num 一开始是一个数字型
num = 'abc';   //赋值一个字符串，现在 num 变成了字符串型

  从以上代码可以看出，JavaScript　变量的数据类型，是在程序运行时根据等号右边的值来确定的。

二、数据类型分类

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

  在本章节只讲述基本数据类型，复杂数据类型将会在后面讲述。

1、数字型

  数字型（Number），包含整型值和浮点型值。

var num1 = 21;   //整型值（整数）
var num2 = 0.21; //浮点型值（小数）

① 进制

  常见的进制有二进制、八进制、十进制和十六进制，在一般情况下，数字都是使用十进制来表示的。

  • 二进制数： 机器语言，由1和0组成，逢2进位。
  • 八进制数： 在数字开头加上0，八进制数由0 ~ 7组成，逢8进位
//八进制数
var num1 = 07;
console.log(num1);	  // 输出结果：7
var num2 = 010;
console.log(num2);    // 输出结果：8
  • 十进制数： 是组成以10为基础的数字系统，有0~9组成，逢10进位
  • 十六进制数： 在数字开头加上0x，十六进制数由0 ~ 9，a ~ f (或 A~F)组成。（在十六进制数中 “ x ” 和 “ a ~ f ” 不区分大小写）
//十六进制数
var num1 = 0x9;
console.log(num1);	  // 输出结果：9
var num2 = 0xa;
console.log(num2);	  // 输出结果：10

② 范围

  数字型的最大值和最小值可以通过如下代码获得

  • 最大值： 1.7976931348623157e+308
console.log(Number.MAX_VALUE);   //输出结果：1.7976931348623157e+308
  • 最小值： 5e-324
console.log(Number.MIN_VALUE);   //输出结果：5e-324

  在输出结果中，使用了科学计数法来表示。

③ 特殊值

  • Infinity（无穷大） ：
console.log(Number.MAX_VALUE * 2);		// 输出结果：Infinity
  • -Infinity（无穷小）：
console.log(-Number.MAX_VALUE * 2);		// 输出结果：-Infinity
  • NaN（非数值）：
console.log('abc' - 100);		    	// 输出结果：NaN
  • isNaN： 用来判断一个变量是否为非数字的类型，返回值为true表示非数字，false表示是数字
console.log(isNaN(12));				      	// 输出结果：false
console.log(isNaN('abc'));			    	// 输出结果：true

2、布尔型

  布尔型（Boolean），包含 true 和 false 两个布尔型值，表示事物的 “ 真 ” 和 “ 假 ”，通常用于逻辑判断。

 console.log(true);		  	// 输出结果：true
console.log(false);		  	// 输出结果：false

  当布尔型和数字型相加时，true 会转换成 1，false 转换成 0 。

console.log(true + 1);		// 输出结果：2
console.log(false + 1);		// 输出结果：1

3、字符串型

  字符串型（String），用单引号或双引号包裹。

var str1 = '';		  // 空字符串
var str2 = '单引号字符串';	  // 单引号包裹的字符串
var str3 = "双引号字符串";	  // 双引号包裹的字符串

① 单、双引号嵌套

  在单引号字符串中可以直接写双引号，在双引号字符串中也可以直接写单引号，实例如下：

// 正确的语法
var str1 = 'I am a "programmer"';	// I am a "programmer"
var str2 = "I'm a 'programmer'";	// I'm a 'programmer'

// 常见的错误语法
// var str1 = 'I'm a programmer';	  	// 单引号错误用法
// var str2 = "I'm a "programmer"";	    // 双引号错误用法
// var str3 = 'I am a programmer";		// 单、双引号混用

② 转义符

  在字符串中使用换行、Tab 等特殊符号时，可以用转义符来进行转义。转义符都是以 “ \ ” 开始的。

转义符解释说明转义符解释说明
\’单引号\"双引号
\nLF换行，n表示newline\v跳格（Tab、水平）
\tTab符号\rCR换行
\f换页\\反斜线（\）
\b退格，b表示blank\0Null 字节
\xhh由 2 位十六进制数字 hh 表示的 ISO-8859-1 字符。如 “ \x61 ” 表示 “ a ”\uhhhh由 4 位十六进制数字 hhhh 表示的 Unicode 字符。如 “ \u597d ” 表示 “ 好 ”

示例演示代码：

var str1 = 'I\'m a programmer';		// I'm a programmer
var str2 = 'I am a\nprogrammer'		// I am a（换行）programmer
var str3 = 'C:\\JavaScript\\';		// C:\JavaScript\
var str4 = '\x61bc';			    // abc
var str5 = '\u597d学生';			// 好学生

③ 字符串长度

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

var str1 = 'I\'m a programmer';
console.log(str1.length);			// 输出结果：16
var str2 = '我是程序员';
console.log(str2.length);			// 输出结果：5

④ 访问字符串中的字符

  字符串可以使用“ [index] ”语法按照 index（索引）访问字符，index 从 0 开始，一直到字符串的长度减 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

⑤ 字符串拼接

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

console.log('a' + 'b');		// ab
console.log('a' + 18);		// a18
console.log('_' + true);	// _true
console.log('12' + 14);		// 1214
console.log(12 + 14);		// 两个数字相加，结果为26（非字符串拼接）

  在实际开发中，常将字符串和变量进行拼接。

var age = 18;
console.log('小明' + age + '岁');	//小明18岁

⑥ “显示年龄”案例

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

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

4、未定义型

  未定义型（Undefined），只有一个值undefined。如果一个变量声明后没有赋值，则变量的值就是 undefined。

var a;			    	 // 声明变量a，未赋值，此时a就是undefined
console.log(a);			 // 输出结果：undefined
console.log(a + '_');	 // 输出结果：undefined_ （字符串型）
console.log(a + 1);	     // 输出结果：NaN

5、定型

  定型（Null），只有一个值null。我们可以给一个变量赋一个 null 值，null 一般用来表示空对象指针。

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

三、数据类型检测

  当不确定变量或值是什么数据类型的时候，可以利用 typeof 运算符进行数据类型检测。

console.log(typeof 12);			    	// 输出结果：number
console.log(typeof '12');		    	// 输出结果：string
console.log(typeof true);		    	// 输出结果：boolean
console.log(typeof undefined);		    // 输出结果：undefined
console.log(typeof null);		    	// 输出结果：object

  在上述代码中，typeof 检测 null 值时返回的是 object ，而不是 null ，这是 JavaScript 最初实现时的历史遗留问题，后来被 ECMAScript 沿用下来。
  typeof 运算符的返回结果是一个字符串，可以使用比较运算符 “ == ” 来判断 typeof 返回的检测结果是否符合预期。

var a = '12';
console.log(typeof a == 'string');		// 输出结果：true
console.log(typeof a == 'number');		// 输出结果：false

四、数据类型转换

  数据类型转换是把某一种数据类型转换成另一种数据类型。例如，使用表单、prompt()等方式获取到的数据默认是字符串型的，不能直接进行简单的加法计算，需要转换成数字型才可以计算。

1、转换为字符串型

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

  1. 利用 “ + ” 拼接字符串（最常用的一种方式）
  2. 利用 toString() 转换成字符串
  3. 利用 String() 转换成字符串
// 先准备一个变量
var num = 3.14;
// 方式1：利用“+”拼接字符串（最常用的一种方式）
var str = num + '';
console.log(str, typeof str);		// 输出结果：3.14 string
// 方式2：利用toString()转换成字符串
var str = num.toString();
console.log(str, typeof str);		// 输出结果：3.14 string
// 方式3：利用String()转换成字符串
var str = String(num);
console.log(str, typeof str);	    // 输出结果：3.14 string

  在上述代码中，console.log()可以输入多个值，中间用 “ , ” 隔开。方法1是最常用的，这种方式属于隐式转换，而另外两种属于显示转换。隐式转换是自动发生的，当操作的两个数据类型不同时，JavaScript 会按照既定的规则来进行自动转换，针对不同的数据类型有着不同的处理方式。显示转换是手动进行的，也称为强制类型转换

注意：

  • null和undefined无法使用 toSting()方式进行转换；
  • 对于数字型的变量，可以在toString()的小括号中传入参数，来进行进制转换。例如，变量 num 的值为 5 ，则num.toString(2) 表示将 5 转为二进制，结果为 101 。

2、转换为数字型

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

  1. 使用 parseInt() 将字符串转为整数
  2. 使用 parseFloat() 将字符串转为浮点数
  3. 使用 Number() 将字符串转为数字型
  4. 利用算术运算符 （-、*、/） 隐式转换
// 方式1：使用parseInt()将字符串转为整数
console.log(parseInt('78'));			  // 输出结果：78
// 方式2：使用parseFloat()将字符串转为浮点数
console.log(parseFloat('3.94'));		// 输出结果：3.94
// 方式3：使用Number()将字符串转为数字型
console.log(Number('3.94'));		  	// 输出结果：3.94
// 方式4：利用算术运算符（-、*、/）隐式转换
console.log('12' - 1);					    // 输出结果：11

  在将不同类型的数据转换为数字型时，结果不同。

待转数据Number()和
隐式转换		parseInt()parseFloat()
纯数字字符串转成对应数字转成对应数字转成对应数字
空字符串0NaNNaN
数字开头的字符串NaN转成开头数字转成开头数字
非数字开头字符串NaNNaNNaN
null0NaNNaN
undefinedNaNNaNNaN
false0NaNNaN
true1NaNNaN

  在转换纯数字时，会忽略开头的 0，如字符串 “ 0123 ”会被转换成 123 。数字开头由 “ + ”，会被当成正数，数字开头由 “ - ”，会被当成负数。

console.log(parseInt('03.14'));			// 输出结果：3
console.log(parseInt('03.94'));			// 输出结果：3
console.log(parseInt('120px'));			// 输出结果：120
console.log(parseInt('-120px'));		// 输出结果：-120
console.log(parseInt('a120'));			// 输出结果：NaN

console.log(parseInt('F', 16));      	// 输出结果：15

  在上述代码中，使用 parseInt() 可以利用第 2 个参数设置转换进制，如将字符 “ F ” 转换为十六进制，结果为 15 。

案例-“计算年龄”

  要求在页面中弹出一个输入框，提示用户输入出生年份，利用出生年份计算用户的年龄。

<script>
 	var year = prompt('请输入您的年龄');
 	// 由于year是字符串，需要进行转换
 	var age = 2021 - parseInt(year); 
    alert('您今年已经' + age + '岁了');
    </script>

案例-“简单加法器”

  要求在页面中弹出两个输入框，分别输入两个数字，然后返回两个数字相加的结果。

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

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

总结

  本节介绍了JavaScript 中最基础的语法知识，如数据类型的概念以及数据类型的转换。

尾注

  希望这篇文章对你有所帮助，记得转载、点赞、收藏，支持一下，小编将会持续更新哦

小泽的熊先森
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【JavaScript】JavaScript的数据类型
早睡早起长头发的博客
09-05 1145
一、变量的数据类型 二、数据类型分类 1.布尔型 2.字符串型 3.数字型 4.null 5.undefined 三、数据类型检测 四、数据类型转换 1.转换为字符串型 2.转换为数字型 3.转换为布尔型
jquery数据类型转换
最新发布
csdn_aspnet的专栏
06-08 1373
jQuery是一个非常优秀的JavaScript库，它能够轻松地操作和处理HTML文档、处理事件、动态改变CSS和页面内容，甚至还可以进行Ajax操作。在jQuery的开发过程中，我们会经常遇到各种数据类型的转换，本文将详细介绍jQuery中常用的数据类型转换方法。在开发过程中，我们需要经常进行数据类型的转换，上面提到的这些方法都是开发必须要了解的。JSON.stringify方法。parseFloat方法。isNumeric方法。parseInt方法。二、String转换。toString方法。
JQuery类型转换
拓
05-18 1万+
来自：http://blog.csdn.net/kfanning/archive/2010/04/14/5485412.aspx转换成数字ECMAScript提供了两种把非数字的原始值转换成数字的方法，即parseInt()和parseFloat()。注意：只有对String类型(Number除外)调用这些方法，才能正确运行对其他类型返回的都是NaN。例如：Js代码
js jquery 字符型 數字型 類型轉換
bearhoop IT之道
09-05 1410
转换成数字 ECMAScript提供了两种把非数字的原始值转换成数字的方法，即parseInt()和parseFloat()。 注意：只有对String类型(Number除外)调用这些方法，才能正确运行对其他类型返回的都是NaN。 例如： Js代码 var
JS数据类型 以及 数据类型的转换
halo1416的博客
08-21 220
ECMAScript中将数据类型分为三类：基本数据类型，特殊数据类型和复合（引用）数据类型 一、基本数据类型 String：字符串数据类型，放在单引号或者双引号中 Number：数字类型，包括int和float两种 Boolean：布尔类型，只有true和false两种值 二、特殊数据类型 undefined：变量声明后但未赋值，其值便为undefined，如：var a；还有一种情...
基本数据类型间的转换 (转)
轻舞飞沙
11-10 783
 基本数据类型间的转换 1、Java要做到平台无关性，所有的基本数据类型所占的字节数量均是固定的。           boolean ——1/8字节(1 bit)     byte —— 1字节             char —— 2字节         short —— 2字节           int —— 4字节                          long
JavaScript数据类型判定的总结笔记
10-23
总结来说，这篇笔记提供了多种方式来判定JavaScript中的数据类型，包括`typeof`、`constructor`属性、`Object.prototype.toString`方法以及jQuery中的`type`函数等。此外，作者还详细介绍了特殊情况下的类型检测，为...
javascript-jquery学习笔记.docx
10-20
总的来说，JavaScript 和 jQuery 的学习涵盖了变量、数据类型、控制结构、DOM 操作和事件处理等多个方面，是 web 开发的基础。理解并熟练掌握这些知识点，能够帮助开发者构建功能丰富、交互性强的网页应用。
javaScript--jQuery笔记.txt
12-13
JavaScript支持多种数据类型，包括数字、字符串、布尔值、对象、数组等。条件表达式是JavaScript中的一个特色，如`ternary operator`（三元运算符），用于根据条件选择不同的值。示例：`greeting = (visitor == ...
JS+JQuery+CSS基础笔记
04-15
1. 变量与数据类型：JavaScript支持var、let和const关键字声明变量，数据类型包括基本类型（如字符串、数字、布尔值）和引用类型（如对象和数组）。 2. 控制结构：条件语句（if...else）、循环（for、while、do......
JS----简单加法器案例
༄༊星河༣
06-07 2538
题目：计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示两个值相加的结果 <script> var num1 = prompt('请输入你的第一个值'); var num2 = prompt('请输入第二个值'); alert(Number(num1)+Number(num2)); </script> ...
JavaScript教程（一）
m0_56752010的博客
04-21 2440
听课笔记
使用Number(）避免页面上的数字被使用科学计数法显示
施勇
11-17 1万+
今天在开发一个页面的时候，需要显示公司的相关信息，我是在js中拼接后，显示在页面上的，问题就出在注册资本上面，因为有的公司注册资本非常大，例如16483800万元，页面上会显示成1.64838E+7。这本身也没什么错，只是显示格式上和其他的不一样，怕影响客户阅读。如果不需要按科学计算法显示，加上new Number()就可以了。new Number(registeredCapital)这样注册资本就
js 数字转为科学计数法
小小程序猿
06-16 9033
console.log(Math.LN10); console.log(Math.log(500)/Math.LN10); console.log(Math.floor(Math.log(500)/Math.LN10)); var value = 0.051253; var p = Math.floor(Math.log(value)/Math.LN10); var n = value * Ma
js把科学计数法表示的字符串转化为数值的方法
热门推荐
sweetanan888的专栏
08-19 2万+
js把科学计数法表示的字符串转化为数值的方法，比较简单的办法如下 function doIt(){ var num = new Number("3.4556645445E7"); alert(num); }
【笔记】jquery加减乘除及科学计算法处理
weixin_33724059的博客
06-19 522
/** * 加法运算，避免数据相加小数点后产生多位数和计算精度损失。 * * @param num1加数1 | num2加数2 */ function numAdd(num1, num2) { var baseNum, baseNum1, baseNum2; try { baseNum1 = num1.toString().split(".")[1].lengt...
js处理科学计数法
看写写
11-05 6893
js处理科学计数法 使用js自带的Number函数就可以 使用Number.toFixed cellValue = 4.0E-12 cellValue = Number(cellValue).toFixed(precision); 输出：以下是再chrom的调试模式下的console里面的输出 Number(4.0e-12).toFixed(12) "0.0000000000004...
JavaScript基础与jQuery学习笔记
1. ECMAScript：定义了JavaScript的语法、数据类型、运算符、控制结构等核心概念。 2. 浏览器对象模型(BOM)：允许JavaScript与浏览器窗口交互，如弹窗、前进/后退操作等。 3. 文档对象模型(DOM)：提供了处理HTML和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小泽的熊先森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值