likes
comments
collection
share

一个+号引发的思考

作者站长头像
站长
· 阅读数 17

前情提要

在一个正在摸鱼的午后,我的朋友给我发了这样一张图片

一个+号引发的思考 并问我:

友:这个if(+code === 0)中的加号是啥意思啊?

我:嗯...(我精神一震,有意思,一时竟不知说啥)

朋友问的问题,不会也得解答,这是我最后的倔强~

麻溜爬去找资料~

揭开+号的神秘面纱

先分析一波

+号最常出现的场景:

1、数字的相加过程中,如1+2,输出3

2、将数字转换为字符串,如:12 + "", 输出“12”

这些情况+号都是在后面的,那+号在前面是什么意思呢? 我立马想到了正数和负数的形式,如:+1,-1。

那这个变量前面的+是表示正数的意思吗?

我很疑惑,因为不确定code到底是什么类型的值。

最后我查阅书籍发现,我忽略了一个最基础的js概念,一元运算符(有被自己蠢到~)

好了,+号的神秘面纱到此揭开了一半

什么是一元运算符呢?

它是JavaScript中最简单的运算符,一元运算符作用于一个操作数。

JS中的一元运算符:

  • 一元加号(+):将操作数转换为数字。
  • 一元减号 (-) : 将操作数转换为数字,然后取反。
  • 前缀/后缀增量 (++) : 在其操作数上加一
  • 前缀/后缀递减 (--) : 从其操作数中减一。

用法

一元运算符可以放在变量的前面,根据变量的类型不同,他有不同的意思。

变量为数字
let a = 8;
+a // 8
-a // -8

如上,+、-表示正负号

变量为字符串

1、数字字符串

let a = '10'
+a // 10

直接转换为数字

2、非数字字符串

let a = 'code'
+a // NaN
变量为布尔值
+true // 1
-true // -1

+false // 0
-false // 0

先转换为数字类型再加减

变量为null
let a = null;
+a // 0
-a // -0
变量为undefined
let a = undefined
+a // NaN

结论

最后,我终于可以给朋友解答这个问题了。

在这段代码中,在code前的这个+号的作用应该是为了防止后台返回数字字符串,从而致使if(code === 0)不成立。其实这里的+号是起到类型转换的作用。

收获

在实际开发过程中,经常会有后台返回的数字变成数字字符串的情况,往往我们前端就会收获到测试提供的一个bug。排查一堆问题时,发现就是这么一个小小的问题造成的,顿时无语凝噎。跑去找后台,又免不了一顿拉扯,最后还是自己做。

注意:

这里补充一点,评论区的jy提出了另一个方案:使用if(code == 0),让我有了新的思考。

其实它和if(+code === 0)作用相同。但在这段代码中比较特殊的是等号右侧是0

  • 若code为null、""、false,if(+code === 0)同样成立。

  • 若code为false、"",if(code == 0)也成立。

如果我们的if条件只是为了判断code为0或者“0”时,这两种方法其实都有缺陷。

是不是只能使用if(code === 0 || code === "0")来判断了。

所以在进行条件判断时要尽量避免使用==而使用===,因为==会进行隐式类型转换。

如果等式右边是200,那么if(code == 200)if(+code === 200)都可以。

但是我们还是推荐使用===来进行判断,可以在进行判断前先把类型转换了,如:

const _code = +code // 类型转换
if(_code === 200) {}

为什么不推荐使用==来进行判断呢,主要是因为会进行类型转换,而这个转换规则特别复杂不好记。有兴趣的可以看下这个文章,里面有进行详细介绍。

如果有技术写法错误问题或者其他解读,欢迎大家评论区指正交流哦~