资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaScript 中的强制类型转换

JavaScript 中的强制类型转换

endiat / 1885人阅读

摘要：完整清单是中添加，此处不予介绍布尔值用来表示可能是真或假的值。结果抽象比较运算符在比较它们之前在类型之间进行自动转换。中的隐式转换称为强制类型转换，并在规范中定义。这些内置类型可用于在不同类型之间进行显式转换。

翻译：疯狂的技术宅
原文：https://www.valentinog.com/bl...

本文首发微信公众号：前端先锋
欢迎关注，每天都给你推送新鲜的前端技术文章

JavaScript 原语

JavaScript 建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了，比如字符串和数字：

var greet = "Hello";
var year = 89;

字符串和数字是该语言所谓“原语”的一部分。完整清单是：

String

Number

Boolean

Null

Undefined

Object

Symbol (ES6中添加，此处不予介绍)

布尔值用来表示可能是真或假的值。 null 是故意不去赋值，它通常被分配给一个变量，用于表示绑定完毕，稍后将填充有意义的内容。

var maybe = null;

然后才是 undefined，这意味着变量仍然没有被附加上：

var name;
console.log(name)
undefined

null 和 undefined 看起来非常相似，但它们是两个截然不同的实体，很多开发人员仍然不确定应该使用哪个。

如果要判断 JavaScript 实例的类型，可以用 typeof 运算符。让我们用字符串尝试一下：

typeof "alex"
> "string"

还有数字：

typeof 9
> "number"

用于布尔值：

typeof false
> "boolean"

undefined：

typeof undefined
> "undefined"

还有 null：

typeof null
> "object"

结果令人惊讶！ null 看起来像一个对象，但实际上它是 JavaScript 中的一个历史性错误，自语言诞生就躺在那里了。 由于这些问题，JavaScript 一直声名狼借。但这仅仅是个开始。

陌生的事情

在 JavaScript 中，在两种类型之间进行转换时有一些奇怪的规则。让我给你一些背景信息。先用 Python 举一个例子。 在 Python 中执行以下指令：

"hello" + 89

会给你一个明确的错误：

TypeError: can only concatenate str (**not** "int") to str

而在 JavaScript 中，只有天空才是你的极限：

"hello" + 89

事实上给出：

"hello89"

如果我们尝试向字符串添加数组，看起来会更加奇怪：

"hello" + []

将会得到

1. "hello"

还有

1. "hello" + [89]

会给你一个惊喜：

1. "hello89"

看起来这种转换背后存在某种逻辑。它甚至适用于存在更多元素的 array ：

1. "hello" + [89, 150.156, "mike"]

得到：

1. "hello89,150.156,mike"

这两行 JavaScript 足以让 Java 程序员逃离。但是这种行为在 JavaScript 中 100％ 是又意义的。因此这种隐式转换，也称为强制类型转换是非常值得探索的。

当一个数字变成一个字符串

一些编程语言有一个叫做类型转换的概念，这意味着：如果我想把一个数字或实例转换为另一种类型，那么我必须使显式转换。它也适用于 JavaScript。请看以下示例：

var greet = "Hello";
var year = 89;

如果我想明确的进行转换，可以在代码中表明意图：

var greet = "Hello";
var year = 89;

var yearString = year.toString()

要么这样做：

var greet = "Hello";
var year = 89;

var yearString = String(year)

然后我可以连接两个变量：

greet + yearString;

但是在 JavaScript 中有一种被称为隐式转换的微妙机制，由 JavaScript 引擎提供。该语言不会阻止我们对数字和字符串进行加法操作：

"hello" + 89

会得到：

"hello89"

但是这种转换背后的逻辑是什么？你可能会惊讶地发现 JavaScript 中的加法运算符 + 会自动将两个操作数中的任何一个都转换为字符串，如果其中至少有一个是字符串的话！

你会发现更令人惊讶的是，这条规则在ECMAScript规范中一脉相承。 第11.6.1节 定义了加法运算符的行为，我在这里为你做了总结：

如果 x 是 String 或 y 是String，则返回 ToString(x)，然后返回ToString(y)

这个花招只适用于数字吗？并不是。 数组和对象也会受到相同的转换：

"hello" + [89, 150.156, "mike"]

会得到：

"hello89,150.156,mike"

那么下面的代码会得到怎样的结果：

"hello" + { name: "Jacopo" }

要找到答案，你可以通过将对象转换为字符串来进行快速测试：

String({ name: "Jacopo" })

将会得到：

"[object Object]"

所以我有一种感觉：

1. "hello" + { name: "Jacopo" }

会得到：

1. "hello[object Object]"

打住！这又是什么？

JavaScript 中 [object Object] 的含义是什么？

“[object Object]” 是最常见的 JavaScript “怪癖”之一。

几乎每个 JavaScript 实例都有一个名为 toString() 的方法，有些方法是由 Object.prototype.toString 提供的。
某些类型（如数组）实现了 toString() 的自定义版本，以便在调用方法时将值转换为字符串。例如 Array.prototype.toString 会覆盖 Object.toString()（也称为 method shadowing）。

但是当你在普通的 JavaScript 对象上调用 toString() 时，引擎会给出“[object Object]”，因为 Object.toString() 的默认行为是由实体类型（在这种情况下为Object）返回字符串 object 。

现在让我们把注意力集中在 JavaScript 比较运算符上，它们与算术运算符一样奇怪。

等于还是不等于？

JavaScript 中有两个主要的比较运算符。

第一个我们称之为“弱比较”。这是抽象比较运算符（双等号）：==。

