js中强制类型转换Number、parseInt、parseFloat、Boolean、String、toString的使用

最近在巩固 js 的基础知识，今天复习到了 js 中的数据类型转换知识点，然后整理一下。

之前整理了一篇隐式类型转换文章：js中的隐式类型转换有哪些

一、Number() 转换为整数

转换规则：

• 数字：返回自身；
• 布尔值：true返回1，false返回0；
• undefined：返回NaN；
• null：返回0；
• 字符串：
  • 只包含数字，则将其转化为十进制；
  • 包含有效的浮点格式，将其转换为浮点数值；
  • 忽略前导和尾随空格/行终止符；
  • + 和 - 允许在字符串的开头指示其符号；
  • 空字符串''或仅空格字符串转换为 0；
  • 如果不是以上格式的字符串，返回NaN。
• Symbol：抛出TypeError；
• BigInt：返回它的 Number 值，并且可能损失精度；
• 对象：首先按顺序调用 Symbol.toPrimitive方法（将 “number” 作为 hint）、valueOf() 和 toString() 方法将其转换为原始值。然后将生成的原始值转换为数值。

一元运算符：+ 完全按照上面的数值强制转换规则来转换。

例如：

+true;   	// 1
+false;  	// 0
+'';     	// 0
+'0123'; 	// 123

example：

Number(true);  		// 1
Number(false); 		// 0
Number('011'); 		// 11
Number('011abc'); 		// NaN
Number('3.141500'); 	// 3.1415
Number('3.141500abc');  // NaN
Number(undefined); 		// NaN
Number(null); 		// 0
Number(''); 		// 0
Number(' '); 		// 0
Number(-0x11); 		// -17
Number('0x11'); 	// 17
Number(Symbol()); 	// Uncaught TypeError: Cannot convert a Symbol value to a number
Number({}); 		// NaN
Number([]); 		// 0

二、Number.parseInt() 将字符串转换为整数

Number.parseInt() 方法依据指定基数，解析字符串并返回一个整数。

语法：

Number.parseInt(string)
Number.parseInt(string, radix)

radix：进制，基数

转换规则：

• 被解析的值必须是 string 类型，若不是，将其强制转换为 string 类型，然后再转换为整数；
• 字符串开头的空白字符会被忽略；
• 第一个非空白字符不能转换为数字，则返回NaN；
• 如果存在 radix 参数，则取值为 [2, 36] 之间的整数，否则返回NaN；
• 如果 radix 参数未指定或者为0，按10进制进行转换；
• 如果 radix 参数未指定或者为0，且数字以 0x 或 0X 开头，按16进制转换。

这个方法和全局的 parseInt() 函数具有一样的函数功能：

Number.parseInt === parseInt; // true

Number 添加此方法，其目的是对全局变量进行模块化。

example：

Number.parseInt(true);  		// NaN
Number.parseInt(false); 		// NaN
Number.parseInt(undefined); 	// NaN
Number.parseInt(null); 			// NaN
Number.parseInt(''); 			// NaN
Number.parseInt(' 3 ');  		// 3
Number.parseInt('3.141590ab '); // 3
Number.parseInt(' d3.14159');   // NaN
Number.parseInt(-0x11);			// -17
Number.parseInt('0x11'); 		// 17
Number.parseInt('0x11', 0); 	// 17
Number.parseInt('0x11', 1); 	// NaN
Number.parseInt('0x11', 2); 	// 0
Number.parseInt('0x11', 16); 	// 17
Number.parseInt('0x11', 37); 	// NaN
Number.parseInt('123', 0); 		// 123
Number.parseInt('123', 8); 		// 83
Number.parseInt('123', 37); 	// NaN
Number.parseInt({}); 			// NaN
Number.parseInt([]); 			// NaN
Number.parseInt(Symbol()); 		// Uncaught TypeError: Cannot convert a Symbol value to a string
Number.parseInt(900719925474099267n); 	 // 900719925474099300 丢失精度
Number.parseInt('900719925474099267n');  // 900719925474099300 丢失精度

三、Number.parseFloat() 将字符串转换为浮点数

Number.parseFloat() 方法可以把一个字符串解析成浮点数。

语法：

Number.parseFloat(string)

转换规则：

• 如果 parseFloat 在解析过程中遇到了正号（+）、负号（- U+002D HYPHEN-MINUS）、数字（0-9）、小数点（.）、或者科学记数法中的指数（e 或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数；
• 第二个小数点的出现也会使解析停止（在这之前的字符都会被解析）；
• 参数首位和末位的空白符会被忽略；
• 如果参数字符串的第一个字符不能被解析成为数字，则返回NaN；
• parseFloat 也可以解析并返回 Infinity。
• parseFloat 解析 BigInt 为 Numbers, 丢失精度。因为末位 n 字符被丢弃。
• parseFloat 也可以转换一个已经定义了 toString 或者 valueOf 方法的对象，它返回的值和在调用该方法的结果上调用 parseFloat 值相同。

这个方法和全局的 parseFloat() 函数具有一样的函数功能：

Number.parseFloat === parseFloat; // true

Number 添加此方法，其目的是对全局变量进行模块化。

example：

