JS基本数据类型

最新推荐文章于 2025-07-23 11:43:47 发布

原创最新推荐文章于 2025-07-23 11:43:47 发布 · 1.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

一、数据类型简介和检测

1.1 JavaScript 中两大数据类型

（1）基本数据类型

teps : JS 没有字符型（char），JS 的 String 是基本类型！

Number（数字）
String（字符串）
Boolean（布尔）
Undefined（未定义）
Null（空）

（2）复杂数据类型

Object（对象）
Array（数组）
Function（函数）
RegExp（正则表达式）
Date
Map (key,value)
Set 不允许重复，无序的

1.2 typeof 运算符

使用 typeof 运算符可以检测值或者变量的类型。typeof 是一个运算符，是内置函数，所以不用加 ()，如果加了也不会报错，但是并不推荐！

1.3 5种基本数据类型的 typeof 检测结果

类型名	typeof 检测结果	值举例
数字类型	number	`5`、`2.5`、`-0.5`
字符串类型	string	`'前端'`、`"后端"`、`'3.14'`
布尔类型	boolean	`true`、`false`
undefined 类型	undefined	`undefined`
null 类型	object（可以理解为空对象）	`null`

二、Number（数字）类型

2.1 一切数都是数字类型

在 JS 中，所有数字不分大小、不分整浮、不分正负，都是数字类型。

typeof 925; // number
typeof 0.5; // number
typeof -24; // number

2.2 小数中 0 可以省略

在表达小数的时候，整数个位的 0 可以省略。

2.3 科学计数法

较大数或较小数可以写成科学计数法。

3e8;            // 300000000
typeof 3e8;     // number

3e-4;           // 0.0003
typeof 3e-4;    // number

2.4 不同进制的数字

（1）二进制数值以 0b 开头

0b10;   // 2
0b1111; // 15

（2）八进制数值以 0 开头(代码中需要写成0o)

017;    // 15

（3）十六进制数值以 0x 开头

0xf;    // 15

2.5 一个特殊的数字型值 NaN

NaN 是 “not a number” 的意思，即 “不是一个数”，但它属于数字类型。

typeof NaN; // number

0 除以 0 的结果是 NaN，事实上，在 JS 数学运算中，若结果不能得到数字，其结果往往都是 NaN
NaN 有一个 “奇怪” 的性质：不自等（这个知识点将在后续课程中讲解）

0 / 0;  // NaN
5 - 3;  // 2
'我' - '你';  // NaN
'我' * '你';  // NaN
'我' / '你';  // NaN
'我' + '你';  // "我你"（字符串遇到加法是拼接功能）
NaN == NaN;   // false（NaN 不自等）

再次强调：NaN 是一个值（特殊的值），不是类型。

三、String（字符串）类型

3.1 字符串的表示

字符串要用引号包裹，双引号或者单引号均可（无论用哪种，都应该保持风格统一）。

注意：大部分 JS 项目习惯约定使用单引号（因为可以减少按下 shift 键）。

typeof "周立家";   // string
或
typeof '周立家';   // string

数字 10 和字符串 '10' 在语义上是不同的，前者表示一个数量，后者是一个文本。

3.2 字符串的拼接

加号可以用来拼接多个字符串。

'周' + '立家'; // "周立家"
'abc' + 'd' + 'ef'; // "abcdef"

3.3 字符串和变量的拼接

要将一个变量的值 “插入” 到字符串中，要满足变量左右两边至少有一边 + 字符串。

var year = 2022;
var str = '北京冬奥会在' + year + '年召开';  // "北京冬奥会在2022年召开"

var a = 24;
var str1 = 54 + a;      // 78
var str2 = '54' + a;    // "5424"

1 + '10'; // "110"

2 + ''; // "2"

3.4 空字符串

一些时候需要使用空字符串，直接书写闭合的引号对即可。

var str = "";
或
var str = '';

空字符串可以用于将变量变为字符串！

var a = 24;
console.log(typeof a);  // number
a = a + '';
console.log(a); // "24"
console.log(typeof a);  // string

