Fork me on GitHub

01-JavaScript数据类型转换和关系运算符

发表于 | 阅读次数:
字数统计: 1.9k | 阅读时长 ≈ 8


数据类型转换

JavaScript中的基本数据类型分为：

  • Number
  • String
  • Boolean
  • undefined
  • null

那么下面我们进行一下对基本数据类型的转换操作。

  • 基本数据类型转换为字符串
  • 基本数据类型转换为数值类型
  • 基本数据类型转换为布尔类型

基本数据类型转换为字符串类型

常用的方法有三种：

  1. 对于Number和Boolean类型来说，可以通过变量.toString()的方式来转换
    • 注意点：
    • 变量.toString()前面必须是变量，如果是常量将会报错
    • 只针对Number和Boolean类型，undefined和null类型将会报错
    • 变量.toString()是对拷贝的数据进行转换，所以不会影响原有的数据
  2. 可以通过String(变量/常量)的方式转换为字符串
    • 根据传入的数据重新生成一个新的字符串，并不是修改原有的数据
    • 针对任何基本数据类型均可用
  3. 还可以通过变量/常量 + ''或者变量/常量 + ""的形式转换为字符串
    • 底层本质就是调用String()函数
    • 针对任何基本数据类型均可用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
**方式一：`变量.toString()`**

// Number转换为字符串
let value = 123;
let str = value.toString();
console.log(str);           // 123
console.log(typeof str);    // string

// Boolean转换为字符串
let value = true;
let str = value.toString();
console.log(str);           // true
console.log(typeof str);    // string

// undefined转换为字符串
let value = undefined;
let str = value.toString();
// 报错 Uncaught TypeError: Cannot read property 'toString' of undefined at 12-转换为字符串类型.html?_ijt=3vdusa5p2v4h74081b8vdcfpvh:22
console.log(str);           
console.log(typeof str);

// null转换为字符串
let value = null;
let str = value.toString();
// 报错 Uncaught TypeError: Cannot read property 'toString' of undefined at 12-转换为字符串类型.html?_ijt=3vdusa5p2v4h74081b8vdcfpvh:22
console.log(str);           
console.log(typeof str);    


**方式二：`String(变量/常量)`**

// Number转换为字符串
let value = 123;
let str = String(value);
console.log(str);           // 123
console.log(typeof str);    // string

// Boolean转换为字符串
let value = 123;
let str = String(value);
console.log(str);           // true
console.log(typeof str);    // string

// undefined转换为字符串
let value = 123;
let str = String(value);
console.log(str);           // undefined
console.log(typeof str);    // string

// null转换为字符串
let value = 123;
let str = String(value);
console.log(str);           // null
console.log(typeof str);    // string

**方式三：`(变量/常量) + '' 或者 (变量/常量) + ""`**

// Number转化为字符串
let value = 123;
let str = value + '';
console.log(str);           // 123
console.log(typeof str);    // string


// Boolean转换为字符串
let value = 123;
let str = value + '';
console.log(str);           // true
console.log(typeof str);    // string

// undefined转换为字符串
let value = 123;
let str = value + '';
console.log(str);           // undefined
console.log(typeof str);    // string

// null转换为字符串
let value = 123;
let str = value + '';
console.log(str);           // null
console.log(typeof str);    // string

基本数据类型转换为数值类型

常用的方法有三种：

  1. 通过Number(常量/变量)的方式来转换
    • 将String类型转换为数值类型
      • 如果字符串都是数值，那么就正常转换
      • 如果字符串是空串””/“ “,那么都会转换为0
      • 如果字符串中不仅仅是数字，那么转换之后是NaN
    • 将Boolean类型转换为数值类型
      • true转换之后为 1
      • false转换之后为 0
    • 将undefied类型转换为数值类型
      • 转换之后都为NaN
    • 将null类型转换为数值类型
      • 转换之后为 0
  2. 还可以通过数学运算符中的+和-的方式转换
    • 底层本质上就是调用了Number函数，所以结果同上
  3. 还可以通过parseInt(字符串)、parseFloat(字符串)的方式来转换，区别于Number(常量/变量),可以将数值从字符串中从左至右提取出来
    • parseInt(字符串)、parseFloat(字符串)会将传入的数据当作字符串来处理
    • parseInt(字符串)、parseFloat(字符串)从左至右提取数值，一旦遇到非数值就会立即停止，停止的时候如果没有提取到数值，那么就会返回NaN
    • 除了String可以提取数值外，Boolean、undefined和null，都会转换为NaN

