JS自学Day2--模板字符串、数据类型检测和转换

最新推荐文章于 2024-03-31 09:09:33 发布

什么时候养猫猫

最新推荐文章于 2024-03-31 09:09:33 发布

阅读量380

点赞数 1

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_64005381/article/details/126936674

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

数据类型-- 未定义类型（undefined）

模板字符串

1.作用

拼接字符串变量

在没有它之前，拼接教复杂

2.符号

在英文输入模式下按键盘的tab键上方那个键（1左边那个键）

内容拼接变量时，用${}包住

  // 模板字符串
        let age = 18
        document.write(`我今年${age - 8}岁了`)
        document.write(`
        <div>1223</div>
        <p>abc</p>
        `)

页面输出用户信息案例

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xxx岁了

    <style>
        span{
            color:pink;
        }
    </style>
</head>
<body>
    <script>
        // 输入
        let u_name=prompt('请输入你的名字：')
        let age=prompt('请输入你的年龄：')
        // 输出
        document.write(`大家好，我叫<span>${u_name}</span>，今年${age}岁了`)
    </script>
</body>

数据类型-检测和转换

数据类型- 布尔类型（boolean）

表示肯定或者否定时在计算机中对应的是布尔类型

它有固定的两个值true和false，表示肯定用true（真），否定用false（假）。

  // 1.布尔型 true false
        console.log(true)
        console.log(false)

数据类型-- 未定义类型（undefined）

未定义是比较特殊的类型，只有一个值undefined

什么情况出现？

只声明变量，不赋值的情况下，变量默认值为undefined，一般很少【直接】为某个变量赋值为undefined。

let age //声明变量但是为赋值
document.write(age)//输出 undefined

工作中的使用场景：

我们开发中经常声明一个变量，等待传过来的数据

如果我们不知道这个数据是否传过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

数据类型-null（空类型）

null 表示值为空

let obj = null

null和undefined的区别：

1.undefined 表示没有赋值

2.null表示赋值了，但是内容为空

        // 2.undefined 只声明不赋值
        let age
        console.log(age)

        // 3.null 空
        let obj = null
        console.log(obj)

null开发中使用的场景：

官方解释：把 null 作为尚未创建的对象

大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

检测数据类型

      // 返回的是什么类型 string number Boolean null
        console.log(typeof 123)
        console.log(typeof '123')
        console.log(typeof true)
        console.log(typeof undefined)
        console.log(typeof null)

类型转换

js弱数据类型

坑：使用表单、prompt获取过来默认是字符串类型的，此时就不能直接简单的进行加法运算

console.log('10000' + '20000') //输出1000020000

   let num = prompt('请输入一个数字')
        console.log(num,typeof num)//控制台 18 string

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换

规则：

+两边只要有一个是字符串，都会把另一个转化成字符串

除了+以外的运算符比如- * / 等都会把数据转成数字类型

缺点：

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

小技巧：

+号作为正号解析可以转换成Number


        // 内部悄悄转换了字符串'18'
        console.log('xxx' + 18)
        console.log(10 + '10')//1010

        // - * /会把字符串的'10'转化成数字10
        console.log(10 - '10')//0

        // 小技巧
        let Num=10
        console.log(Num)
        console.log(+Num)
        console.log(-Num) //-10

        console.log(10 + +'10')//20

显式转换

概念：自己写代码告诉自己该转成什么型

转化为数字型

Number（数据）

转成数字型

parseInt(数据)

只保留整数

parseFloat（数据）

可以保留小数

    // let num = '10'
        // Number（数据）
        console.log(Number('10'))
        // 转为数字型，只保留整数，没有四舍五入
        console.log(parseInt('10.99'))//10
        // 转为数字型，会保留小数
        console.log(parseFloat('10.999'))

        //区别：
        // Number() 只能放数字类型的字符，不能放abc这样的
        // 否则返回NaN Not A Number
        console.log(Number('10.01abc'))//NaN
        // parseFloat经常用于过滤单位
        console.log(parseFloat('10.999abc'))//10.999
        console.log(parseFloat('10px'))//10

转换为字符型：

String（数据）

变量.toString（进制）

        console.log(String(10))//10
        let age = 18
        console.log(age.toString())//10
        console.log(age.toString(2))//1010

什么时候养猫猫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS自学Day2--模板字符串、数据类型检测和转换

js零基础自学，该篇涉及了模板字符串，数据类型，以及对上一篇中的检测和类型转换进一步加深了学习。
复制链接

扫一扫

专栏目录