web前端学习545-552（数据类型---获取变量数据类型，数据类型转换，案例：计算年龄，简单加法器）

最新推荐文章于 2022-05-18 08:48:08 发布

香甜的甲基橙

最新推荐文章于 2022-05-18 08:48:08 发布

阅读量744

点赞数

分类专栏： web前端基础学习笔记 JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_51249285/article/details/123968074

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

JavaScript

41 篇文章 3 订阅

订阅专栏

文章目录

数据类型

前言：学习要踏实，就个人而言，要好好做笔记，系统学习，随机选取学习感觉学不好，没知识点笔记反正我心里是真不踏实

数据类型

3 获取变量数据类型

3.1 获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型

eg 20-获取变量数据类型.html

<!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>
  <script>
    var num = 10;
    console.log(typeof num); // number 
    var str = 'pink';
    console.log(typeof str);  // string
    var flag = true;
    console.log(typeof vari); // unfined
    var timer = null;
    console.log(typeof timer); // object
    // prompt 取过来的值是 字符型的
    var age = prompt('请输入你的年龄');
    console.log(age);
    console.log(typeof age);
  </script>
</head>
<body>
  
</body>
</html>

3.2 字面量

字面量是在源代码中一个固定值的表示法 ,通俗来说,就是字面量表示如何表达这个值。

数字字面量: 8, 9, 10
字符串字面量 : ‘黑马程序员‘ ,“大前端"
布尔字面量 : true , false

eg. 21-字面量.html

<!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>
  <script>
    console.log(18);
    console.log('18');
    console.log(true);
    console.log(undefined);
    console.log(null);
  </script>
</head>
<body>
  
</body>
</html>

4 数据类型转换

4.1 什么是数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算 ,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换:
● 转换为字符串类型
● 转换为数字型
● 转换为布尔型

4.2 转换成字符串

方式	说明	案例
toString()	转成字符串	var num= 1;alert(num.toString());
String强制转换	转成字符串	var num= 1;alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num= 1;alert(num+“我是字符串”)；

eg. 22-转换为字符型.html

<!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>
    // 1 把数字型转换为字符串型 变量.toString()
    var num = 10;
    var str = num.toString();
    console.log(str);
    console.log(typeof str);

    // 2 我们利用String()
    console.log(String(num));

    // 3 利用加号+ 拼接字符串的方法实现转换效果 隐式转换
    console.log(num + '');
  </script>
</body>
</html>

toString0和String0使用方式不一样。
三种转换方式, 我们更喜欢用第三种加号拼接字符串转换方式, 这种方式也称之为隐式转换。

4.3 转换为数字型（重点）

方式	说明	案例
parseInt(string)函数	将string类型转成整数数值型	parselnt(78)
parseFloat(string) 函数	将string类型转成浮点数数值型	parseFloat(78.21’)
Number()强制转换函数	将string类型转换为数值型	Number('12)
js隐式转换（- * /）	利用算术运算隐式转换为数值型	‘12’-0

注意parselnt和parseFloat单词的大小写,这2个是重点
隐式转换是我们在进行算数运算的时候, JS自动转换了数据类型

23-转换为数字型.html

<!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>
    var age = prompt('请输入您的年龄');
    console.log(parsenInt(age));
    // 1 parseInt(变量) 可以把 字符型的转换为数字型 得到的是整数
    // console.log(parsenInt(age));
    console.log(parsenInt('3,14')); // 3 取整
    console.log(parsenInt('3.94')); // 3 取整
    console.log(parsenInt('120px')); // 120 会去掉这个px单位
    console.log(parsenInt('rem120px')); // NaN
    // 2 parseInt(变量) 可以把 字符型的转换为数字型 得到的是小数 浮点数
    console.log(parseFloat('3.14'));
    console.log(parseFloat('120px')); // 120 会去掉这个px单位
    console.log(parseFloat('rem120px')); // NaN

  </script>
</body>
</html>

案例1：计算年龄

此案例要求在页面中弹出一个输入框,我们输入出生年份后. 能计算出我们的年龄。

案例分析

弹出一个输入框( prompt) ,让用户输入出生年份(用户输入)
把用户输入的值用变量保存起来,然后用今年的年份减去变量直, 结果就是现在的年龄( 程序内部处理)
弹出警示框( alert) .把计算的结果输出(输出结果)

<!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>
    // 1. 弹出一个输入框( prompt) ,让用户输入出生年份(用户输入)
    // 2. 把用户输入的值用变量保存起来,然后用今年的年份减去变量直, 结果就是现在的年龄( 程序内部处理)
    // 3. 弹出警示框( alert) .把计算的结果输出(输出结果)
    var year = prompt('请输入出生年份');
    var age = 2018 - year; // year取过来是字符串型 但是这里是用的减法 有隐式转换
    alert('您今年已经'+ age +'岁了');

  </script>
</body>
</html>

案例2：简单加法器

计算两个数的值，用户输入第一个值后,继续弹出第二个检入框并输入第二个值,最后通过弹出窗口显示出两
次输入值相加的结果。

案例分析

先弹出第一个输入框,提示用户输入第一个值保存起来
再弹出第二个框,提示用户输入第二个值保存起来
把这两个值相加,并将结果赋给新的变量(注意数据类型转换)
弹出警示框( alert) .把计算的结果输出(输出结果)

eg 25-简单加法器案例.html

<!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>
//     1. 先弹出第一个输入框,提示用户输入第一个值保存起来
// 2. 再弹出第二个框,提示用户输入第二个值保存起来
// 3. 把这两个值相加,并将结果赋给新的变量(注意数据类型转换)
// 4. 弹出警示框( alert) .把计算的结果输出(输出结果)
    var num1 = prompt('请输入第一个值');
    var num2 = prompt('请输入第二个值');
    var result = parseFloat(num1) + parseFloat(num2);
    alert('您的结果是'+ result);
  </script>
</body>
</html>

4.4 转换为布尔型

方式	说明	案例
Boolean()函数	其他类型转换成布尔值	Boolean(‘true’);

代表空、否定的值会被转换为false , 如"、0、 NaN、null undefined
其余值都会被转换为true

console. log (Boolean('')); // false
console. log (Boolean(0)); // false
console.1og (Boolean(NaN)); // false
console. log (Boolean (null)); / false 
console. log (Boolean (undefined)); // false
console.log (Boolean('小白')); // true
console. log (Boolean(12)) ; // true

香甜的甲基橙

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
web前端学习545-552（数据类型---获取变量数据类型，数据类型转换，案例：计算年龄，简单加法器）

文章目录数据类型3 获取变量数据类型3.1 获取检测变量的数据类型3.2 字面量4 数据类型转换4.1 什么是数据类型转换4.2 转换成字符串4.3 转换为数字型（重点）案例1：计算年龄案例2：简单加法器4.4 转换为布尔型前言：学习要踏实，就个人而言，要好好做笔记，系统学习，随机选取学习感觉学不好，没知识点笔记反正我心里是真不踏实数据类型3 获取变量数据类型3.1 获取检测变量的数据类型typeof 可用来获取检测变量的数据类型eg 20-获取变量数据类型.html<!DOCT
复制链接

扫一扫