总结：

  • 空字符串、falase、null转换之后都是0
  • 字符串中不仅仅是数字、undefined转换之后是NaN
  • 其他都正常转换
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
**方式一：`Number(变量/常量)`**

// String转换为数值类型,如果字符串有没有数据，那么转换的结果为0，如果字符串中的数据不仅仅是数值，那么转换的结果就为NaN
let str = "123";
let num = Number(str);
console.log(num);           // 123
console.log(typeof num);    // number

let str  = "123a";
let num = Number(str);
console.log(num);           // NaN
console.log(typeof num);    // number

let str  = "      ";
let num = Number(str);
console.log(num);           // 0
console.log(typeof num);    // number

let str  = "      ";
let num = Number(str);
console.log(num);           // 0
console.log(typeof num);    // number

// Boolean转换为数值类型
let bl  = true;
let num = Number(bl);
console.log(num);           // 1
console.log(typeof num);    // number

// undefined转换为数值类型
let uf  = undefined;
let num = Number(uf);
console.log(num);           // NaN
console.log(typeof num);    // number

// null转换为数值类型
let nl  = null;
let num = Number(nl);
console.log(num);           // 0
console.log(typeof num);    // number

**方式三：`parseInt(字符串)、parseFloat(字符串)`**的方式将基本数据类型转换为数值类型，通常情况下，即使字符串中包含非数值数据，我们还是希望将数值提取出来，例如 12px,此时`parseInt(字符串)、parseFloat(字符串)`登场

// 字符串转换为数值类型，
let str = "12px";
let num = Number(str);
console.log(num);           // NaN
console.log(typeof num);    // number

let str = "12px";
let num = parseInt(str);
console.log(num);           // 12
console.log(typeof num);    // number

let str = "a12px";
let num = parseInt(str);
console.log(num);           // NaN
console.log(typeof num);    // number

// Boolean类型转换为Number类型
let bl = "true";
let num = Number(bl);
console.log(num);           // NaN
console.log(typeof num);    // number

// undefined类型转换为Number类型
let uf = "undefined";
let num = Number(uf);
console.log(num);           // NaN
console.log(typeof num);    // number

// null类型转换为Number类型
let nl = "null";
let num = Number(nl);
console.log(num);           // NaN
console.log(typeof num);    // number

基本数据类型转换为布尔类型

JavaScript中如果想要将基本的数据类型转换为布尔类型，那么只需要调用Boolean(常量/变量)
常用的方法：

  • String类型转换为Boolean类型
    • 只有字符串中有内容就会转换为true，即使是空格
    • 如果字符串中没有内容就会转换为false
  • 将Number类型转换为Boolean类型
    • 只有数值为0才会转换为false,其他的都会转换为true
    • NaN也会转换为false
  • 将undefined类型转换为Boolean类型
    • undefined会转换为false
  • 将null类型转换为Boolean类型
    • null会转换为false

总结：

  • 空字符串、0、NaN、undefined和null都会转换为false,其他的都会转换为true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// String转换为Boolean类型
let str = "123";
let value = Boolean(str);
console.log(value);         // true
console.log(typeof value);  // boolean

let str = " ";
let value = Boolean(str);
console.log(value);         // true
console.log(typeof value);  // boolean

let str = "";
let value = Boolean(str);
console.log(value);         // false
console.log(typeof value);  // boolean

// Number转换为Boolean类型
let num = 0;
let value = Boolean(num);
console.log(value);         // false
console.log(typeof value);  // boolean

// undefined转换为Boolean类型
let uf = undefined;
let value = Boolean(uf);
console.log(value);         // false
console.log(typeof value);  // boolean

// null转换为Boolean类型
let nl = null;
let value = Boolean(nl);
console.log(value);         // false
console.log(typeof value);  // boolean

关系运算符

关系运算符注意点：

  • 对于非数值类型的数据，会先转换成数值类型，在进行判断
  • 对于关系运算符来说，任何数据和NaN进行比较，返回值为false
  • 如果参数的都是字符串类型，那么不会转换成数值类型在进行比较，而是直接比较字符串的unicode编码

下面通过几个例子讲述关系运算符

1
2
3
4
5
6
7
8
9
let ret = 1 > "10";          // false
let ret = 1 > true;          // false
let ret = 1 > false;         // true
let ret = 1 > null;          // true
let ret = 1 > undefined;     // false
let ret = 1 > NaN;           // false
let ret = null == 0;         // false
let ret = undefined == 0;    // false
let ret = null == undefined; // true

注意点：

  • 企业开发中千万不要用过 == 来判断一个数据是否是NaN,如果想要判断某一个数据是否是NaN,那么可以通过isNaN来判断