JavaScript数据类型转换：全面解析与最佳实践

用户5429120724668
82 阅读7分钟

JavaScript数据类型转换：全面解析与最佳实践

一、概要

本文将深度探索 JavaScript 中的数据类型转换机制，着重分析如何将各种数据类型有效地转换为布尔值、数值和字符串。

二、将任意类型转为布尔类型

Boolean函数

数据类型转换为 true 的值转换为 false 的值
Booleantruefalse
String非空字符串空字符串
Number非零数值（包括无穷值）0、NaN
Object任意对象null
Undefined不存在undefined
console.log(Boolean(undefined)) // false
console.log(Boolean(null)) // false
console.log(Boolean("")) // false
console.log(Boolean("  ")) // true
console.log(Boolean(0)) // false
console.log(Boolean(-1)) // true
console.log(Boolean(0 / 0)) // false

双重否定运算符(!!)

第一个 ! 将变量转为它的布尔反值，第二个 ! 再次对其求反，从而得到了变量的布尔值。

var truthyValue = "Hello"
var falsyValue = ""
​
console.log(!!truthyValue) // true
console.log(!!falsyValue) // false

三、将任意类型转为数值类型

Number函数

布尔值：true 转换为 1，false 转换为 0

console.log(Number(true)) // 1
console.log(Number(false)) // 0

数值：按照对应的进制数据格式，转换成十进制数

console.log(Number(10)) // 10
console.log(Number(0b1010)) // 10
console.log(Number(0o12)) // 10
console.log(Number(0xa)) // 10
console.log(Number(1.2)) // 1.2

null：转为 0

console.log(Number(null)) // 0

undefined：转为 NaN

console.log(Number(undefined)) // NaN

字符串

如果字符串中只包含数字，则会转换成十进制数；前导 0 将被忽略

console.log(Number("123")) // 123
console.log(Number("0123")) // 123
console.log(Number("00123")) // 123

如果字符串是有效的浮点数形式，则会转换成对应的浮点数；前置的多个重复的 0 会被清空，只保留一个

console.log(Number("1.23")) // 1.23
console.log(Number("00.123")) // 0.123

如果字符串是有效的进制数据形式，则会转换成对应的十进制数值

// 十六进制
console.log(Number("0xff")) // 255
console.log(Number("0X3f")) // 63
​
// 八进制
console.log(Number("0o12")) // 10
console.log(Number("0O24")) // 20
​
// 二进制
console.log(Number("0b1010")) // 10
console.log(Number("0B1111")) // 15

如果是空字符串或只包含空白符的字符串，则将转为 0

console.log(Number("")) // 0
console.log(Number("  ")) // 0
console.log(Number(`
`)) // 0

如果字符串中包含了除上述格式以外的字符串，则直接转为 NaN

console.log(Number("abc")) // NaN
console.log(Number("12px")) // NaN
console.log(Number("1.23.43")) // NaN

一元加操作符（+）

与 Number 函数遵循相同的转换规则

console.log(+true) // 1
console.log(+false) // 0
console.log(+12) // 12
console.log(+1.2) // 1.2
console.log(+null) // 0
console.log(+undefined) // NaN
console.log(+"12") // 12
console.log(+"1.2") // 1.2
console.log(+"+12") // 12
console.log(+"-12") // -12
console.log(+"0012") // 12
console.log(+"0xff") // 255
console.log(+"0xea") // 234
console.log(+"") // 0
console.log(+"  ") // 0
console.log(+"12px") // NaN
console.log(+"abc") // NaN

字符串类型转为数值类型

Number.parseInt()

定义：解析一个字符串参数，并返回一个指定基数的整数

工作原理

  • 转换输入：将输入转换为字符串（如果它不是字符串）
  • 去除空白：移除字符串前面的空白字符
  • 确定符号：检查并记录正负符号（如果有）
  • 解析基数：如果未指定基数或基数为0，根据字符串格式自动判断；默认为10，"0x"或"0X"开头时为16
  • 去除前缀：如果基数为16，移除"0x"或"0X"前缀
  • 逐字符解析：从第一个字符开始，按指定基数解析，直到遇到第一个无效字符
  • 转换结果：将解析的字符串部分转换为整数
  • 应用符号：根据步骤3的记录，应用正负符号
  • 返回结果：返回转换后的整数；如果无法解析，返回 NaN

语法

Number.parseInt(string, radix)

参数

  • string：要被解析的字符串

  • radix：可选，一个介于 2 到 36 之间的整数，表示字符串的基数。

    • 如果 radix 为 undefined 或 0，则 radix 将被默认设置为 10
    • 如果字符串以 0x 或 0X 开头，radix 将被默认设置为 16

返回值

  • 一个整数 或 NaN

使用示例

