令人头疼的Javascript隐式&强制转换

2022-10-10 20:38:18 浏览数 (2)

Javascript 的隐式强制只是指 Javascript 试图将意外的值类型强制为预期的类型。因此，您可以在需要数字的地方传递一个字符串，在需要字符串的地方传递一个对象等，它会尝试将其转换为正确的类型。这是最好避免的 Javascript 功能。

代码语言：javascript复制
3 * "3" //9
1   "2"   1 //121

true   true //2
10 - true //9


const foo = {
  valueOf: () => 2
}
3   foo // 5
4 * foo // 8

const bar = {
  toString: () => " promise is a boy :)"
}
1   bar // "1 promise is a boy :)"


4 * [] // 0
4 * [2] // 8
4   [2] // "42"
4   [1, 2] // "41,2"
4 * [1, 2] // NaN

"string" ? 4 : 1 // 4
undefined ? 4 : 1 // 1

数字表达式中的非数字值

字符串

每当您在涉及以下任一运算符的数字表达式中将字符串作为操作数传递时：-, *, /, %，数字的转换过程类似于对值调用内置Number函数。这非常简单，任何仅包含数字字符的字符串都将转换为其等效的数字，但包含非数字字符的字符串将返回NaN. 如下图，

代码语言：javascript复制
3 * "3" // 3 * 3
3 * Number("3") // 3 * 3
Number("5") // 5

Number("1.") // 1
Number("1.34") // 1.34
Number("0") // 0
Number("012") // 12

Number("1,") // NaN
Number("1 1") // NaN
Number("1a") // NaN
Number("one") // NaN
Number("text") // NaN
运算符的情况
  • 运算符与其他数学运算符不同，执行两个功能：
  1. 数学加法
  2. 字符串连接

当字符串是 运算符的操作数时，Javascript 不是将字符串转换为数字，而是将数字转换为字符串。

代码语言：javascript复制
// concatenation
1   "2" // "12"
1   "js" // "1js"

// addition
1   2 // 3
1   2   1 // 4

//addition, then concatenation
1   2   "1" // "31"
(1   2)   "1" // "31"

//concatenation all through
1   "2"   1 // "121"
(1   "2")   1 // "121"

对象

大多数 Javascript 对象转换通常会导致[object Object]，例如

代码语言：javascript复制
"name"   {} // "name[object Object]

每个 javascript 对象都继承了一个toString方法，每当将对象转换为字符串时都会调用该方法。该toString方法的返回值用于字符串连接和数学表达式等操作。

代码语言：javascript复制
const foo = {}
foo.toString() // [object Object]

const baz = {
  toString: () => "I'm object baz"
}

baz   "!" // "I'm object baz!"

当它是数学表达式时，Javascript 将尝试将返回值转换为数字，如果不是。

代码语言：javascript复制
const foo = {
  toString: () => 4
}

2 * foo // 8
2 / foo // 0.5
2   foo // 6
"four"   foo // "four4"

const baz = {
  toString: () => "four"
}

2 * baz // NaN
2   baz // 2four

const bar = {
  toString: () => "2"
}

2   bar // "22"
2 * bar // 4
数组对象

toStringArrays的继承方法有点不同，它的工作方式类似于join不带任何参数调用数组的方法。参考视频讲解：进入学习

代码语言：javascript复制
[1,2,3].toString() // "1,2,3"
[1,2,3].join() // "1,2,3"
[].toString() // ""
[].join() // ""

"me"   [1,2,3] // "me1,2,3"
4   [1,2,3] // "41,2,3"
4 * [1,2,3] // NaN

因此，当您在需要字符串的地方传递数组时，Javascript 会将toString方法的返回值与第二个操作数连接起来。如果它需要一个数字，它会尝试将返回值转换为一个数字。

代码语言：javascript复制
4 * [] // 0
4 / [2] // 2

//similar to
4 * Number([].toString())
4 * Number("")
4 * 0

//

4 / Number([2].toString())
4 / Number("2")
4 / 2
真、假和“”
代码语言：javascript复制
Number(true) // 1
Number(false) // 0
Number("") // 0

4   true // 5
3 * false // 0
3 * "" // 0
3   "" // "3"
该valueOf方法

也可以定义一个valueOf方法，当您传递一个需要字符串或数字值的对象时，Javascript 将使用该方法。

代码语言：javascript复制
const foo = {
  valueOf: () => 3
}

3   foo // 6
3 * foo // 9

当对象上同时定义了toString和valueOf方法时，Javascript 将使用该valueOf方法。

代码语言：javascript复制
const bar = {
  toString: () => 2,
  valueOf: () => 5
}

"sa"   bar // "sa5"
3 * bar // 15
2   bar // 7

valueOf 方法适用于应该表示数值的对象。

代码语言：javascript复制
const two = new Number(2)

two.valueOf() // 2

虚假与真实

我真的想让它变得虚假和真实

每个 Javascript 值都可以被强制为 true 或 false。强制转换为布尔值true意味着该值是真实的。强制转换为布尔值false意味着该值为假。

Javascript 中有一些返回假值的值，它们是：

  1. 错误的
  2. 0
  3. 空值
  4. 不明确的
  5. “”
  6. NaN
  7. -0

其他的都是真的

代码语言：javascript复制
if (-1) // truthy
if ("0") // truthy
if ({}) // truthy

上面的代码片段是可以的，但是在尝试确定值的真实性时，最好是明确的。基本上，不要依赖 Javascript 的隐式强制，即使您觉得自己非常了解它们。

而不是下面的代码片段，

代码语言：javascript复制
const counter = 2

if (counter)

根据您的要求，以下任何一种都是更好的做法

代码语言：javascript复制
if (counter === 2)

//or

if (typeof counter === "number")

这是因为例如，您定义了一个应该处理数字的函数

代码语言：javascript复制
const add = (number) => {
  if (!number) new Error("Only accepts arguments of type: number")
  //your code
}

所以如果我用 0 调用 add 函数，我总是会得到一个意想不到的错误

代码语言：javascript复制
add(0) // Error: Only accepts arguments of type: number

//better check

const add = (number) => {
  if (typeof number !== "number") new Error("Only accepts arguments of type: number")
  //your code
}

add(0) // no error

NaN

NaN 是一个不等于自身的特殊数值。

代码语言：javascript复制
NaN === NaN // false

const notANumber = 3 * "a" // NaN

notANumber == notANumber // false
notANumber === notANumber // false

NaN是唯一不等于自身的 Javascript 值。因此，您可以NaN通过将其与自身进行比较来检查。

代码语言：javascript复制
if (notANumber !== notANumber) // true

ECMAScript 6 引入了一种检查 NaN 的方法， Number.isNaN

代码语言：javascript复制
Number.isNaN(NaN) // true
Number.isNaN("name") // false

当心全局isNaN函数，它会在检查它是否为NaN. 例如，

代码语言：javascript复制
isNaN("name") // true
isNaN("1") // false

isNaN应该避免使用全局函数，它的工作方式类似于下面的函数

代码语言：javascript复制
const coerceThenCheckNaN = (val) => {
  const coercedVal = Number(val)
  return coercedVal !== coercedVal ? true : false
}

coerceThenCheckNaN("1a") // true
coerceThenCheckNaN("1") // false
coerceThenCheckNaN("as") // true
coerceThenCheckNaN(NaN) // true
coerceThenCheckNaN(10) // false

这是大部分隐性强制。如果我错过了什么，请在下面的评论中加入，感谢您一路阅读。

javascript java 编程算法javascript

0 人点赞