原文:JavaScript quirk 1: implicit conversion of values

译文:「译」JavaScript 的怪癖 1:隐式类型转换

译者:justjavac


零:提要

[此贴子是 javascript 的 12 个怪癖(quirks) 系列的第一篇。]

JavaScript 是非常宽容的,「来者不拒」,不在乎什么类型。 例如,它如果想要接受数字,它并不拒绝其他类型的值,而是试图把它们转换成数字:

> '5' - '2'
3
> '5' * '2'
10

自动转换为布尔值通常不会引起问题,而且往往很有用(译注:比如在C语言里,根本就没有布尔类型。by @justjavac)。 即使如此,这些隐式转换也会引起怪癖(quirks)。 但是当自动转换为字符串时,可能会引起问题。

一:隐式转换为布尔:“truthy”和“falsy”

当 JavaScript 需要一个布尔值时(例如:if 语句),任何值都可以被使用。 最终这些值将被转换为 true 或false

下面的值被转换为 false

  • undefined, null
  • Boolean: false
  • Number: -0, +0, NaN
  • String: ''

所有其他值都认为是 true。 被转换成 'false' 的值我们成之为 falsy,被转换成 'true' 的值我们成之为 truthy。 您可以使用 Boolean 来测试一个值到底被转换成了什么。

Boolean 将其参数转换为布尔值(boolean):

> Boolean(undefined)
false
> Boolean(0)
false
> Boolean(3)
true

二、字符串的隐式转换

在 Web 开发中,我们经常得到字符串值,实际上我们期望的却是数字或者布尔值。 例如,用户输入的表单中的数据。 如果你忘了对这些字符串进行显式的转换,那么 JavaScript 会令你感到惊讶,主要体现在两个方面:

  1. 首先,系统不会有任何警告。
  2. 其次,这些值将被自动转换,但确实错误的。

例如,加运算符(+),就有这方面的问题,因为只要其中一个操作数是字符串,那么它就执行连接字符串的操作(而不是加法操作,即使它们是数字)

在下面的 JavaScript 代码中,我们本来预期是把 1 和 5 相加。 但是,我们使用了字符串 '5' 和 '1' 。

> var x = '5';  // 错误的假设:x 是一个数字

> x + 1
'51'

此外,还有一些看似是 false 的值,如果转换成字符串,却成了 'true'。

例如:false

> Boolean(false)
false
> String(false)
'false'
> Boolean('false') // !!
true

例如: undefined.

> Boolean(undefined)
false
> String(undefined)
'undefined'
> Boolean('undefined') // !!
true

三、对象的隐式转换

只有在 JavaScript 表达式或语句中需要用到数字或字符串时,对象才被隐式转换。 当需要将对象转换成数字时,需要以下三个步骤:

  1. 调用 valueOf()。如果结果是原始值(不是一个对象),则将其转换为一个数字。
  2. 否则,调用 toString() 方法。如果结果是原始值,则将其转换为一个数字。
  3. 否则,抛出一个类型错误。

第一步示例:

> 3 * { valueOf: function () { return 5 } }
15

第三步示例:

> function returnObject() { return {} }
> 3 * { valueOf: returnObject, toString: returnObject }
TypeError: Cannot convert object to primitive value

如果把对象转换成字符串时,则转换操作的第一步和第二步的顺序会调换: 先尝试 toString() 进行转换,如果不是原始值,则再尝试使用 valueOf()

