js强制类型转换

前端

发布日期: 2019-06-22

更新日期: 2022-12-20

文章字数: 1.8k

阅读时长: 6 分

由于大量的库，工具和各种使您的开发变得更容易的事情，许多程序员开始构建应用程序而不必深入了解某些内容的工作原理。

虽然您仍然可以构建令人惊叹的应用程序，但进入JavaScript漩涡对您来说非常有益。理解“奇怪的部分”是将普通的grunt编码器与高级开发人员区分开来的，而JS生态系统不断变化，其他的工具都是一些最基础的代码构成。了解这些可以让您更广泛地了解并改变您对开发过程的看法。

类型转化的概念

将值从一种类型转换为另一种类型通常称为类型转换（type casting)这是显式的情况；隐式的情况称为强制类型转换（coercion）

当然，如果处理不当，强制可能具有破坏性，并导致代码库中出现不必要的错误和复杂情况。但就目前而言，让我们专注于另一种观点 - 强制是必要的，以便简化我们的代码并摆脱不必要的样板，这将使我们的代码变得更加混乱。

字符串与数字

我们如何组合数字和字符串？我们如何用数字创建一个字符串，反之亦然？将数字转换为字符串的最简单且经常使用的方法是使用+运算符。

14 + “” // “14”

无论何时使用“+”或“ - ”，您要添加或减去的值必须属于同一类型。现在在上面的例子中，他们显然不是。那么将会发生的事情是JS会尝试将它们排除在外 - 在这种情况下，将我们的数字转换为字符串然后将它们一起添加。换句话说，涉及字符串的每个“+”表达式都将产生一个字符串。

42 + “0” // “420”

我们可以使用“+”来连接字符串，但是如果我们使用“ - ”会发生什么？它只能用于数字，所以再一次，JS会将值转换为相同的类型 - 这个时间数字。

"42" - 7 // 35
"42" - 0 // 42
"42" - "9" // 33

好吧，这并不难，但总有一个问题。让我们尝试将两个数组放在一起，看看会发生什么：

[“alex”, “sam”] + [“jon”, “mary”] // “alex,samjon,mary”

现在，无论何时使用“+”运算符，如果一个已经是字符串，则值将连接，或者如果可能，它们将被转换为字符串。因此，您将获得两个数组的字符串表示形式，然后将它们相加。一旦你理解它就是合乎逻辑的，但是当它意外发生时它会导致失望。

另一个有趣的案例是当我们使用“ - ”运算符时会发生什么。正如我之前提到的，它只保留给数值类型，所以再一次，有用的JavaScript语言会将值转换为数字（如果可能），然后对结果值执行该操作。

[3] - [1] // 2
["alex", "sam"] - ["jon", "mary"] // NaN

JavaScript只会尽可能地为您节省一些时间。一些开发人员希望它的行为与其他语言一样，并使他们对结果不满意。您越习惯JS细节，您将在代码中引入的错误越少。

布尔类型

毫无疑问，这对于更有经验的开发人员来说也会造成麻烦。布尔强制通常用于if语句，循环检查，三元和逻辑运算符。无论何时使用其中一个，如果其中的变量不是布尔值，它将被强制为一个。
更重要的是，逻辑表达式的结果，例如，不一定是布尔值，而是使用的两个操作数之一的值。也许一个例子会更好：

const a = 100
const b = "test"
const c = null
a || b // 100
a && b // "test"
a || c // 100
a && c // null
b || c // "test"
b && c // null

让我们分解这里发生的事情。例如，来自其他语言的开发人员可能希望在条件检查中使用它时返回true或false。实际上你得到的是其中一个操作数的值。

当你使用||时运算符，如果第一个值转换为true，则返回该值。否则，你将永远得到第二个。在&&的情况下，如果它们都被强制为真，你将总是获得第二个值。如果第一个转换为false，那么你将得到它返回的值。

那么，为什么这有用呢？经常可以看到的是初始化变量，如下所示：

function greet (name) {
    name = name || 'visitor'
    console.log(`Hello, ${name}!`)
}
greet() // Hello, visitor!

在这里，我们使用这个确切的行为来检查是否缺少值，如果是，则分配另一个值。您可以在许多代码库中看到这一点。作为旁注，在ES6中，您可以直接在函数参数中定义默认值，以避免在函数开头检查所有传递的值。

等值比较

在谈论强制时，我们还必须提到等值比较和对它们的常见误解。流行的解释是==比较值而不检查类型，===比较值和类型。虽然这是一种解释发生了什么的简单方法但并非完全正确。

正如我们前面提到的，某些操作无法在不同类型的值上运行，因此在幕后，JavaScript将使用强制来使我们的生活更轻松。每当我们使用==比较两个值时，JavaScript将使用强制将值转换为相同类型。另一方面，当我们使用严格相等时=== JS不会对类型进行类型转换（这意味着如果它们属于不同类型，则它们不相等）。

简单地说，==是允许强制的比较，===是没有强制的比较。

42 == "42" // true
42 === "42" // false

其他

编写JS函数来计算两个给定数字的总和。如果参数或两个参数的总和等于50，则返回true

function fiftyOrSumOfFifty (num1, num2) {
  if (num1 == 50 || num2 == 50) {
      return true;
  }
  else if (num1 + num2 == 50) {
      return true;
  }
  else {
      return false;
  }
}

console.log(fiftyOrSumOfFifty(25, 25)) // returns `true`
console.log(fiftyOrSumOfFifty(50, 0))  // returns `true`
console.log(fiftyOrSumOfFifty(4, 50))  // returns `true`
console.log(fiftyOrSumOfFifty('50', 0)) // returns `true`
// and...
console.log(fiftyOrSumOfFifty('5', '0')) // also returns `true`
console.log(fiftyOrSumOfFifty('5', 0)) // also returns `true`

console.log(parseFloat([‘50’, 25])) // returns… 50

在数组上使用parseFloat时，它只解析数组中的第一项！从没想过要尝试将数组解析为Float。这实际上是闻所未闻的，它甚至没有在MDN的文档中提及。只是去表明你每天都可以学到新东西。我决定完全避免这个问题，如果其中一个param是一个数组（例如：Array.isArray（num1）…），我只会返回false。