文章目录
最近在巩固 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'