console.log(Number.parseInt("10")) // 10
console.log(Number.parseInt("0xff")) // 255
console.log(Number.parseInt("012")) // 12
console.log(Number.parseInt("12px")) // 12
console.log(Number.parseInt("12.34")) // 12
console.log(Number.parseInt("abc")) // NaN
console.log(Number.parseInt("23", 36)) // 75
console.log(Number.parseInt("23", 37)) // NaN
console.log(Number.parseInt("")) // NaN
console.log(Number.parseInt("12e3")) // 12
// 思考题
console.log(Number.parseInt(0x22, 16)) // 52
// 1.将0x22 十六进制转为对应的十进制数 34
// 2.将 34 转为字符串 "34"
// 3.将 "34" 作为十六进制解析，转为对应的十进制
// 4.将十进制数值返回，最终结果为 52
​
// 思考题2
console.log(Number.parseInt(0b1010, 8)) // 8
console.log(Number.parseInt(0o25, 16)) // 33
​
// 如果传入的参数是算数运算表达式，会进行运算，在执行 parseInt
console.log(Number.parseInt(15 * 3, 10)) // 45

注意事项

  • 空字符串会返回 NaN

  • 第一个参数是非十进制的数值字面量

    • 将其他进制的数值转为十进制的数值
    • 将转换后的十进制数值转为字符串
    • 按照 parseInt() 的工作原理继续
    • 返回结果

  • 第一个参数是运算表达式

    • 计算表达式的结果
    • 将结果转为字符串
    • 按照 parseInt() 的工作原理继续
    • 返回结果

Number.parseFloat()

定义：解析一个字符串参数并返回一个数值

工作原理

  • 输入转换：将输入转换为字符串

  • 去除空白：移除字符串前端的空白字符

  • 识别数值：从字符串的开始部分识别出可以表示为浮点数的部分

    • 整数部分：数值的整数部分，如123
    • 小数点：如果存在，标记小数部分的开始
    • 小数部分：小数点后的数字，如.456
    • 指数部分：如果存在，由e或E引入，表示10的幂次，如e3表示×10³

  • 处理特殊值：能识别特殊值Infinity和-Infinity

  • 返回结果：返回解析到的浮点数。如果字符串的开头不是有效的浮点数，返回NaN

语法

Number.parseFloat(string)

参数

  • string：要被解析的字符串

返回值

  • 一个数字或 NaN

使用示例

console.log(Number.parseFloat("10")) // 10
console.log(Number.parseFloat("10.33")) // 10.33
console.log(Number.parseFloat("10 20 30")) // 10
console.log(Number.parseFloat("10 years")) // 10
console.log(Number.parseFloat("years 10")) // NaN
console.log(Number.parseFloat("1.23e-4")) // 0.000123
console.log(Number.parseFloat("0x10")) // 0
console.log(Number.parseFloat(" ")) // NaN

注意事项

  • 只能处理十进制

四、任意类型转为字符串类型

String函数

String函数可以将任何类型的值转换成字符串

遵循如下规则：

  • 如果值有 toString() 方法，则调用该方法（不传参数）并返回结果
  • 如果值是 null，返回 "null"
  • 如果值是 undefined，返回 "undefined”
var num = 123
var numStr = String(num)
console.log(numStr) // "123"
​
var bool = false
var boolStr = String(bool)
console.log(boolStr) // "false"
​
var nu = null
var nuStr = String(nu)
console.log(nuStr) // "null"
​
var un
var unStr = String(un)
console.log(unStr) // "undefined"
​
var obj = {}
var objStr = String(obj)
console.log(objStr) // "[object Object]"

toString方法

大多数 JavaScript 对象和原始值都有一个 toString方法，可以调用这个方法来转换成字符串。然而，直接对 null 或 undefined 使用 toString 会导致运行时错误，因为这两种类型没有这个方法。

var num = 123
var numStr = num.toString()
console.log(numStr) // "123"
​
var bool = true
var boolStr = bool.toString()
console.log(boolStr) // "true"
​
var obj = {}
var objStr = obj.toString()
console.log(objStr) // "[object Object]"
​
var un
var unStr = un.toString()
console.log(unStr) // TypeError
​
var nu = null
var nuStr = nu.toString()
console.log(nuStr) // TypeError

连接操作符（+）

如果操作符的一侧是字符串，JavaScript 会自动将另一侧的值转换成字符串。

var num = 123
var numStr = "" + num
console.log(numStr) // "123"
​
var bool = true
var boolStr = "" + bool
console.log(boolStr) // "true"
​
var obj = {}
var objStr = "" + obj
console.log(objStr) // "[object Object]"
​
var un
var unStr = "" + un
console.log(unStr) // "undefined"
​
var nu = null
var nuStr = "" + nu
console.log(nuStr) // "null"

JSON.stringify

对于对象、数组或者任何可以被序列化为 JSON 格式的数据类型，JSON.stringify() 方法可以将其转换为字符串表示。

var obj = {a: 1, b: 2}
var objStr = JSON.stringify(obj)
console.log(objStr) // {"a":1,"b":2}
​
var arr = ["red", "green", "blue"]
var arrStr = JSON.stringify(arr)
console.log(arrStr) // ["red","green","blue"]

五、总结与最佳实践

  • 在将任意类型转为字符串时，应根据具体需求和值的类型选择合适的方法
  • 在将任意类型转为布尔值时，应注意 JavaScript 中的真值和假值规则，并显式地使用Boolean对象以提高代码可读性
  • 在将任意类型转为数值时，应谨慎处理可能的NaN结果，并使用适当的函数或运算符来确保转换的准确性
avatar
文章
阅读
粉丝