JavaScript 语法:变量、数据类型及数据类型转换

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: JavaScript 语法 之 变量、数据类型及数据类型转换

作者:WangMin
格言:努力做好自己喜欢的每一件事

JavaScript 语法

变量

赋值变量用 var 关键字,情况如下:
1)先声明变量再赋值

var varName; 
varName="你好~";

var - 用于声明变量的关键字
varName - 变量名

2)同时声明和赋值变量

var varName="你好~";
var a=10,b=20,c=30;

注意:多个变量同时声明与赋值时需要用逗号','隔开。
3)不声明直接赋值 (不推荐使用)

varName="你好~";

注意:变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用。

4)变量命名规范

  • 由字母(a-zA-Z)数字(0-9)下划线(_)以及美元符号($);
  • 不能由数字开头,如果以数字开头,直接报错;
  • 变量名中不允许使用空格和其他标点符号;
  • 不允许使用中文;
  • 变量名长度不能超过255个字符,变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型;
  • 命名尽量用英文并且具有一定的含义;
  • 尽量驼峰式 命名,由多个单词组成时,每个单词的首字母大写,例如:var tagName="";
  • 不能使用关键字与保留字、true、false 和 null;
  • 首字母不要大写,大写是有特殊含义的,因为JavaScript 区分大小写;
  • JS语句结束后要以";"结束。
数据类型

JavaScript 变量能够保存多种数据类型:数值、字符串值、数组、对象等等。具体如下:

1) Number 数值类型(基本数据类型)
在JS中所有的数值都是Number类型(整数和小数),还有特殊的是==NaN也是数值类型==。最基本的数值类型字面量格式是十进制整数。例如:

var num=12;
var num=3.14;

注意:

  • 由于内存的限制,ECMAScript 并不能保存世界上所有的数值
  • 最大值:Number.MAX_VALUE
    console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
    
  • 最小值:Number.MIN_VALUE
    console.log(Number.MIN_VALUE); // 5e-324
    
  • 无穷大:Infinity, 如果超过了最大值就会返回该值
    console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
    
  • 无穷小:-Infinity, 如果超过了最小值就会返回该值
    console.log(typeof -Infinity); // number
    
  • NaN 非法数字(Not A Number),JS中当对数值进行计算时没有结果返回,则返回NaN

    var num=NaN;
    console.log(typeof num);//number
    

    上面提到的typeof是JavaScript中来判断数据类型的,下面会讲到。

  • JS中整数的运算可以保证精确的结果

  • 在JS中浮点数的运算可能得到一个不精确的结果

2) String 字符串类型(基本数据类型)
一组被引号(单引号或双引号)括起来的字符组成的文本内容,例如:

var string="你好,世界";

注意:引号不能一单一双,必须成对出现 。相同引号不能嵌套,不同引号可以嵌套。给变量加上引号, 那么变量将变为一个常量。

3)布尔值 boolean类型 (基本数据类型)
布尔型也被称为逻辑值类型或者真假值类型, 只能够取真(true)和假(false)两种数值,但是JS会把他们解析成1(true),0(false)。例如:

var a=1;
var b=0;
console.log(a==true,b==false)

1.png

注意:

  • 任何非零数值都是true, 包括正负无穷大, 只有0和NaN是false
  • 任何非空字符串都是true, 只有空字符串是false
  • 任何对象都是true, 只有null和undefined是false

4)Undefined (特殊数据类型)

Undefined这是一种比较特殊的类型,表示变量未赋值或者不存在,这种类型只有一种值就是undefined。例如:

var num;
console.log(num); //结果是undefined

注意:undefined是Undefined类型的字面量。

  • undefined和10, "abc"一样是一个常量
  • Undefined和Number,Boolean一样是一个数据类型
  • 需要注意的是typeof对没有初始化和没有声明的变量都会返回undefined。

5)null(特殊数据类型)
Null 类型是表示一个空值,也是只有一个值的数据类型,这个特殊的值是 null。从语义上看null表示的是一个空的对象,所以使用typeof检查null会返回一个Object。例如:

var test=null;
console.log(typeof test);//返回了一个Object

注意:undefined值实际上是由null值衍生出来的,所以如果比较undefined和null是否相等,会返回true

console.log(null==undefined);//返回true

6)Object对象(引用数据类型)
这里不过多的介绍,因为Object对象属于较复杂的数据类型,需要单独来理解。

typeof运算符

typeof检测变量的数据类型,返回值如下:

返回值 含义
undefined 变量被声明后,但未被赋值。
string 用单引号或双引号来声明的字符串。
boolean true或false。
number 整数或浮点数。
object javascript中的对象、数组和null。
数据类型转换

转换函数

1)将其它类型转换为字符串,调用被转换数据类型的 toString() 方法。例如:

var num1=1;
var num2=false;
var arr=[1,2,3];
var a={
   };
function fun(){
   };
num1.toString(); //"1"
num2.toString();//"false"
arr.toString();//"1,2,3"
a.toString();//"[object Object]"
fun.toString();//"fun.toString()"

注意:

  • null和undefined这两个值没有toString()方法,如果调用他们的方法,会报错。
  • 该方法不会影响到原变量,它会将转换的结果返回。

