javscript 检测数据类型（typeof）详解 +案例

最新推荐文章于 2023-07-23 09:46:51 发布

战斗中的老段

最新推荐文章于 2023-07-23 09:46:51 发布

阅读量337

点赞数

分类专栏： javascript基础到实战文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_48203828/article/details/126394646

版权

javascript基础到实战专栏收录该内容

53 篇文章 4 订阅

订阅专栏

1、控制台输出语句

console.log(typeof 123) //number类型
console.log(typeof '123') //string类型
console.log(typeof true)//返回布尔类型
console.log(typeof []) //返回object对象类型
console.log(typeof null)//返回object对象类型

数据类型转换：

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。
分为隐式转换：
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则：

+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以为的算数运算符 比如 - * /都会把数据类型转换成数字(number)类型
console.log( 11 - '11') //输出0
console.log( 11 * '11') //输出121
console.log( 11 / '11') //输出1

缺点：
转换类型不明确，靠经验才能总结

小技巧：
+号作为正号解析可以转换成Number

显示转换 ;常用的是转换为数字型(number)和字符串型(string)

显示转换概念：我想转什么类型

// Number 是强制转换为数字类型
console.log(Number('11')) //返回11
// parseInt 转换为数字型，只保留整数，没有四舍五入
console.log(parseInt('11.11')) //返回11
// parseFloat 转换为数字型，会保留小数
console.log(parseFloat('11.11')) //返回11.11
console.log(Number('10111.abc')) //返回Nan Number()只能放数字类型的字符，不能放其他如abc
console.log(parseFloat('11.11abc')) //返回11.11 parseFloat()经常过滤 单位。只能过滤数字开头的单位

字符串型(string)分为：

String(数据)
console.log(String(10))// 返回字符串类型 10
变量.toSring(进制)

let age = 10
console.log(age.toString()) // 返回字符串类型 10
console.log(age.toString(2)) //返回字符串类型 二进制 1010

// 类型转换小案例

// 输入两个数，计算两者的和，打印到页面中
let num1 = +prompt('请输入第一个数：')
let num2 = +prompt('请输入第二个数:')
// let sum = num1+num2
// document.write('结果是：' + (num1+num2))  //打印结果是 1222   错误写法
document.write('结果是：'+(num1+num2))  //打印结果数字类型

案例—用户订单信息案例

需求：用户输入商品价格和商品数量，以及收获地址，可以自动打印订单信息
 // 分析
            // 1、需要输入3个数据，所以需要3个变量来存储 price num  address
            // 2、需要计算总的价格total
            // 3、页面打印生成表格，里面填充数据即可
            // 4、记得最好使用模板字符串   ${}

代码

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        table{
            margin: 0 auto;
            text-align: center;
            border-collapse: collapse;
        }
        table th,td{
            border: 1px solid #000;
            padding: 15px;
        }
        table caption {
            margin:  15px 0;
        }
    </style>

    <!-- <table>
         <caption>
             <h2>订单的确认</h2>
         </caption>
         <tr>
             <th>商品名称</th>
             <th>商品价格</th>
             <th>商品数量</th>
             <th>总价</th>
             <th>收获地址</th>
         </tr>
         <tr>
            <th>小米</th>
            <th>1999元</th>
            <th>3</th>
            <th>5997元</th>
            <th>图木舒克</th>
        </tr>
     </table> -->
    </div>
</head>

<body>
    <script>
        //1、 输入 num price address 三个变量
        let num = +prompt('请输入商品价格:')
        let price = +prompt('请输入购买商品数量：')
        let address = prompt('请输入商品地址：')

        // 2、需要计算总的价格 total
        let total = price * num
        document.write(total)
        // 3、渲染表格  填充数据   用反引字符 ``
        document.write(`
        <table>
         <caption>
             <h2>订单的确认</h2>
         </caption>
         <tr>
             <th>商品名称</th>
             <th>商品价格</th>
             <th>商品数量</th>
             <th>总价</th>
             <th>收获地址</th>
         </tr>
         <tr>
            <th>小米</th>
            <th>${num}元</th>
            <th>${price}</th>
            <th>${total}元</th>
            <th>${address}</th>
        </tr>
     </table>
        `)
    </script>
</body>

</html>

在这里插入图片描述

战斗中的老段

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javscript 检测数据类型（typeof）详解 +案例

1、控制台输出语句数据类型转换：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。分为隐式转换：某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换缺点：转换类型不明确，靠经验才能总结小技巧：+号作为正号解析可以转换成Number**显示转换;常用的是转换为数字型(number)和字符串型(string)**字符串型(string)分为：String(数据)...
复制链接

扫一扫