乐趣区

重学JS显示强制类型转换

ToString

ToString 负责处理非字符串到字符串的强制类型转换,常用的字符串化方法 String()、toString()。

基本类型值的字符串化规则:

  • null 转换为 ’null’
  • undefined 转换为 ’undefined’
  • true 转化为 ’true’
  • 数字的字符串化遵循通用规则,极大值或者极小值采用科学计数法表示

普通对象在字符串化时,实际执行 Object.prototype.toString(),返回该对象的类型 [object type],例如:

var test = {a : 'test'}
console.log(test.toString()) // '[object Object]'
console.log(String(test)) // '[object Object]'

但是当对象有自己的 toString 方法时,字符串化时就会调用该方法并返回该方法的返回值,例如:

var obj = {
  a: 'test',
  toString: function () {return 1}
}
console.log(obj.toString()) // 1
console.log(String(obj)) // 1

数组在做字符串化时,将数组所有元素字符串化再用 ”,” 连接,例如:

var arr = [1, 2]
console.log(arr.toString()) // '1,2'
console.log(String(arr)) // '1,2'

JSON.stringify()

JSON.stringify() 在将 JSON 对象序列化为字符串时,也涉及到了字符串化的相关规则。

对大多数简单值来说,JSON 字符串化和 toString() 的效果基本相同,例如:

console.log(JSON.stringify("test")) // ""test""
console.log(JSON.stringify(1)) // "1"
console.log(JSON.stringify(null)) // "null"

但是 JSON.stringify() 在对象中遇到 function() {}、undefined、Symbol 时会自动将其忽略,在数组中则会返回 null,例如:

var obj1 = {
  a: undefined,
  b: function () {},
  c: Symbol()}
console.log(JSON.stringify(obj1)) // "{}"
console.log(JSON.stringify([undefined, function () {}, 1])) // "[null, mull, 1]"

当对象执行 JSON.stringify() 方法时,如果对象中存在 toJSON 方法,用它的返回值来进行序列化,例如:

var obj2 = { 
  a: undefined,
  b: function () {},
  c: Symbol(),
  toJSON: function () {return {a: 'replace'}
  }
}
console.log(JSON.stringify(obj2)) // "{"a":"replace"}"

ToNumber

ToNumber 负责将非数字转化为数字,Number()、parseInt() 和 parseFloat() 都可以将非数字转化为数字

Number()

Number() 函数的转换规则:

  • 如果是 Boolean 类型,true 和 false 分别转换为 0 和 1
  • 如果是数字值,只是简单的传入和返回
  • 如果是 null 值,返回 0
  • 如果是 undefined,返回 NaN
  • 如果是字符串,遵循下列规则:

    • 如果字符串中只包含数字,则将其转变为十进制数
    • 如果字符串中包含有效的浮点格式,则将其转换为对应的浮点数值
    • 如果字符串中包含有效的十六进制格式,则将其转换为相同大小的十进制数
    • 如果字符串是空,则将其转换为 0
    • 如果字符串中包含除上述格式之外的字符串,则将其转换为 NaN
  • 如果是对象,则调用对象的 valueOf() 方法,然后依照前面的规则转换值。如果转换的结果是 NaN,则调用对象的 toString() 方法,然后再依次照前面的规则转换返回的字符串值

例如:

console.log(Number(true)) // 1
console.log(Number(1)) // 1
console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN
console.log(Number('11')) // 11
console.log(Number('1.1')) // 1.1
console.log(Number('0xf')) // 15
console.log(Number('')) // 0
var a = {valueOf: function () {return '10'}
}
var b = {toString: function () {return '10'}
}
var c = [1, 0]
c.toString = function () {return c.join("")
}
console.log(Number(a)) // 10
console.log(Number(b)) // 10
console.log(Number(c)) // 10

parseInt()

parseInt() 转换规则:

  • parseInt() 函数在转换字符串时,会忽略字符串前面的空格,直到找到第一个非空格字符
  • 如果第一个字符不是数字字符或者负号,parseInt() 就会返回 NaN
  • 如果第一个字符是数字字符,parseInt() 就会继续解析,直到解析完所有后续字符或者遇到一个非数字字符
  • 如果字符串中的第一个字符是数字字符,parseInt() 也能识别各种进制数

例子:

console.log(parseInt('a')) // NaN
console.log(parseInt('11')) // 11
console.log(parseInt('11aa')) // 11
console.log(parseInt('0xf')) // 15

parseFloat()

parseFloat() 转换规则:

  • 与 parseInt() 函数类似,parseFloat() 也是从第一个字符开始解析每一个字符,而且也是一直解析到字符串末尾,或者解析到遇见一个无效的浮点数字字符为止
  • 解析时会忽略前导的 0
  • 只会解析十进制数

例子:

console.log(parseFloat('12.3a')) // 12.3
console.log(parseFloat('0xf')) // 0
console.log(parseFloat('01.1')) // 1.1

ToBoolean

布尔强制类型转换的假值列表:

  • undefined
  • null
  • false
  • +0、- 0 和 NaN
  • “”

除了上述列表以外的值在转换的时候都应该是真值,强制布尔类型转换常用 Boolean() 或者!!,第一个! 将值强制转为布尔类型,但同时还将真假值反转,第二个! 将结果返回原值,例子:

console.log(Boolean("0")) // true
console.log(Boolean([])) // true
console.log(Boolean(undefined)) // false
console.log(!!"0") // true
console.log(!![]) // true
console.log(!!undefined) // false

总结

这篇文章对 JS 中的常见显示强制类型转换做了一个小结,希望能对大家理解有所帮助。如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞

退出移动版