另一个是“强比较”，可以通过三等号进行识别：=== 也称为严格比较运算符。它们两者的行为方式完全不同。

来看一些例子。首先，如果我们将两个字符串与两个运算符进行比较，我们得到相同的结果

"hello" == "hello"
> true

"hello" === "hello"
> true

看上去一切都还好。

现在尝试比较两种不同的类型，数字和字符串。首先是“强比较”：

1. "1" === 1
2. false

这说得通！字符串“1”与数字1是不同的。但是“弱比较”会发生什么？

1. "1" == 1
2. true

居然是true！它没有任何意义，除非这种行为与我们之前看到的隐式转换有关。

如果适用相同的规则怎么办？没错！ ECMAScript spec 再次罢工。结果抽象比较运算符在比较它们之前在类型之间进行自动转换。这是规范的摘要：

比较 x == y 执行如下：
如果 x 是 String 且 y 是Number，则返回比较结果 ToNumber(x)== y

规范说：如果第一个操作数是一个字符串，第二个操作数是一个数字，那么将第一个操作数转换为数字。有趣。

JavaScript 规范充满了这个疯狂的规则，我强烈鼓励大家对它深入挖掘。

在此期间除非你有充分的理由否则在 JavaScript 代码中避免使用抽象比较运算符。你以后会感谢自己的。

那么“强势比较”怎么样？规范中的说 严格相等比较在把值与三等 === 进行比较之前没有进行自动转换。在代码中使用严格相等比较可以避免愚蠢的 bug。

总结

JavaScript 中有七个构建块，即 String，Number，Boolean，Null，Undefined，Object 和 Symbol。这些类型被称为基元。

JavaScript 开发人员可以使用算术和比较运算符来操作这些类型。但是我们要特别注意加法运算符 + 和抽象比较运算符 ==，它本质上倾向于在类型之间进行转换。

JavaScript 中的隐式转换称为强制类型转换，并在 ECMAScript 规范中定义。无论什么时候你的代码都要使用严格的比较运算符 === 而不是 ==。

作为最佳实践，当你打算在两种类型之间进行转换时，请务必明确操作。JavaScript 有一堆内置对象，它们反映了原始类型：String，Number，Boolean。这些内置类型可用于在不同类型之间进行显式转换。

本文首发微信公众号：前端先锋 欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

12个令人惊叹的CSS实验项目

世界顶级公司的前端面试都问些什么

CSS Flexbox 可视化手册

过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！

从设计者的角度看 React

CSS粘性定位是怎样工作的

一步步教你用HTML5 SVG实现动画效果

程序员30岁前月薪达不到30K，该何去何从

7个开放式的前端面试题

React 教程：快速上手指南

云服务器 GPU云服务器 强制转换类型 类型强制转换 强制类型转换 asp强制类型转换

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103437.html

相关文章

  • JavaScript 强制类型转换

    摘要：强制类型转换作为程序员，你一定获取过当前系统的时间戳。比如对于变量而言，此次强制类型转换是隐式的。然而则是非常典型的显式强制类型转换。隐式强制类型转换大部分被诟病的强制类型转换都是隐式强制类型转换。 JavaScript 强制类型转换 作为 JavaScript 程序员，你一定获取过当前系统的时间戳。在 ES5 引入 Date.now() 静态方法之前，下面这段代码你一定不会陌生： v...

    OnlyLing 评论0 收藏0

  • JavaScript基础---强制类型转换

    摘要：如果有并且返回基本类型值，再使用该值进行强制类型转换。四宽松相等和严格相等允许在相等比较中进行强制类型转换，而不允许。这时最好用来避免不经意的强制类型转换。这两个原则可以让我们避开几乎所有强制类型转换的坑。 一、类型转换规则 1.ToString 对于普通对象来说，除非自行定义toString方法，否则就会调用Object.prototype.toString()方法，如果对象有自己的...

    lufficc 评论0 收藏0

  • JavaScript中的强制类型转换

    摘要：第三章强制类型转换强制类型转换将其他数据类型转换成类型将其他数据类型转换为强制类型转换指将一个数据类型强制转换为其他数据类型类型转换主要是指将其他数据类型转换为将其他数据类型转换为方式一调用被转换数据的方法该方法不会影响到原变量但是注                               第三章强制类型转换        Cast type:强制类型转换       将其他数据类...

    isLishude 评论0 收藏0

  • JavaScript 封装对象与强制类型转换

    摘要：拆封想要等到封装对象中基本类型值，我们可以使用方法获取。值类型转换上面两种方式，第一种我们称为显示强制类型转换第二种称之为隐式强制类型转换。介绍强制与隐式类型转换时，我们需要掌握对字符串数字和布尔类型的转换规则。 前面两章介绍了几大数据类型以及值类型，接下来的这个知识点，我觉得它对于javascript程序员来说是很重要的， 认识封装对象 在开始之前，我们先看一个例子，以便之后更轻松的...

    Lin_YT 评论0 收藏0

  • 【JavaScript 学以致用】值的判断以及类型转换

    摘要：隐式强制类型转换隐式强制类型转换指的是一些特殊的操作的副作用来实现类型转换，而非和等函数来实现值的类型转换。下面几种情况会发生布尔值的强制类型转换语句中的天健判断表达式。 引言 来到北京已经有4个年头了，做过一些测试、打杂、前端的工作之后，最后还是选择了前端的工作。现阶段主要还是在写业务代码，代码质量，工作效率就显得尤为重要。【学以致用】这个系列主要记录一些平时工作、学习遇到的一些问题...

    AZmake 评论0 收藏0

发表评论

登陆后可评论

0条评论

endiat

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<