Number.parseFloat(3.14);   		// 3.14
Number.parseFloat('3.14');  	// 3.14
Number.parseFloat('  3.14  ');  // 3.14
Number.parseFloat('314e-2');  	// 3.14
Number.parseFloat('0.0314E+2'); // 3.14
Number.parseFloat('3.14some non-digit characters');  			// 3.14
Number.parseFloat({ toString: function() { return "3.14" } });	// 3.14
Number.parseFloat({ valueOf : function() { return "3.14" } });	// NaN
Number.parseFloat("asc3.14");  				// NaN
Number.parseFloat(900719925474099267n);  	// 900719925474099300 丢失精度
Number.parseFloat('900719925474099267n');	// 900719925474099300 丢失精度

四、Boolean() 转换为布尔值

Boolean 对象是一个布尔值的对象包装器。

转换规则：

• Boolean() 初始值为 false ；
• 参数值为 0、-0、null、false、NaN、undefined，或空字符串（""），转换为 false。
• 所有其它值，包括任何对象，空数组（[]）或字符串 "false"，都会创建一个初始值为 true 的对象。

另一种使用方式是 双重非（!!）运算符，与 Boolean() 规则一致。

example：

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

注意：
Boolean 对象的值与基本数据类型中的 true 和 false 不同。

const bool = new Boolean(false);
if (bool) {// 代码被执行了
}
console.log(bool); 		// Boolean {false}
console.log(!!bool);	// true

上面使用 Boolean 构造函数生成了一个 bool 实例对象，虽然 Boolean 的初始值为 false ，但实例对象 bool 的值为 true；所以if 语句会被执行。使用基本数据类型就不会有上面的情况：

const bool = false;
if (bool) {// 代码不被执行
}

五、String() 转换为字符串

String 对象用于表示和操作字符序列。

转换规则：

• 字符串按原样返回；
• true、false、null、undefined 都可以转换成字符串；
• 使用与 toString(10) 相同的算法转换数字，默认转换为十进制；
• 使用与 toString(10) 相同的算法转换 BigInt；
• Symbol 隐式转换会抛出 TypeError，显示转换则为字符串；
• 对象：通过次序调用 Symbol.toPrimitive方法（将 “number” 作为 hint）、toString() 和 valueOf() 方法将其转换为原始值。然后将生成的原始值转换为数值。

example：

String('like'); 	// 'like'
String(true);  		// 'true'
String(false);  	// 'false'
String(null);  		// 'null'
String(undefined);  // 'undefined'
String(10);  		// '10'
String(900719925474099267n);	// '900719925474099267'
String(Symbol());  				// 'Symbol()'
Symbol('foo') + 'bar'; 			//  Uncaught TypeError: Cannot convert a Symbol value to a string  隐式类型转换报错
String({});  					// '[object Object]'
String([]);  					// ''

六、.toString() 转换为字符串

大多数 JavaScript 对象和原始值都有一个 toString() 方法将值转换为字符串，例如：字符串、数字、布尔、BigInts 和符号；除了 null 和 undefined。

对象的 toString() 方法返回的是当前数据类型的字符串，如,将一个对象转换为字符串，格式为 '[object Object]'，将数组转换为字符串，格式为'[object Array]'；首字母小写object为固定格式，首字母大写Object为数据类型。

有时候，为了准确判断数据类型，会使用Object.prototype.toString.call()来进行转换判断。

Object.prototype.toString.call([]);  			// '[object Array]'
Object.prototype.toString.call('123');			// '[object String]'
Object.prototype.toString.call(true);			// '[object Boolean]'
Object.prototype.toString.call(function(){});	// '[object Function]'
Object.prototype.toString.call(null);			// '[object Null]'
Object.prototype.toString.call(undefined);		// '[object Undefined]'
Object.prototype.toString.call(Symbol());		// '[object Symbol]'
...

转换规则：

• 除null、undefined外，其他基本数据类型按照正常规则转换；
• 不能转换null、undefined，报错 TypeError，因为没有 toString 方法；
• 对象：转换为 '[object Type]' 格式；
• 数组：与使用 join() 方法相同，转换为元素拼接成的字符串；空数组转换为空字符串''。

当调用Number.prototype.toString()时，语法：

numObj.toString([radix])
radix 指定要用于数字到字符串的转换的基数 [2, 36]。如果未指定 radix 参数，则默认值为 10（十进制）。

let num = 100;
num.toString(); 	// '100'  默认按照10进制转换
num.toString(2); 	// '1100100'
num.toString(8); 	// '144'
num.toString(10); 	// '100'
num.toString(16); 	// '64'

Number.prototype.toString() 与 Number.parseInt() 可以在字符串与数字值之间按照不同进制相互转换。

如，将上面的字符串按照不同进制转换为数字：

Number.parseInt('100'); 		// 100
Number.parseInt('1100100',2); 	// 100
Number.parseInt('144',8);  		// 100
Number.parseInt('100',10);  	// 100
Number.parseInt('64',16);  		// 100

example:

[].toString();   		// ''
({}).toString(); 		// '[object Object]'
(123).toString(); 		// '123'
(true).toString();  	// 'true'
(false).toString(); 	// 'false'
(null).toString();  	// Uncaught TypeError: Cannot read properties of null (reading 'toString')
(undefined).toString(); // Uncaught TypeError: Cannot read properties of undefined (reading 'toString')
Symbol().toString();  	// 'Symbol()'
(900719925474099267n).toString(); // '900719925474099267'