总结几种 JavaScript 常见的字符串转换和布尔转换方式

Javascript 是一种弱类型语言,这意味着变量是没有明确类型的,而是由 JavaScript 引擎在编译时隐式完成。类型转换就是将一种数据类型转换为另一种数据类型。下面我们来看一下最常见的字符串转换和布尔型转换。

一. 字符串转换

将数据类型转换为字符串称为字符串转换,可以使用 String() 函数将数据类型显式转换为字符串。当一个操作数是字符串时,可以通过使用 + 运算符来触发隐式字符串转换。

1.1 数字 => 字符串:

Number对象的 toString() 方法会返回指定 Number 对象的字符串表示形式。String()和 new String() 会把对象的值转换为字符串。

String(20);           // '20'
String(10 + 40);      // '50'
(10 + 40).toString(); // '50'
new String(10 + 20);  // '30'

1.2 布尔值 => 字符串:

String() 和 toString() 方法会将布尔值转化为对应的字符串形式。

String(true);     // 'true'
String(false);    // 'false'
true.toString()   // 'true'
false.toString()  // "false"

1.3 数组 => 字符串:

String() 方法会将数组元素通过逗号连接起来,无论嵌套多少层,都会将其展开并返回元素拼接好的字符串。如果是空数字,会返回空字符串:

String([1, 2, 3]);                // '1,2,3'
String([1, 2, 3, [4, [5]]]);      // '1,2,3,4,5'
String([1, 2, 3, [4, [5, {}]]]);  // '1,2,3,4,5,[object Object]'
String([]);                       // ''

1.4 对象 => 字符串:

使用 String() 方法会将对象转化为 '[object Object]',无论对象是否为空对象:

String({name: "Hello"});   // '[object Object]'

1.5 null / undefined / NaN => 字符串:

使用 String() 方法会将  nullundefinedNaN 转化为其对应的字符串形式:

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

1.6 日期 => 字符串:

String(new Date('2022-08-20')) // 'Sat Aug 20 2022 08:00:00 GMT+0800 (中国标准时间)'

1.7 隐式转换

当任何数据类型使用+运算符与字符串连接时会发生到字符串的转换(隐式转换):

"25" + 56;              // '2556'
"25" + null;            // '25null'
"Hello " + undefined;   // 'Hello undefined'
"25" + false;           // '25fasle'
"25" + {};              // '25[object Object]'
"25" + [10];            // '2510'

所以,当我们想要创建一个操作并且操作数类型之一是字符串时,应该小心使用类型强制转换。

扫描二维码关注公众号,回复: 17430637 查看本文章

1.8 总结

下面是 ECMAScript 规范中将数据类型转换为字符串的规则:

fileOf7174.png

ECMAScript 规范:

ECMAScript 规范查看:https://262.ecma-international.org/5.1/#sec-9.8icon-default.png?t=O83Ahttps://262.ecma-international.org/5.1/#sec-9.8

二. 布尔转换

将数据类型转换为布尔值称为布尔转换。这种转换既可以由 Boolean() 函数显式完成,也可以在逻辑上下文中隐式完成(如if/else )或通过使用逻辑运算符( ||、&&、! )触发。

2.1 字符串 => 布尔值:

使用 Boolean() 方法转化字符串时,只有当字符串为空时会返回false,其他情况都会返回 true

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

2.2 数字 => 布尔值:

使用 Boolean() 方法转化数字时,只有 0、-0 或 NaN 会转化为 false,其他情况会返回 true

Boolean(-123); // true 
Boolean(123);  // true 
Boolean(0);    // false
Boolean(-0);   // false
Boolean(NaN);  // false

2.3 数组 / 对象 => 布尔值:

使用 Boolean() 方法转化数组或对象时,无论数组和对象是否有内容,都会返回true

Boolean([1, 2, 3]); // true
Boolean([]);        // true
Boolean({});  // true
Boolean({'hello': 'world'});  // true

2.4 null / undefined => 布尔值:

使用 Boolean() 方法转化nullundefined时,都始终返回 false

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

2.5 隐式转换

在数学运算中,true 转换为 1,false 转换为 0:

true + 5;    // 6
false + 5;   // 5
5 - true;    // 5
5 - false;   // 4

2.6 逻辑运算符、逻辑上下文

// 如果其中一个不是布尔值,则将其转换为布尔值
Boolean( null || undefined || 0 || -0 || NaN || '' )    // false
Boolean( 1 && 'a' && { } && [] && [0] && function(){} ) // true
true && false // false
true && true // true
true || false // true
true || !false // true

注意,逻辑运算符,例如 || 或 && 内部进行布尔转换,但实际上返回原始操作数的值,即使它们不是布尔值。

'hello' && 123;   // 123

可以使用双感叹号(!!)来将变量转为为布尔值:

!!0    // false
!!""   // false
!!" "  // true
!!{}   // true
!![]   // true
!!true // true

if、else if、while、do/while 和 for 使用与 &&、||、! 相同的隐式类型转换方式(逻辑表达式)。

2.7 总结

除了下面这些之外的所有其他值都是真值,包括对象、数组、日期等。甚至所有Symbol、空对象和数组都是真值。

Boolean('');        // false
Boolean(0);         // false     
Boolean(-0);        // false
Boolean(NaN);       // false
Boolean(null);      // false
Boolean(undefined); // false
Boolean(false);     // false
Boolean({})             // true
Boolean([])             // true
Boolean(Symbol())       // true
Boolean(function() {})  // true

可以通过以下方式来过滤数组中的假值:

[0, "", " ", null, undefined, NaN].map(Boolean); 
// 输出结果:[false, false, true, false, false, false]

我们可以会遇到一种情况,当使用 5 == true 时,结果为false,而使用if(5) {}时,则 5 被认为是 true 并进入if/else语句:

5 == true;  // false

if (5) {
    console.log('5');  // 5
};

这种情况下,即一个值和数字进行比较时,JavaScript 会试图将这个值转换为数字。所以,当比较5 == true 时,JavaScript 倾向于将true转换为1,因为 1不等于5,因此结果为 false。而在if(5) {}的情况下,5 被转换为布尔值,而 5 是一个真值,所以它进入if块。在这种情况下,可以选择显式转换以避免错误,因为 5 是一个真值,可以执行Boolean(5) == true,这样就会返回true了。

下面是 ECMAScript 规范中将数据类型转换为布尔值的规则:

fileOf7174.png

ECMAScript 规范: ECMAScript 规范: https://262.ecma-international.org/5.1/#sec-9.2icon-default.png?t=O83Ahttps://262.ecma-international.org/5.1/#sec-9.2

​​​​​​​

猜你喜欢

转载自blog.csdn.net/qq_24956515/article/details/143174853