JS中的隐式和显式类型转换

JS 类型转换
JavaScript
发布日期:   2025-03-05
更新日期:   2025-03-05
文章字数:   597
阅读时长:   2 分
阅读次数:  

隐式类型转换（Type Coercion）

  • JavaScript 在某些操作符和表达式中，会自动将字符串转换为数字：

1. 使用算术运算符（- * / % **）

  • 当字符串和数字进行 非加法 运算时，JavaScript 会尝试把字符串转换为数字：
console.log("10" - 2) // 8
console.log("10" * 2) // 20
console.log("10" / 2) // 5
console.log("10" % 3) // 1
console.log("2" ** 3) // 8
  • 注意：加法 + 不会触发转换，而是进行字符串拼接：
console.log("10" + 2) // "102"  (字符串拼接)

2. 比较运算符（> < >= <=）

当字符串与数字比较大小时，字符串会被转换为数字：

console.log("10" > 2) // true  ("10" 变成 10)
console.log("5" < "12") // false (因为是字符串比较)
console.log("5" < 12) // true  ("5" 变成 5)

3. 一元加号 +

  • 号对字符串有强制转换为数字的作用
console.log(+"10") // 10 (字符串变数字)
console.log(+"3.14") // 3.14
console.log(+"") // 0  (空字符串变成数字 0)
console.log(+null) // 0
console.log(+true) // 1
console.log(+false) // 0
console.log(+"abc") // NaN (无法转换)

4. == 进行非严格比较

  • 非严格相等 == 会尝试转换类型
console.log("10" == 10) // true (字符串 "10" 被转换成数字 10)
console.log("0" == false) // true ("0" 变成数字 0，false 也变 0)
console.log("" == 0) // true (空字符串变成 0)
console.log("  " == 0) // true (空格也会变 0)
  • 注意：严格相等 === 不会发生类型转换：
console.log("10" === 10) // false (不同类型)
console.log("0" === false) // false

显式类型转换（Explicit Conversion）

  • 如果你想手动把字符串转换为数字，可以使用以下方法：

1. Number()

console.log(Number("10")) // 10
console.log(Number("3.14")) // 3.14
console.log(Number("")) // 0
console.log(Number(" ")) // 0
console.log(Number("abc")) // NaN (无法转换)
console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN

2. parseInt() 和 parseFloat()

  • parseInt() 解析整数，parseFloat() 解析浮点数：
console.log(parseInt("42px")) // 42 (会忽略后面非数字部分)
console.log(parseFloat("3.14px")) // 3.14
console.log(parseInt("abc")) // NaN (无法转换)

3. +（一元加号）

console.log(+"123") // 123
console.log(+"3.14") // 3.14
console.log(+true) // 1
console.log(+false) // 0
console.log(+null) // 0
console.log(+undefined) // NaN

不会触发转换的情况

  • 有些情况下，字符串不会被转换成数字：

加号 + 拼接字符串

console.log("10" + 2) // "102"
console.log("Hello" + 5) // "Hello5"

严格比较 ===

console.log("10" === 10) // false

数组 .map() 处理字符串

console.log(["1", "2", "3"].map((x) => x * 2)) // [2, 4, 6] (转换)
console.log(["1", "2", "3"].map((x) => x + 2)) // ["12", "22", "32"] (字符串拼接)

#记录

JS 类型转换
  目录