Javascript常用数据类型转换总结

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3>
    数据类型转换总结
  </h3>
  <p>
    三种常见转换:字符串转换/数字型转换/布尔型转换
  </p>
  <ul>
    <li>
      字符串转换:两种方法,String()和toString()
    </li>
    <li>
      数字型转换:Number()适用于所有数据类型,parseInt/parseFloat适用于字符串转换为数字的情况。具体规则是
      <ul>
        <li>
          undefined => NaN
        </li>
        <li>
          null => 0
        </li>
        <li>
          true / false => 1 / 0
        </li>
        <li>
          string => “按原样读取”字符串,两端的空白会被忽略。空字符串变成 0。转换出错则输出 NaN。
        </li>
      </ul>
    </li>
    <li>
      布尔型转换 Boolean(),规则是
      <ul>
        <li>
          0/null/undefined/NaN/"" => false
        </li>
        <li>
          其他值 => true
        </li>
      </ul>
    </li>
  </ul>
  <p style="background-color: yellowgreen; display: inline-block;">
    说明:根据<a href="https://zh.javascript.info/type-conversions">Javascript教程</a>总结,万分感谢!
  </p>
  <script>
    /* 
    * JS数据类型
    * 1. Number
    * 2. BigInt
    * 3. String
    * 4. Boolean
    * 5. undefined
    * 6. null
    * 7. Symbol(新增)
    * 8. Object
    */

    /* 
    * JS常用的数据类型转换
    * 1. 其它类型转字符串
    * 2. 其它类型转数字
    * 3. 其它类型转布尔
    * 
    */
    // 补充:涉及数字的js会不失时机的将小数点后多余的0给去掉
    console.log("================其它类型转字符串 start================");
    // 1. 其它类型转字符串

    // 1.1 数字类型转字符串

    // 1.1.1 String方法(强制类型转换)
    console.log(String(12)); // "12"
    console.log(String(12000000000000000000000000000000000000000n)); // "12000000000000000000000000000000000000000"
    console.log(String(12.301)); // "12.301"

    // 1.1.2 toString方法(转换函数)
    const num = 34.101;
    console.log(num.toString()); // 34.101
    const bigIntNum = 12000000000000000000000000000000000000000n;
    console.log(bigIntNum.toString()); // "12000000000000000000000000000000000000000"

    // 1.2 布尔类型转字符串
    console.log(String(true)); // "true"
    console.log("================其它类型转字符串 end================");
    console.log("================其它类型转数字 start================");

    // 2. 其它类型转数字

    // 2.1 字符串转数字

    // 2.1.1 字符串中全都为数字的转换

    // 2.1.1.1 Number方法 不会精度缺失(强制类型转换)
    console.log(Number("123.2601")) // 123.2601

    // 2.1.1.2 parseInt/parseFloat方法 有可能发生精度缺失(转换函数)
    console.log(parseInt("12360.88")) // 12360 舍弃小数点后的文字,转换为整数,精度缺失
    console.log(parseFloat("12360.88012")) // 12360.88012 不会发生精度缺失

    // 2.1.1.3 +运算符
    console.log(+"123450.12") // 123450.12

    // 2.1.2 字符串中部分为数字或没有数字的转换

    // 2.1.2.1 部分数字
    console.log(Number("123n")); // NaN 非数字类型的数字
    console.log(parseInt("123.01n11")) // 123 数字在字符串的开头时,将字符串类型的数字转换为整型数字
    console.log(parseInt("n123")) // NaN 数字不开头时,转换为NaN
    console.log(parseFloat("123.01n")) // 123.01 浮点型数字
    console.log(parseFloat("n123")) // NaN 数字不开头时,转换为NaN

    // 2.1.2.2 不包含数字(均为NaN)
    console.log(Number("glj%ag")); // NaN 
    console.log(parseInt("——gljag")) // NaN
    console.log(parseInt("¥gljag")) // NaN 

    // 特殊情况
    let emptyStr = "";
    console.log(Number(emptyStr)); // 0 空字符串或者去除前后空格后仍为空的字符串转换后为0
    let hasOneStr = " ";
    console.log(Number(hasOneStr)); // 0

    // 2.2 布尔类型转数字
    // Number方法
    console.log(Number(false)) // 0 => false返回0, true 返回1
    console.log(Number(true)) // 0 => false返回0, true 返回1
    // 注意
    console.log(true == 1) // true => 1和true的值相等类型不等
    console.log(false === 0) // false

    // 2.3 undefined和null转数字
    console.log(Number(undefined)) // NaN
    console.log(Number(null)) // 0

    // 总结:
    // parseInt/parseFloat方法:1. 只转换第一个无效字符之前的字符串; 2. parseInt转换有可能精度缺失
    console.log("================其它类型转数字 end================");

    console.log("================其它类型转布尔 start================");
    // 3.1 数字类型转布尔

    // 3.1.1 数字0和1
    console.log(Boolean(0)); // false
    console.log(Boolean(1)); // true

    // 3.1.2 除数字0和1之外的其它数字
    console.log(Boolean(1.325)) // 均为true

    // 3.2 字符串转布尔

    // 3.2.1 空字符串
    const emptyString = "";
    console.log(Boolean(emptyString)); // false

    // 3.2.2 非空字符串
    const hasOneString = " ";
    console.log(Boolean(hasOneString)); // true
    const str = "gkx";
    console.log(Boolean(str)); // true

    // 3.3 undefined和null转布尔
    console.log(Boolean(undefined)) // false
    console.log(Boolean(null)) // false
    console.log("================其它类型转布尔 end================");
  </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值