3.5 字符串的 length 属性

通过对 String 类型 “打点” 的方式，可以调用其内置属性。注意：在 JS 中，String 是基本类型，之所以 String 可以 “打点” 调用属性和方法，那是因为 JS 的解释器会自动将基本类型包装成对应的 Object 类型。

字符串的 length 属性表示字符串的长度。

'我喜欢JS'.length（;    // 5
'我喜欢JS，我也喜欢TS'.length;  // 12
''.length;  // 0

3.6 字符串的常用方法

通过对 String 类型 “打点” 的方式，可以调用其内置方法。

“方法” 就是能够打点调用的函数，字符串类型有丰富的内置方法。

方法	功能
`charAt()`	得到指定位置字符
`substring()`	提取子串
`substr()`	提取子串
`slice()`	提取子串
`toUpperCase()`	将字符串变为大写
`toLowerCase()`	将字符串变为小写
`indexOf()`	检索字符串
`trim()`	删除首尾空格
`trimStart()`	删除首部空格
`trimEnd()`	删除尾部空格

3.6.1 charAt() 方法

charAt() 方法可以得到指定位置的字符。

字符串中的每个字符都按顺序编号，编号从 0 开始。

`'`	我	喜	欢	J	S	,	我	也	喜	欢	N	O	D	E	`'`
	0	1	2	3	4	5	6	7	8	9	10	11	12	13

'我喜欢JS，我也喜欢NODE'.charAt(0);     // "我"
'我喜欢JS，我也喜欢NODE'.charAt(5);     // "，"
'我喜欢JS，我也喜欢NODE'.charAt(11);    // "O"
'我喜欢JS，我也喜欢NODE'.charAt(99);    // ""
'我喜欢JS，我也喜欢NODE'.charAt(-1);    // ""超出范围的输出空字符

3.6.2 substring()、substr() 和 slice() 方法

（1）substring(a, b) 方法得到从 a 开始到 b 结束（不包括 b 处）的子串 [a, b)

编程语言的区间一般都是：左闭右开！

'我喜欢JS，我也喜欢NODE'.substring(3, 5);       // "JS"
'我喜欢JS，我也喜欢NODE'.substring(10, 14);     // "NODE"
'我喜欢JS，我也喜欢NODE'.substring(10, 99);     // "NODE"
'我喜欢JS，我也喜欢NODE'.substring(-1, 4);      // "我喜欢J"
超出范围的部分，取到端点字符！

substring(a, b) 方法如果省略第二个参数，返回的子串会一直到字符串的结尾

'我喜欢JS，我也喜欢NODE'.substring(6);      // "我也喜欢NODE"

substring(a, b) 中，a 可以大于 b，数字顺序将自动调整为小数在前

'我喜欢JS，我也喜欢NODE'.substring(3, 5);       // "JS"
'我喜欢JS，我也喜欢NODE'.substring(5, 3);       // "JS"

（2）substr(a, b) 中，将得到从 a 开始的长度为 b 的子串

'我喜欢JS，我也喜欢NODE'.substr(3, 2);      // "JS"

substr(a, b) 中，b 可以省略，表示到字符串结尾

'我喜欢JS，我也喜欢NODE'.substr(3);     // "JS，我也喜欢NODE"

substr(a, b) 中，a 可以是负数，表示倒数位置

倒数第一位为 -1，而不是 -0

'我喜欢JS，我也喜欢NODE'.substr(-4, 2);     // "NO"

（3）slice(a, b) 方法得到从 a 开始到 b 结束（不包括 b 处）的子串

slice：切片

'我喜欢JS，我也喜欢NODE'.slice(3, 5);       // "JS"

slice(a, b) 的参数 a 可以是负数（与 substring(a, b) 的区别）

'我喜欢JS，我也喜欢NODE'.slice(-4, -1);     // "NOD"
// (-4, -1)：从 倒数第4位 到 倒数第1位，不包括 倒数第1位

slice(a, b) 中，参数 a 必须小于参数 b，否则便会返回一个空字符串

