05 变量计算和类型转换

• 字符串拼接
• == 运算符
• if 语句和逻辑运算

在 JavaScript 中，变量计算和类型转换是非常常见的操作，理解这些概念对编写正确和高效的代码非常重要。以下是详细介绍：

变量计算

算术运算

JavaScript 支持基本的算术运算，包括加法（+）、减法（-）、乘法（*）、除法（/）和取模（%）：

const a = 5
const b = 2

const sum = a + b // 7
const difference = a - b // 3
const product = a * b // 10
const quotient = a / b // 2.5
const remainder = a % b // 1

赋值运算

赋值运算符用于给变量赋值，并且可以与算术运算符结合使用：

const x = 10

x += 5 // 等价于 x = x + 5，结果 x 是 15
x -= 3 // 等价于 x = x - 3，结果 x 是 12
x *= 2 // 等价于 x = x * 2，结果 x 是 24
x /= 4 // 等价于 x = x / 4，结果 x 是 6
x %= 2 // 等价于 x = x % 2，结果 x 是 0

字符串与数字的相加

当字符串与数字相加时，JavaScript 会将数字转换为字符串，然后进行字符串拼接。

const a = 100 + 10 // 110
const b = '100' + 10 // '10010'
const c = '100' + '10' // '10010'
const d = '100' + true // '100true'
const e = '100' + null // '100null'
const f = '100' + undefined // '100undefined'

const g = parseInt('100') + 10 // 110
const h = parseFloat('100.5') + 10 // 110.5
const i = Number('100') + 10 // 110

数字与非数字字符串的比较

在进行比较操作时，如果操作数是字符串，JavaScript 会尝试将其转换为数字（如果可能的话）。

const result = '10' > 9 // true，因为 '10' 被转换为数字 10
const result2 = '10' > '9' // true，因为 '10' 和 '9' 都被转换为数字
const result3 = '10' > '9a' // true，因为 '9a' 被转换为数字 9

布尔值与其他类型的比较

布尔值 true 和 false 在进行计算时会被转换为数字，其中 true 转换为 1，false 转换为 0。

const result = true + 1 // 结果是数字 2
const result2 = false + 1 // 结果是数字 1
const result3 = true > false // 结果是 true

类型转换

JavaScript 中有两种类型转换：隐式类型转换（自动类型转换）和 显式类型转换（手动类型转换）。

隐式类型转换

隐式类型转换是 JavaScript 自动进行的类型转换，通常发生在不同类型的值进行运算时。

• 当使用 == 进行比较时，JavaScript 会尝试将操作数转换为相同的类型。
• 当使用 + 运算符时，如果其中一个操作数是字符串，另一个操作数将被转换为字符串。
• 在条件语句中，JavaScript 会将操作数转换为布尔值。

const result1 = 5 + '5'; // '55'，数字 5 被转换成字符串 '5'
const result2 = '5' - 3; // 2，字符串 '5' 被转换成数字 5
const result3 = '5' * '2'; // 10，两个字符串都被转换成数字
const result4 = '5' / '2'; // 2.5，两个字符串都被转换成数字

const result5 = 5 == '5'; // 结果是 true，因为 '5' 被隐式转换为数字 5
const result6 = 5 + '5';  // 结果是字符串 "55"，因为数字 5 被转换为字符串 "5"
const result7 = if ([]) { // 空数组被隐式转换为 true
  console.log('Truthy');
};

常见的隐式转换规则

• 转换为布尔值：空字符串、数字 0、null、undefined、NaN 都会被转换为 false，其他所有值都会被转换为 true。
• 转换为字符串：使用 + 运算符连接字符串和其他类型时，其他类型会被转换为字符串。
• 转换为数字：使用算术运算符时，操作数会被转换为数字。

显式类型转换

显式类型转换是通过使用 JavaScript 的全局函数或方法明确地进行类型转换。

字符串转换

可以使用 String() 函数或 .toString() 方法。

String() 函数

const num = 123
const bool = true

const strNum = String(num) // "123"
const strBool = String(bool) // "true"

.toString() 方法

const num = 123
const bool = true

const strNum = num.toString() // "123"
const strBool = bool.toString() // "true"

数字转换

可以使用 Number()、parseInt() 或 parseFloat() 函数。

**`Number()` vs `parseInt()`/`parseFloat()`**

• Number() 试图将整个字符串转换为数字，如果有任何无效字符，则返回 NaN。
• parseInt() 和 parseFloat() 从字符串的开头解析，如果遇到无效字符，则停止解析并返回已解析的部分。

Number() 函数

const str = '123'
const bool = true
const strWithLetters = '123abc'

const numStr = Number(str) // 123
const numBool = Number(bool) // 1
const numStrWithLetters = Number(strWithLetters) // NaN

parseInt() 和 parseFloat() 函数

const str = '123.45'
const strWithLetters = '123abc'

const intStr = parseInt(str) // 123
const floatStr = parseFloat(str) // 123.45
const intStrWithLetters = parseInt(strWithLetters) // 123

使用一元加法运算符 +

const str = '123'
const bool = true

const numStr = +str // 123
const numBool = +bool // 1

布尔值转换

可以使用 Boolean() 函数。

• 以下值会被转换为 false：false、0、-0、0n、""（空字符串）、null、undefined 和 NaN。
• 其他所有值都会转换为 true。

const str1 = 'hello'
const boolStr1 = Boolean(str1) // true

const str2 = ''
const boolStr2 = Boolean(str2) // false

const num = 0
const boolNum = Boolean(num) // false

const boolZero = Boolean(0) // false

对象转换

可以使用 Object() 函数。

const num = 123
const bool = true

const objNum = Object(num) // [Number: 123]
const objBool = Object(bool) // [Boolean: true]

特殊情况

null 和 undefined 的转换

• null 转换为数字时为 0，转换为布尔值时为 false，转换为字符串时为 'null'。
• undefined 转换为数字时为 NaN，转换为布尔值时为 false，转换为字符串时为 'undefined'。

const n = null
const u = undefined

console.log(Number(n)) // 0
console.log(Number(u)) // NaN
console.log(Boolean(n)) // false
console.log(Boolean(u)) // false
console.log(String(n)) // 'null'
console.log(String(u)) // 'undefined'

对象的转换

对象转换为原始值时，JavaScript 会尝试调用对象的 toString 或 valueOf 方法。

const obj = { value: 10 }

console.log(obj + 5) // '[object Object]5'，对象转换为字符串
console.log(Number(obj)) // NaN，转换为数字失败
console.log(Boolean(obj)) // true，所有对象转换为布尔值都是 true