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

文章目录

  • 一、Number() 转换为整数
  • 二、Number.parseInt() 将字符串转换为整数
  • 三、Number.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'

你可能感兴趣的:(#,JavaScript,强制类型转换,toString,String,parseInt,parseFloat)