'我喜欢JS，我也喜欢NODE'.slice(5, 2);       // ""

七、数据类型的转换

7.1 其他值 ——> 数字

7.1.1 使用 Number() 函数

Number() 函数是 JS 内置函数。

由于 Number() 属于内置构造函数，所以 Number() 的首字母 N 要大写。

（1）字符串 ——> 数字

Number('123');           // 123
Number('123.45');        // 123.45
Number('-123');          // -123
Number('-123.45');       // -123.45
// 字符串中不支持有非数值字符
Number('123年');         // NaN
Number('2e3');          // 2000
Number('');             // 0

// 字符串不支持是数学表达式
Number('1+1');          // NaN
// 除了字符串外，还可以直接放一个表达式
Number(1+1);            // 2

（2）布尔值 ——> 数字

Number(true);           // 1
Number(false);          // 0

（3）undefined 和 null ——> 数字

Number(undefined);      // NaN
Number(null);           // 0

7.1.2 使用 parseInt() 函数

parseInt() 函数的功能是将 字符串 或 浮点数 转为 整数。

自动截掉第一个非数字字符之后的所有字符

parseInt('3.14');         // 3
parseInt('-3.14');        // -3
parseInt('3周吉瑞.14');    // 3
parseInt(3.14);           // 3
parseInt(-3.14);          // -3

所有文字都将被截掉

parseInt('3.14是圆周率');   // 3

如果字符串以非数字开头，则转为 NaN

parseInt('圆周率是3.14');   // NaN
parseInt('一二三');         // NaN

不存在 “四舍五入”

parseInt('3.99');         // 3

true、false、undefined、null 转为 NaN

parseInt(true);         // NaN
parseInt(false);        // NaN  
parseInt(undefined);    // NaN
parseInt(null);         // NaN

7.1.3 使用 parseFloat() 函数

parseFloat() 函数的功能是将字符串转为浮点数。

绝大部分原理与 parseInt() 类似。

parseFloat('3.14');     // 3.14
parseFloat(3.14);       // 3.14

parseFloat('3.14是圆周率');     // 3.14
parseFloat('3.14.15');         // 3.14

parseFloat('3.99');         // 3.99
parseFloat('-3.99');        // -3.99

7.2 其他值 ——> 字符串

7.2.1 使用 String() 函数

String() 函数是 JS 内置函数。

由于 String() 属于内置构造函数，所以 String() 的首字母 S 要大写。

（1）数字 ——> 字符串

变为 “长得相同” 的字符串。

科学计数法和非 10 进制数字会转为 10 进制的标准值。

String(123);        // '123'
String(123.4);      // '123.4'
String(2e3);        // '2000'
Stiing(NaN);        // 'NaN'
//Infinity 无穷大   -Infinity无穷小
String(Infinity);   // 'Infinity'
String(0xf);        // '15'

（2）布尔值 ——> 字符串

变为 “长得相同” 的字符串。

String(true);       // 'true'
String(false);      // 'false'

（3）undefined 和 null ——> 字符串

变为 “长得相同” 的字符串。

String(undefined);  // 'undefined'
String(null);       // 'null'

7.2.2 使用 toString() 方法

toString() 是几乎所有基本类型都自带的方法，功能是将值转为字符串。

7.3 其他值 ——> 布尔值（了解）

Boolean() 函数是 JS 内置函数。

（1）数字 ——> 布尔值

0 和 NaN 转为 false，其他数字都转为 true。

Boolean(123);           // true
Boolean(0);             // false
Boolean(NaN);           // false
Boolean(Infinity);      // true
Boolean(-Infinity);     // true全局属性 
Infinity 是一个数值，表示无穷大。

（2）字符串 ——> 布尔值

空字符串 '' 转为 false，其他都转为 true。

Boolean('');                // false
Boolean('abc');             // true
Boolean('false');           // true

（3）undefined 和 null ——> 布尔值

转为 false。

Boolean(undefined);             // false
Boolean(null);                  // false