JS关于字符串执行递增操作可以得到数值,执行+1却执行拼接操作的问题

233 阅读2分钟

 昨晚朋友敲代码时发现字符串执行递增操作可以得到数值,今天感兴趣就研究了一下。下面介绍一下JS中字符串执行递增操作可以得到数值,执行+1却执行拼接操作的问题。

下面是测试代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let i = '1'
    console.log(typeof (i + 1));            /* string */
    console.log(typeof ("1" + 1));          /* string */
    console.log(typeof (toString(1) + 1));  /* string */
    console.log(typeof (i++));              /* number */
    console.log(typeof (i--));              /* number */
    console.log(typeof (--i));              /* number */
    console.log(typeof (++i));              /* number */
    console.log(typeof (toString(1)++));    /* 报错 */
    console.log(typeof (++"1"));            /* 报错 */
    console.log(typeof ("1"++));            /* 报错 */
  </script>
</body>

</html>

递增递减操作符存在隐式转换。

    1.如果是包含有效数字字符的字符串,先将其转换为数字值(转换规则同Number()),在执⾏加减1的操作,字符串变量变为数值变量。
2. 如果是不包含有效数字字符的字符串,将变量的值设置为NaN,字符串变量变成数值变量。
3. 如果是布尔值false,先将其转换为0再执⾏加减1的操作,布尔值变量变成数值变量。
4. 如果是布尔值true,先将其转换为1再执⾏加减1的操作,布尔值变量变成数值变量。
5. 如果是浮点数值,执⾏加减1的操作。

看完发现,同样是字符串,为什么i++可以执行,‘1’++却报错了呢?

先看 ‘1’++

一、这种本身就是错误写法,就和你不能写 5++一样,你不能给一个常量执行自增操作;

二、‘1’++ 等价于 ‘1’ = ‘1’ + 1 先不考虑这个等式成不成立,等号两边的数据类型不一样就会报错

再来看 i++

一、写法正确

二、i++ 等价于 i = i + 1,虽然定义了 i = '1',但是等号左边是个变量,且是由let声明,可以更改值,所以等号左侧的数据类型可以忽略,等号右侧只是等价过来的,其实递增运算符已经将 i 的值由string转化为number了。