2) parseInt() 解析出一个==string或者number类型的整数部分==,如果没有可以转换的部分,则返回NaN(not a number)。例如:

var num1 = "12";
var num2 = "23hello";
var num3= "hello";
var num4="1.2";
parseInt(num1); //12
parseInt(num2); //23
parseInt(num3); //NaN
parseInt(num4); //1

当parseInt()提取字符串中的整数时,应注意:

  • 从第一位有效数字开始, 直到遇到无效数字。
  • 如果第一位不是有效数字, 什么都提取不到, 会返回NaN。
  • 第一个参数是要转换的字符串,第二个参数是要转换的进制。

3)parseFloat() 解析出一个==string的浮点数部分(也就是小数部分)==,如果没有可以转换的部分,则返回NaN(not a number)

var num1 = "1.2.3";
var num2 = "1.23hello"
var num3 = "hello"
console.log(parseFloat(num1)); //1.2
console.log(parseFloat(num2)); //1.23
console.log(parseFloat(num3)); //NaN

当parseFloat()提取字符串中的小数时,应注意:

  • 会解析第一个小数点’.’, 遇到第二个.或者非数字结束。如上面的变量num1,保留小数部分后为1.2。
  • 如果第一位不是有效数字, 什么都提取不到,则返回NaN(not a number)
  • 不支持第二个参数,只能解析10进制数
  • 如果解析的内容里只有整数,解析成整数

parseInt()函数与parseFloat()函数的共同点与区别:

  1. 共同点:利用parseInt()/parseFloat()都可以提取字符串中的有效整数
  2. 两者之前的区别:是前者只能提取整数,后者可以提取小数

强制类型转换

1)Boolean(value) - 把给定的值转换成Boolean型,例如:

console.log(Boolean(123)); //true
console.log(Boolean("")); //false
console.log(Boolean([])); //true
console.log(Boolean({
   })); //true
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false

2)Number(value)-把给定的值转换成数字(可以是整数或浮点数),例如:

  • 如果是纯数字的字符串,则直接将其转换为数字
    console.log(Number("123")); //123
    
  • 如果字符串中有非数字的内容,则转换为NaN
console.log(Number("123h")); //NaN
  • 如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
    console.log(Number("")); //0
    
  • 将布尔值转换为数字
    console.log(Number(true)); //1
    console.log(Number(false)); //0
    
  • 将null转换为数字
    console.log(Number(null)); //0
    
  • 将undefined 转换为数字
    console.log(Number(undefined)); //NaN
    
    注意: Number()函数中无论混合字符串是否存在有效整数都会返回NaN,例如Number("123h")。

3)String(value)- 把给定的值转换成字符串

  • 对于Number和Boolean也可以调用String()方法,只是调用的方式不同。如下:
var num1 = 10;
var res1 = String(num1); // 重点
console.log(res1); // 10
console.log(typeof res1); // string

var num2 = true;
var res2 = String(num2); // 重点
console.log(res2); // true
console.log(typeof res2); // string
  • 如果想要把undefined和null转换为字符串的话,可以使用String()方法,如下:
var num3 = undefined;
var res3 = String(num3);
console.log(res3); // undefined
console.log(typeof res3); // string

var num4 = null;
var res4 = String(num4);
console.log(res4); // null
console.log(typeof res4); //string

隐式转换

1)任何数据+字符串:转换为字符串

任何数据和 +"字符串" 连接到一起都会转换为字符串,内部实现原理和String()函数一样,例如:

/*数字+''*/
var num1 = 10;
var res1 = num1 + "";
console.log(res1); // 10
console.log(typeof res1); // string 
/*Boolean+''*/
var num2 = true;
var res2 = num2 + "你好";
console.log(res2); // true你好
console.log(typeof res2); // string
/*undefined+''*/
var num3 = undefined;
var res3 = num3 + "";
console.log(res3); // undefined
console.log(typeof res3); // string
/*null+''*/
var num4 = null;
var res4 = num4 + "";
console.log(res4); // null
console.log(typeof res4); // string

2)数字+布尔值:会先将布尔值用Number()进行数字转换(转换过程我们看不到),true转换为1,false转换为0,然后在与数字进行运算。例如:

/*数字+true*/
var num1 = 10;
var res1 = num1 + true;
console.log(res1); // 11
console.log(typeof res1); // number

/*数字+false*/
var num1 = 10;
var res1 = num1 + false;
console.log(res1); // 10
console.log(typeof res1); // number

3)布尔值+布尔值 :将布尔值分别用Number()进行数字转换(转换过程我们看不到),true转换为1,false转换为0,然后进行运算。例如:

var num=true+false;
console.log(num);//1+0=1

以上仅是个人见解,若有不足之处欢迎在下方评论指出,那就先分享到这里!! :smile: 后续继续更新!!

目录
相关文章
|
2月前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
137 59
|
2月前
|
JavaScript 前端开发
JavaScript如何判断变量undefined
JavaScript如何判断变量undefined
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-变量的声明提前
关于JavaScript变量声明提前特性的基础知识介绍。
42 0
JavaScript基础知识-变量的声明提前
|
5天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
5天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
5天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
17天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
22天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
48 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
2月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
41 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
1月前
|
JavaScript 前端开发 开发者
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
20 1