JavaScript——数据类型、类型转换

news2024/12/24 21:57:41

数据类型

计算机世界中的万事万物都是数据。

计算机程序可以处理大量的数据,为什么要给数据分类?

  • 更加充分和高效的利用内存
  • 也更加方便程序员的使用数据

基本数据类型

number 数字型

  • JavaScript中正数、负数、小数等统一称为number
    • JS是弱数据类型,变量到底属于哪种类型,只有赋值之后,才能确定
    • Java是强数据类型,例如: int a = 3,必须是整数
    • 可以进行+、-、*、/、%的运算
      • *、/、%的优先级相同

NaN

代表一个计算错误。它是一个不正确的或者一个未定义的数字操作所得到的结果

console.log("good" - 2) //输出:NaN

NaN是粘性的。任何对NaN的操作都会返回NaN

console.log(NaN+2) // 输出:NaN

甚至两个NaN都不相等

console.log(NaN === NaN) // 输出:false

string 字符串型

通过单引号(")、双引号("")或反引号(`)包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。

string 字符串型

通过单引号(")、双引号("")或反引号(`)包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。

模板字符串

使用场景

  • 拼接字符串和变量
  • 在没有它之前,要拼接变量比较麻烦

语法

  • ··(反引号)
  • 内容拼接变量时,用${}包住变量

boolean 布尔型

只有两个值:true和false

undefined 未定义型

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

什么情况出现未定义类型?

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

let num
console.log(num)

开发场景

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

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

null 空类型

    let obj = null
    confirm.log(obj)

引用数字类型

object 对象

检测数据类型

通过typeof关键字检测数据类型

typeof运算符可以返回被检测的数据类型。它支持两种语法形式:

1.作为运算符: typeof x(常用的写法)

2.函数形式: typeof(x)

换言之,有括号和没有括号,得到的结果是一样的,所以我们直接使用运算符的写法。

let obj = null
console.log(typeof obj) // object  
// 这是一个比较特殊的结果

类型转换

隐式转换

某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。

规则:

  • +号两边只要有一个是字符串,都会把另外一个转成字符串
  • 除了+以外的算术运算符,比如–、*、/等都会把数据转成数字类型

缺点:

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

小技巧:

  • +号作为正号解析可以转换成数字型
  • 任何数据和字符串相加结果都是字符串
    console.log(2 + '2') // 22 string
    console.log(2 - '2') // 0  number
    console.log(+ '2')  // 把字符串类型转化为了数字型
    console.log(typeof + '2')  // 类型为数字型
 

显示转换

  • Number()
    • 把对象的值转换为数字,如果无法转换为数字,那么Number()函数返回NaN
  • parseInt()
    • 分析一个字符串,并且返回一个整数
  • parseFloat
    • 分析一个字符串,并且返回一个浮点数
    console.log(Number(str))
    // 1   显示转化
    // let age = Number(prompt('请输入你的年龄')) // 转化为数字型
    // 2   隐式转换
    let age = + prompt('请输入你的年龄')
    console.log(typeof age)
    
    console.log(parseInt('12ps')) // 只能取数字开头的字符串中的整数  12
    console.log(parseInt('13.12ps')) // 只能取数字开头的字符串中的整数  13
    console.log(parseInt('asd123dfa'))   // 结果为NaN

    //.................  
    console.log(parseFloat('12ps'))   // 12
    console.log(parseFloat('13.12ps'))  // 13.12
    console.log(parseFloat('asd123dfa'))   // 结果为NaN

操作实例

    let num1 = +prompt('请输入第一个数字:')
    let num2 = +prompt('请输入第二个数字:')

    alert(`两个数之和为:${num1 + num2}`)

综合案例

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h2 {
      text-align: center;
      /*给字体为h2的设为中心对齐*/
    }

    table {
      /*合并边框*/
      border-collapse: collapse;
      /* 设置每个表格的高度为80px */
      height: 80px;
      /* 设置表格中的数据都居中对齐 */
      text-align: center;
      /* 让块元素水平剧中 */
      margin: 0 auto;
    }

    th {
      /* 设置表头单元格的左右边宽距 */
      padding: 5px 30px;
      /* padding: 10px 5px 15px 20px;
      上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px 顺时针的 
      padding: 10px 5px 15px;
      上填充是 10px 右填充和左填充是 5px 下填充是 15px 
      padding: 10px 5px;
      上填充和下填充是 10px 右填充和左填充是 5px 
      padding: 10px;
      所有四个填充都是 10px */
    }

    table,
    th,
    td {
      border: 1px solid #000
        /*solid定义实现边框*/
    }
  </style>
</head>

<body>
  <h2>订单付款确认</h2>
  <!-- 下面这个表达式的快捷键为:table>tr>th*5  -->
  <!--
    tr  table row 表示表格的一行
    td table data 表示表格的数据单元格
    th table header 表示表格的表头单元格
  -->

  <script>
    // 1 用户输入
    let price = +prompt('请输入商品价格:')
    let num = +prompt('请输入商品数量:')
    let address = prompt('请输入收货地址:')
    // 2 计算总额
    let total = price * num
    // 3 页面打印
    document.write(`
  <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>HUAWEI Mate 60 Pro</td>
      <td>${price}元</td>
      <td>${num}</td>
      <td>${total}元</td>
      <td>${address}</td>
    </tr>
  </table>

  `)

  </script>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1072408.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于SpringBoot的篮球论坛系统

基于SpringBoot的篮球论坛系统~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 前台界面 登录界面 管理员界面 摘要 基于Spring Boot的篮球论坛系统代表了一个现代社交网络应…

iPhone序列号查询的4个常用方法,赶快get起来!

苹果手机序列号是每台设备的唯一标识符。就像每个人都拥有自己的身份证一样&#xff0c;序列号则是每台苹果手机的身份证明。 通过查询iPhone序列号&#xff0c;我们可以得知手机的产地、生产日期&#xff0c;以及机型等信息&#xff0c;还可以查验手机是否被激活&#xff0c;…

基于Stable Diffusion的图像合成数据集

当前从文本输入生成合成图像的模型不仅能够生成非常逼真的照片&#xff0c;而且还能够处理大量不同的对象。 在论文“评估使用稳定扩散生成的合成图像数据集”中&#xff0c;我们使用“稳定扩散”模型来研究哪些对象和类型表现得如此逼真&#xff0c;以便后续图像分类正确地分配…

华为OD七日集训第7期 - 按算法分类,由易到难,循序渐进,玩转OD

目录 一、适合人群二、本期训练时间三、如何参加四、7日集训第7期五、精心挑选21道高频100分经典题目&#xff0c;作为入门。第1天、逻辑分析第2天、字符串处理第3天、数据结构第4天、递归回溯第5天、二分查找第6天、深度优先搜索dfs算法第7天、动态规划 六、集训总结 大家好&a…

Qt QPen

文章目录 Qt::PenJoinStyleQt::PenCapStyleQt::PenStyleQPen Qt::PenJoinStyle 内容值说明Qt::MiterJoin0x00这些线的外边缘将延伸&#xff0c;以一定角度相交&#xff0c;并填充此区域。Qt::BevelJoin0x40两条线之间的三角形缺口被填满。Qt::RoundJoin0x80两条直线之间的圆弧…

Excel 快速分析

文章目录 格式化 快捷键: Ctrl Q 先选中数据, 再按快捷键或快速分析按钮. 格式化 查看规则: 前提是先在表中添加某种规则, 再全选该表, 这样在查看规则时才会显示出这个规则.

MT03A 毫欧与电机测试仪(EP130)

【MT03A 毫欧与电机测试仪&#xff08;EP130&#xff09;】 虹科的 MT03A 毫欧与电机测试仪是一款革命性的设备&#xff0c;改变了低电阻测试的方法。MT03A 可在一分钟内对三相电机上的所有绕组进行电阻测试&#xff0c;生成高精度的结果&#xff1b;附随的传感器探头可自动补偿…

卖货小程序商城的作用是什么?

只要线上需要卖产品/服务、运营会员、营销等&#xff0c;就可以运用商城实现。随着电商发展日加迅速&#xff0c;很多传统线下经营的商家&#xff0c;无论单店/多门店商家还是厂家等&#xff0c;都希望通过线上发展解决获客引流、经营卖货、提升复购转化率、会员运营及赋能线下…

hdc_std安装配置以及常用命令

前言&#xff1a;&#xff08;时间紧迫就别看前言了&#xff09;hdc_std是OpenHarmony 的命令行工具。因为我们的鸿蒙系统没有应用商店、没有浏览器、不能外接usb设备以及打不开文件资源管理器&#xff0c;所以接触了hdc_std。 环境&#xff1a;Windows10电脑 工具&…

WPF中DataContext的绑定技巧

先看效果&#xff1a; 上面的绑定值都是我们自定义的属性&#xff0c;有了以上的提示&#xff0c;那么我们可以轻松绑定字段&#xff0c;再也不用担心错误了。附带源码。 目录 1.建立mvvm项目 2.cs后台使用DataContext绑定 3.xaml前台使用DataContext绑定 4.xaml前台使用Da…

红队专题-Cobalt strike4.5二次开发

红队专题 招募六边形战士队员原版CS反编译破解jar包反编译拔掉暗桩初始环境效果 招募六边形战士队员 一起学习 代码审计、安全开发、web攻防、逆向等。。。 私信联系 原版CS反编译破解 jar包反编译 CobaltStrike二次开发环境初探CobaltStrike 4.5原版 2022年5月1日 发布 破…

C++对象模型(2)-- 进程内存空间布局

在前面Base类的对象模型中&#xff0c;有base对象实例&#xff0c;虚函数表&#xff0c;静态变量和函数等&#xff0c;这些信息在内存中都有各自的保存位置。了解进程的内存空间布局&#xff0c;比如内存空间分成几大块&#xff0c;各种不同的数据分别保存在内存空间的哪个位置…

婚庆行业通过微信小程序开发可以实现什么功能

婚庆微信小程序是一种针对结婚人群提供一站式婚礼服务的移动应用&#xff0c;包括婚礼策划、酒店预订、婚车租赁、婚纱摄影、婚礼用品等多个方面。随着互联网技术的发展和移动设备的普及&#xff0c;婚庆微信小程序已经成为越来越多新人选择婚礼服务的重要渠道。那么&#xff0…

动态规划-杨辉三角(leetcode)

1. 题目 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] 示例 2: 输入: numRows 1 输出: [[1]] …

airflow的使用

安装&#xff1a; pip install airflow 初始化数据库 airflow db init 添加用户 airflow users create \ --username admin \ --firstname admin \ --lastname admin \ --role Admin \ --email adminadmin.com 运行airflow&#xff0c;只需要这一个命令即可。 airflow sta…

修炼k8s+flink+hdfs+dlink(三:安装dlink)

一&#xff1a;mysql初始化。 mysql -uroot -p123456 create database dinky; grant all privileges on dinky.* to dinky% identified by dinky with grant option; flush privileges;二&#xff1a;上传dinky。 上传至目录/opt/app/dlink tar -zxvf dlink-release-0.7.4.t…

美团面试:Redis怎么做高可用、高并发架构?

说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 如果使用 Redis 的场景很简单&#xff0c;只使用单机版 Redis 会…

探索未来绘画:AI 的视觉创造力 | 开源专题 No.30

这一系列开源项目代表了开源社区在图像处理和创造性媒体生成方面的突出成就。它们的共同特点在于&#xff0c;它们都致力于提供出色的用户体验&#xff0c;让用户能够轻松实现复杂的图像处理和生成任务。这些项目坚守着开放源代码的理念&#xff0c;通过活跃的社区支持和高度灵…

docker compose的安装和使用

docker-copose 介绍 docker-compose 是一个容器编排工具&#xff08;自动化部署、管理&#xff09;; 它用来在单台 Linux 服务器上运行多个 Docker 容器; docker-compose 使用YAML文件来配置所有需要运行的 Docker 容器&#xff0c;该 YAML 文件的默认名称为 docker-compose.…

阿里云服务器ECS是什么?云服务器详细介绍

阿里云服务器ECS英文全程Elastic Compute Service&#xff0c;云服务器ECS是一种安全可靠、弹性可伸缩的云计算服务&#xff0c;阿里云提供多种云服务器ECS实例规格&#xff0c;如经济型e实例、通用算力型u1、ECS计算型c7、通用型g7、GPU实例等&#xff0c;阿里云服务器网分享阿…