首页 > 网络编程 > JavaScript > javascript技巧 > js常量与数据类型

JavaScript常量与数据类型及使用场景分析

2025-10-22 10:59:25 作者：Mr.Jessy

本文介绍了JavaScript中常量的定义与使用场景,阐述了基本和引用数据类型及其转换方式,重点讲解了隐式与显式类型转换的规则和方法,感兴趣的朋友跟随小编一起看看吧

常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

 const PI = 3.14

注意：常量不允许重新赋值,声明的时候必须赋值（初始化）

数据类型

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

计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型，

js数据类型则主要分为两类：基本数据类型和引用数据类型

其中：

基本数据类型分为：

number数字型
string字符串型
boolean布尔型
undefined未定义型
null空类型

引用数据类型：

object对象

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

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 数据类型</title>
 </head>
 <body>
   <script> 
     // 检测 1 是什么类型数据，结果为 number
     document.write(typeof 1)
     document.write(typeof '你好')  //结果为string
     //注意 从单选框多选框表单获得的值默认为字符串
     let num = prompt('请输入一个数字：')
     document.write(typeof num) //结果为string
   </script>
 </body>
 </html>

注意：在使用表单、prompt获取过来的值默认是字符串，此时不能对其进行简单地加法运算。因此类型转换很重要。

数字类型

即我们数学中学习到的数字，可以是整数、小数、正数、负数

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 数据类型</title>
 </head>
 <body>
   <script> 
     let score = 100 // 正整数
     let price = 12.345 // 小数
     let temperature = -40 // 负数
 
     document.write(typeof score) // 结果为 number
     document.write(typeof price) // 结果为 number
     document.write(typeof temperature) // 结果为 number
   </script>
 </body>
 </html>

JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。

JavaScript是一门弱数据类型的语言，变量到底是属于哪种类型，只有赋值后才能确认，反观，Java是强数据类型，例如 int a = 3 我们知道a一定是整数。而 let a，不赋值真不知道是什么数。

基本的算输符号这里不多解释。注意区分'/'（取除数）和'%'（取余数）即可

算一下：3%5=3，只要前面的数比后面的数小，结果就取前面的数。

优先级为：

乘、除、取余相同，加减相同
乘除取余大于加减
使用()可提升优先级

总之，先乘除后加减，有括号先括号

在数字类型中，有一个特殊的值NAN，它代表一个计算错误，是一个不正确或一个未定义的数学操作所得到的结果。比如console.log('老师' - 2)得到的结果就是NAN。NAN是粘性的，任何对NAN的操作都会返回NAN，如console.log(NAN + 2)。

但注意：NAN不等于NAN！

字符串类型

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

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不能自已嵌套自已
必要时可以使用转义符 \，输出单引号或双引号

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 数据类型</title>
 </head>
 <body>
   <script> 
     let user_name = '小明' // 使用单引号
     let gender = "男" // 使用双引号
     let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了
     let str1 = '' // 这种情况叫空字符串
     document.write(typeof user_name) // 结果为 string
     document.write(typeof gender) // 结果为 string
     document.write(typeof str) // 结果为 string
     document.write('str') //结果为str
     //document.write('你好呀'小明'') 这是报错的
     document.write('你好呀"小明"'')
     document.write('你好呀\'小明\'')
   </script>
 </body>
 </html>

字符串之间可以通过'+'拼接

 document.write('你' + '好')
 let age = 19
 document.write('我今年' + age)
 //也可以直接：
 document.write('我今年' + 19)
 //这里字符串和数字相‘+'，默认为字符串拼接

模板字符串

使用场景：拼接字符串和变量

语法：

使用反引号``
内容拼接时，用${}包住变量

 document.write('我今年' + age + '岁了')
 //也可以这么写
 document.write(`我今年${age}岁了`)

布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 数据类型</title>
 </head>
 <body>
   <script> 
     //  pink老师帅不帅？回答 是 或 否
     let isCool = true // 是的，摔死了！
     isCool = false // 不，套马杆的汉子！
 
     document.write(typeof isCool) // 结果为 boolean
   </script>
 </body>
 </html>

undefined

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 数据类型</title>
 </head>
 <body>
   <script> 
     // 只声明了变量，并末赋值
     let tmp;
     document.write(typeof tmp) // 结果为 undefined
   </script>
 </body>
 </html>

注：JavaScript 中变量的值决定了变量的数据类型。

在工作开发中，我们常声明一个变量，等待传送过来的数据。如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined来判断用户是否有数据传递过来。

null空类型

JavaScript中的null仅仅代表一个“无”、“空”或“值未知”的特殊值。

 let obj = null
 console.log(obj)  //结果为null

null和undefined的区别：

undefined表示没有赋值
null表示赋值了，但内容为空

 console.log(undefined + 1) //返回 NAN
 console.log(null + 1) //返回 1

在开发中，我们把null作为尚未创建的对象，也就是说如果有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null。

类型转换

理解弱类型语言的特征，掌握显式类型转换的方法

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

隐式转换

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

规则：

+号两边只要有一个是字符串，就会把另外一个转成字符串
除了+号之外的算术运算符（如- * /等）都会把数据转成数字类型
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 隐式转换</title>
 </head>
 <body>
   <script> 
     let num = 13 // 数值
     let num2 = '2' // 字符串
 
     // 结果为 132
     // 原因是将数值 num 转换成了字符串，相当于 '13'
     // 然后 + 将两个字符串拼接到了一起
     console.log(num + num2)
 
     // 结果为 11
     // 原因是将字符串 num2 转换成了数值，相当于 2
     // 然后数值 13 减去 数值 2
     console.log(num - num2)
     console.log(+12)  //结果为12
     console.log(+'123') //结果为123（数字型）
   </script>
 </body>
 </html>

注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。

补充介绍模板字符串的拼接的使用

显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

注意：NAN也是number数字型，代表非数字

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 隐式转换</title>
 </head>
 <body>
   <script>
     let t = '12'
     let f = 8
 
     // 显式将字符串 12 转换成数值 12
     t = Number(t)
 
     // 检测转换后的类型
     // console.log(typeof t);
     console.log(t + f) // 结果为 20
 
     // 并不是所有的值都可以被转成数值类型
     let str = 'hello'
     // 将 hello 转成数值是不现实的，当无法转换成
     // 数值时，得到的结果为 NaN （Not a Number）
     console.log(Number(str))
   </script>
 </body>
 </html>

parseInt

只保留开头的整数部分

 console.log(parseInt('12px')) // 12
 console.log(parseInt('12.34px')) // 12
 console.log(parseInt('abc12.34px') // NAN

parseFloat

可以保留小数部分

 console.log(parseFloat('12px')) // 12
 console.log(parseFloat('12.34px')) // 12.34
 console.log(parseFloat('abc12.34px')) // NAN

到此这篇关于JavaScript学习第二天：常量与数据类型的文章就介绍到这了,更多相关js常量与数据类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！