「译」JavaScript 的怪癖 1:隐式类型转换的更多相关文章

  1. iOS 9,为前端世界都带来了些什么?「译」 - 高棋的博客

    2015 年 9 月,Apple 重磅发布了全新的 iPhone 6s/6s Plus.iPad Pro 与全新的操作系统 watchOS 2 与 tvOS 9(是的,这货居然是第 9 版),加上已经 ...

  2. 「译」JUnit 5 系列:条件测试

    原文地址:http://blog.codefx.org/libraries/junit-5-conditions/ 原文日期:08, May, 2016 译文首发:Linesh 的博客:「译」JUni ...

  3. 「译」JUnit 5 系列:扩展模型(Extension Model)

    原文地址:http://blog.codefx.org/design/architecture/junit-5-extension-model/ 原文日期:11, Apr, 2016 译文首发:Lin ...

  4. jvm系列(十):如何优化Java GC「译」

    本文由CrowHawk翻译,是Java GC调优的经典佳作. 本文翻译自Sangmin Lee发表在Cubrid上的"Become a Java GC Expert"系列文章的第三 ...

  5. jvm系列(七):如何优化Java GC「译」

    本文由CrowHawk翻译,地址:如何优化Java GC「译」,是Java GC调优的经典佳作. Sangmin Lee发表在Cubrid上的”Become a Java GC Expert”系列文章 ...

  6. 有趣的JavaScript隐式类型转换

    JavaScript的数据类型是非常弱的(不然不会叫它做弱类型语言了)!在使用算术运算符时,运算符两边的数据类型可以是任意的,比如,一个字符串可以和数字相加.之所以不同的数据类型之间可以做运算,是因为 ...

  7. JavaScript 隐式类型转换

    JavaScript 隐式类型转换 原文:https://blog.csdn.net/itcast_cn/article/details/82887895 · 1.1 隐式转换介绍 · 1.2 隐式转 ...

  8. JavaScript学习总结(二、隐式类型转换、eval())

    一.(避免)隐式类型转换 console.log(false == 0);   //logs true; console.log(false === 0);   //logs false; conso ...

  9. Javascript显示和隐式类型转换

    1.转换成字符串 多数的JavaScript宿主环境(比如Node.js和Chrome)都提供了全局函数toString: 与此同时Object.prototype也定义了toString方法,使得所 ...

随机推荐

  1. YII Framework学习教程-YII的国际化

    一个web应用,发布到互联网,就是面向全球用户.用户在世界的各个角落都可以访问到你的web应用,当然要看你的网站和不和谐,不和谐的web应用在和谐社会是不让你访问的. YII提供了国际化的支持,可以让 ...

  2. Oracle优化器介绍

    Oracle优化器介绍 本文讲述了Oracle优化器的概念.工作原理和使用方法,兼顾了Oracle8i.9i以及最新的10g三个版本.理解本文将有助于您更好的更有效的进行SQL优化工作. RBO优化器 ...

  3. selenium中处理不带ID的弹出窗口

    在selenium中虽然有selectWindow(String windowID) 方法,但是对于一些窗口很难取得其window ID的话,如果开发人员没有在html代码中提供ID ,或者getAl ...

  4. EFSQLserver

    1.增加一条烽据 FLYNEWQKEntities dataContext = new FLYNEWQKEntities(); Log log = new Log(); log.Data1 = &qu ...

  5. 跨站脚本攻击(Cross‐Site Scripting (XSS))实践

    作者发现博客园在首页显示摘要时未做html标签的过滤,致使摘要中的html代码可以被执行,从而可以注入任何想要被执行的js代码,作者利用这一缺陷在本文摘要中插入了一段js代码执行alert弹窗,同时增 ...

  6. RPC进阶篇

    RPC实现结构拆解 RPC过程调用详解:RPC 服务端通过 RpcServer 去导出(export)远程接口方法,而客户端通过 RpcClient 去引入(import)远程接口方法. 客户端像调用 ...

  7. JavaEE5 Tutorial_Jsp,EL

      Jsp的各种元素在转化为servlet时处理是不一样的:指令,控制web容器如何处理页面脚本,被插入到生成的servlet里EL表达式,作为参数传递到解析器get/set Property,变成方 ...

  8. 《Java数据结构与算法》笔记-CH5-链表-1单链表

    /** * Link节点 * 有数据项和next指向下一个Link引用 */ class Link { private int iData;//数据 private double dData;//数据 ...

  9. 新工程软连接到原来的工程的out目录后,可以直接编译模块

    P508B_App_old_developer/alps$ ln -s  ../../P508B_App/alps/out 连接后,第一次编译后要加分支 ./mk hedy89_we_jb2 mm p ...

  10. 第一百九十三天 how can I 坚持

    我以为我是谁. 你可以记录你今天看了电影 也可以记录你最近在听什么歌 但这都会成为回忆 .  ---oncelife 快受不了了啊.咋办. 今天看了<滚蛋吧,肿瘤君>,还看了<那山那 ...