JavaScript——数据类型、类型转换-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_48638643/article/details/133025935

本文阐述了数据类型在编程中的重要性，介绍了JavaScript中的number、string、布尔、NaN等类型，以及如何通过typeof操作符检测和进行类型转换，有助于理解基础编程概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据类型

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

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

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

基本数据类型

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>