JS-数据类型转换-运算符

最新推荐文章于 2022-07-27 13:47:51 发布
最新推荐文章于 2022-07-27 13:47:51 发布
阅读量247 收藏 1
点赞数
分类专栏： JS 文章标签： js javascript
原文链接：https://blog.csdn.net/weixin_46534854/article/details/115094012
版权

数据类型转换-运算符

1 回顾

1.1 JavaScript 基本语法

1. JS 在 HTML 中的使用方式
   行内式
   内嵌式
   外链式
   
2. JS 中的注释
   //
   /**/
   
3. JS 严格区分大小写
4. JS 语句结束符： 分号或者是换行

1.2 变量

1. 数据、直接量、变量
   数据：计算机计算的就是数据，所有的信息通过数据来表示
   直接量：直接使用数据就是直接量
   变量：给数据取个名字，通过名字使用数据
   
2. 变量的意义
   方便多次重复使用某个数据
   变量可以把数据存储下来，保证下次使用的还是之前的数据
   
3. 变量的语法
   创建新的变量使用var
   可以只创建变量不赋值，也可以同时创建变量并赋值
   变量的值可以修改
   同时声明多个变量
   
4. 变量名的命名规范

1.3 数据类型

1. 分类：
   原始类型： number string boolean null undefined
   对象类型：
   
2. number 数值类型
   2.1 整型	十进制表示、八进制表示、十六进制表示
   2.2 浮点型	科学计数法	浮点型的计算存在精度问题
   2.3 NaN	  isNaN()
   2.4 数值的有效范围		Infinity -Infinity	isFinite()
   
3. string 字符串类型
   3.1 使用单引号或者双引号表示字符
   3.2 转义字符		\n  \\  \'  \"
   
   
4. boolean 布尔类型
   true
   false
   
5. null 和 undefined
   undefined 表示没有定义
   null 表示定义了值是空

2 数据类型转换

2.1 数据类型转换的规则

① 其他类型转为 number 类型
1. string 转为 number 类型的规则：
   ① 纯数字字符串会转为对应的数字，十六进制表示以及科学计数法表示的数字都是纯数字。
   ② 空字符串转为数字 0。 
   ③ 其他字符串转为 NaN。
   注意： string 类型数据在转为 number 类型数据的时候会自动去掉两端的空格，剩下部分按照以上规则进行转换
   
2. boolean 转为 number 类型的规则：
   true -> 1
   false -> 0
   
3. null 转为 number 类型的规则：
   null -> 0
   
4. undefeind 转为 number 类型的规则：
   undefined -> NaN

// 字符串转为 number 类型  使用 Number();
        var n1 = Number('hello');
        var n2 = Number('89.34');
        var n3 = Number('89abc');
        var n4 = Number('89.43e4');
        var n5 = Number('0x11');
        var n6 = Number('');   
        var n7 = Number('     ');   
        var n8 = Number('  101   ');   
        var n9 = Number('  10 1   ');   
        console.log(n1, typeof(n1));  // NaN number
        console.log(n2, typeof(n2));  //89.34
        console.log(n3, typeof(n3));  // NaN
        console.log(n4, typeof(n4));  //89.43e4
        console.log(n5, typeof(n5));  //17
        console.log(n6, typeof(n6));   // 0
        console.log(n7, typeof(n7));   // 0
        console.log(n8, typeof(n8));   // 101
        console.log(n9, typeof(n9));   // NaN

  // boolean 转为 number
        var v1 = Number(true);
        var v2 = Number(false);
        console.log(v1, typeof(v1));  // 1
        console.log(v2, typeof(v2));  // 0

 // null 转为 number
        var v3 = Number(null);
        console.log(v3, typeof(v3));  // 0

// undefined 转为 number
        var v4 = Number(undefined);
        console.log(v4, typeof(v4));  // NaN
② 其他类型转为 string 类型
数据长什么样就转为什么样的字符串

        var s1 = String(34.67);
        var s2 = String(true);
        var s3 = String(null);
        var s4 = String(undefined);
        console.log(s1, typeof(s1));  //34.67
        console.log(s2, typeof(s2));  //true
        console.log(s3, typeof(s3));  //null
        console.log(s4, typeof(s4));  //undefinded
③ 其他类型转为 boolean 类型
1. number 转为 boolean 类型的规则：
   0 和 NaN 转为 false，其他数字都转为 true
   
2. string 转为 boolean 类型的规则：
   空字符串转为 false，其他字符串都转为 true
   
3. null 转为 boolean 类型的规则：
   null -> false
   
4. undefeind 转为 boolean 类型的规则：
   undefiend -> false

总结： 0、NaN、空字符串、null、undefined 转为布尔值会转为 false，其他数据转为布尔值都是 true。

 0、NaN、空字符串、null、undefined 转为 false，其他数据转为 true。
        console.log(Boolean(0));         //false
        console.log(Boolean(NaN));       //false
        console.log(Boolean(''));        //false
        console.log(Boolean(null));      // false
        console.log(Boolean(undefined));  // false

2.2 强制类型转换（显示转换）

① 强制把其他类型转为 number 类型的函数
Number()
parseInt()
parseFloat()

parsentInt()、parsentFloat 与 Number 的区别：

  1. parseInt() 和 parentFloat() 用于提取字符串的数字，所有非字符串类型得到的都是 NaN
  2. 纯数字字符串转为对应的数字；以数字开头的字符串转为开头的数字；其他字符串都是 NaN（空字符也是NaN）
		console.log(parseInt('123.34abc'));     //123
        console.log(parseFloat('123.34abc'));  //123.34
        console.log(parseInt(''));  // NaN

parseInt() 和 parsentFloat() 的区别：

  1. parseInt() 只能提取字符串中的整数部分。
  2. parentFloat() 可以提取字符串中的小数部分.
        console.log(parseInt('123.34abc'));     //123
        console.log(parseFloat('123.34abc'));  //123.34

注意：

  1. Number() 的转换规则此时标准的转换规则。
  2. 可以使用 parsetInt() 来对某个数字进行取整（会把小数部分舍去）。
② 强制把其他类型转为 string 类型的函数
String()
③ 强制把其他类型转为 boolean 类型的函数
Boolean()

2.3 自动类型转换（隐式转换）

  1. JavaScript 作为弱类型编程语言，支持数据类型自动转换。

  2. 数据参与运算，数据不符合运算所要求的类型，数据会根据运算要求的类型自动转换。

  3. 运算所要求的数据类型由运算符绝对。

  4. 自动类型转换的规则与强制类型（Number、String、Boolean）转换的规则是一样的。

 	'100' + 20       		10020		
  	false * 20    			0 		
  	undefined + 100		 	NaN	
  	‘100’ == 100			true	
  	false === 0   			false
  	null == undefined		true
  	200 !== 300				true
  	'abc' < 'b'   		    true  
  	100 > 20 && 1000        1000	    
 	+'hello'  				NaN

3 运算符

3.1 运算符和表达式

① 运算符

运算符就是参与运算的符号，像+、-、*、/ 等。

与运算符一起运算的变量、直接量、表达式称之为操作数。

② 表达式

  1. 表达式是变量或者直接量与运算符组成的式子，表达式会有一个计算结果，称之为表达式的值，也就是说表达式是有值的。

  2. 最简单的表达式是"原始表达式", 如 直接量、 变量名、 关键字等。

  3. 复杂表达式由简单表达式组成, 运算符何以将简单表达式组合成复杂表达式。

  4. 注意带有副作用的表达式，这样的表达式除了有表达式的计算结果之外，还会对表达式中的变量产生影响。

3.2 运算符的分类

① 按照运算符需要的操作数的个数
一元运算符/一目运算符
二元运算符/二目运算符
三元运算符/三目运算符
② 按照运算符的功能
算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符、其他运算符

3.3 运算符讲解（按照功能）

① 算术运算符
运算符含义操作数个数操作数的类型要求组成的表达式的值的类型有无副作用
+加号2numbernumber无
-减号2numbernumber无
*乘号2numbernumber无
/除号2numbernumber无
%取余（取模）2numbernumber无
+正号1numbernumber无
-负号1numbernumber无
++累加1numbernumber有
–累减1numbernumber有

正号运算符：

通常会使用正号运算符来把其他类型的数据转为 number 类型，利用运算符自动类型转换。

		var msg = 'hello';
        console.log(+msg);  //NaN
        console.log(msg);   //hello

累加运算符和累减运算符：

累加和累减都是一元运算符，操作数必须以变量的形式表示，具有副作用。

累加和累减的符号可以在操作数的前面也可以在操作数的后面，对操作数产生的副作用是一样的，但是所组成的表达式的值不同。

运算符在操作前面： 表单式取操作数累加或累减之后的值作为表达式的值。

运算符在操作数后面：表达式取操作数累加或累减之前的值作为表达式的值。

        var num = 20;
        var res = (num ++) - (++ num) + (num --) - (++ num) + (num --);
        console.log(res);  // 20
        console.log(num);  // 21

// 定义变量
        var num = 20;
        // 20  num = 21
        // -
        // 22  num = 22
        // +
        // 22  num = 21
        // -
        // 22  num = 22
        // +
        // 22  num = 21

        var a = 20
        var res = (++ a ) - (a ++) || (a --) - (--a)
        console.log(res)    // 2
        console.log(a)      // 20
② 关系运算符（比较运算符）
运算符含义操作数个数操作数的类型要求组成的表达式的值的类型有无副作用
>大于2number、stringboolean无
>=大于等于2number、stringboolean无
<小于2number、stringboolean无
<=小于等于2number、stringboolean无
==相等2number、其他类型boolean无
!=不相等2number、其他类型boolean无
===全等2所有类型boolean无
!==不全等2所有类型boolean无

两个操作数比较大小的规则：

  1. 如果两个操作的类型不一致，各自自动转为 number 类型进行比较。
  2. 如果两个操作数都是 string 类型，按照 string 类型比较大小的规则进行比较。
		console.log('a' < 'b');  // true
        console.log('A' > 'a');  // false
        在unicode 编码中，a=97,b=98,依次向上。A=65,B=66,依次向上

string 类型的数据比较大小的规则：

  1. 比较的是字符对应的 unicode 编码，unicode 编码是数字，可以比较大小。
  2. 字符串比较是按位一位一位的比较，如果一个操作数第一位的字符比另外一个操作第一位字符的unicode编码大，该操作整体都大。

相等和不相等的判断规则：

  1. 如果两个操作数类型不一致，自动转为 number 之后进行比较。
  2. 如果两个操作数类型一致，直接看是不是一样的。
 		console.log(0 == false);  //true
        console.log('' == false); //ture
        console.log(undefined == undefined);  // true
        console.log('hello' == 'hello');  // true

全等和不全等的判断规则：

  1. 如果两个操作数类型不一致，直接返回 false，不会进行自动类型转换的。
  2. 如果两个操作数类型一致，比较是否一样。
		console.log(true == 1);  // true
        console.log(true === 1);  // false

null 进行相等（==）判断的时候，非常特殊：

console.log(null == null);  	 // true
console.log(null == 0);     	 // false 
console.log(null == false); 	 // false
console.log(null == '');    	 // false
console.log(null == undefined);  // true
③ 逻辑运算符
运算符含义操作数个数操作数的类型要求组成的表达式的值的类型有无副作用
&&逻辑与2任何类型取其中一个操作数作为表达式的值无
||逻辑或2任何类型取其中一个操作数作为表达式的值无
!逻辑非1booleanboolean无

逻辑与组成的表达式的值的计算规则：

  1. 如果第一个操作数不成立，取第一个操作数作为表达式的值。
  2. 如果第一个操作数成立，取第二个操作数作为表达式的值。

逻辑或组成的表达式的值的计算规则：

  1. 如果第一个操作数不成立，取第二个操作数作为表达式的值。
  2. 如果第一个操作数成立，取第一个操作数作为表达式的值。
var n = 10;
        var res = n ++ || -- n;
        console.log(res);  // 10
        console.log(n);    // 11

 console.log(!true);  //false
        console.log(!false);  //ture
        console.log(!0);  //ture
④ 赋值运算符
运算符含义操作数个数操作数的类型要求组成的表达式的值的类型有无副作用
=赋值2无要求，左边的操作数必须是变量变量（左边操作数）的值作为表达式的值有
+=赋值求和2无要求，左边的操作数必须是变量变量（左边操作数的值作为表达式的值有
-=赋值求差2无要求，左边的操作数必须是变量变量（左边操作数的值作为表达式的值有
*=赋值求积2无要求，左边的操作数必须是变量变量（左边操作数的值作为表达式的值有
/=赋值求商2无要求，左边的操作数必须是变量变量（左边操作数的值作为表达式的值有
%=赋值求余2无要求，左边的操作数必须是变量变量（左边操作数的值作为表达式的值有
+=赋值连接2string，左边的操作数必须是变量变量（左边操作数的值作为表达式的值有

总结：

  1. 赋值运算符要求左边的操作数必须是变量，右边的操作数变量、直接量、表达式都可以。
  2. 赋值运算符都有副作用，使用的就是赋值运算符的副作用，左边操作数会被修改。
  3. 赋值运算符组成的表达式以左边操作数为值（修改过后的）。
// 声明变量
        var num = 100;
        var age = 10;

        // 修改变量的值
        num = 200;
        num = 100 + 90;
        var res = (num = age);  
        console.log(num);  //10
        console.log(res);  //10
        console.log('');
        console.log('');

		num += 90;  //   num = num + 90
        console.log(num);  // 100

        num -= 10;   //  num = num - 10
        console.log(num);  // 90

        num *= 2;   // num = num * 2
        console.log(num);  // 180

        num /= 3; // num = num / 3
        console.log(num);  // 60
        
        num %= 9;  //  num = num % 9
        console.log(num);  // 6
⑤ 其他运算符
运算符含义操作数个数操作数的类型要求组成的表达式的值的类型有无副作用
typeof判断数据的类型1任意类型string无
,逗号2无
+字符串连接符2stringstring无
?:比较运算符3任意类型取第二个操作数或者第三个操作数作为表达式的值无

+ 符合具有3个含义：

  1. 如果操作数只有一个，+ 表示正号运算符.
  2. 如果操作数两个，且没有任何一个操作数是字符串，+ 表示加号。
  3. 如果操作数连个，只要有一个操作数是字符串，+ 表示字符串连接符。
 console.log( 100 + 23);        //123 
        console.log( 100 + '12');      //10012
        console.log( '100' + '12');    //10012
        console.log( true + false);    //1
        console.log('');
        console.log('');

?：三元运算符组成的表示的值的规则：

  1. 如果第一个操作数成立，取第二个操作数作为表达式的值。
  2. 如果第一个操作数不成立，取第三个操作数作为表达式的值。
		var res = 100 ? 20 : 10;
        console.log(res);              //20
        var res1 = null ? 100 : 200;
        console.log(res1);             //200

2.4 运算符优先级

1、 一元运算符： ++ -- ! typeof 
2、 乘除取余、加减
3、 关系运算符
4、 逻辑运算符
5、 赋值运算符
6、 ?:

注意： 使用 () 可以提高优先级。

var n = 100;
console.log(n ++ && n --);   101
console.log(n);              100
console.log(-- n || n ++);   99
console.log(n);              99
程序媛~~~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 数据类型转换与JS运算符
m0_46270930的博客
12-17 241
字符串转整数 如果你想把一个字符串转换成整数，有两种方式。 使用 parseInt() 方法，参数为字符串，结果为该字符串转换而来的整数； 转化规则是：如果字符串的首字符不是一个数字，转换失败，返回 NaN；否则，转换到字符串中第一个不是数字的字符止，即，遇到字母、小数点下划线等字符立即停止转换。需要注意的是，16 进制的符号 0x 不会让转换停止。 parseInt() 还可以有第二个参数，表示待转换字符串的进制。下面给一些例子： parseInt("12"); parseInt("12.2"); par
JavaScript 运算符解析！！
weixin_46534854的博客
03-22 183
1 运算符 1.1 运算符和表达式 ① 运算符 运算符就是参与运算的符号，像+、-、*、/ 等。 与运算符一起运算的变量、直接量、表达式称之为操作数。 ② 表达式 表达式是变量或者直接量与运算符组成的式子，表达式会有一个计算结果，称之为表达式的值，也就是说表达式是有值的。 最简单的表达式是"原始表达式", 如 直接量、 变量名、 关键字等。 复杂表达式由简单表达式组成, 运算符何以将简单表达式组合成复杂表达式。 注意带有副作用的表达式，这样的表达式除了有表达式的计算结果之外，还会对表达式中的
JavaScript——运算符的全面解析
Bonsoir777的博客
07-27 805
本文主要介绍的是js中运算符的相关知识点
[ JS ] 如何把字符串类型的加减乘除转化成数学运算符?
Jingwen_molo的博客
09-28 5032
在js中无法直接使用字符串类型的加减乘除，普通的做法是利用switch或者if else语句判断 例如： if(method ==='+'){ return 1 + 2 }else if(method === '-'){ return 1 - 2 }else if(method === '*){ return 1 * 2 } // 除法同上 更简便的做法是利用eval( )函数.。该函数可以计算js字符串，并把他们当做脚本代码执行 console.log(1 + '+
JS - 使用'+'运算符进行字符串和数字互转
seaalan的博客
04-24 1685
使用 + 运算符可以快速将数字转换成字符串。 let theNumber = 123; console.info(typeof(theNumber)); // number let theString = theNumber + ''; console.info(typeof(theString)); // string 使用 + 运算符也可以快速将字符串转换成数字。 let theSt...
浅析JS中常用类型转换及运算符表达式
11-30
在JavaScript中，类型转换通常涉及到值在不同数据类型之间的转换。以下是一些常用的方法： 1. **强制转为整数：parseInt()** - 当你需要将一个值转化为整数时，可以使用parseInt()函数。例如，`x = parseInt(x)` 将...
浅谈JavaScript数据类型及转换
10-24
JavaScript是一种动态类型的编程语言，它的数据类型分为两大类：基本数据类型和引用数据类型。基本数据类型包括Boolean、Number、String、Undefined、Null以及ES6新增的Symbol和BigInt。引用数据类型主要是Object，...
JavaScript+js语法基础+js数据类型+js数据类型转换+js运算符
08-02
本文将深入探讨JavaScript的基础语法，包括变量、数据类型、数据类型转换和运算符。 1. 变量（Variable） 变量是JavaScript中存储数据的容器。它们允许我们多次使用相同的值，而无需反复输入。在JavaScript中，变量...
JS数据类型转换.txt
03-22
javascript中，变量可以赋予任何类型的值。但是运算符对数据类型是有要求的，如果运算符的类型与预期不符，就会自动转换类型。数据类型除了可以自动转换以外，还可以手动强制转换。
week1.2数据类型转换.md
07-31
本文档主要围绕 JavaScript 的数据类型转换进行详细介绍，包括显式类型转换（强制类型转换）与隐式类型转换。 #### 强制类型转换 强制类型转换是指程序员明确指定数据类型的转换过程，常见的转换目标包括字符串（`...
h5程序设计基础 对象 各种运算符
huxia4815的博客
11-14 952
1、程序设计基础 Javascript是一种脚本语言。所有的计算机高级语言分为两种：编译语言和解释型语言。 常见的高级语言：C 、C++、java、Python、vb等等 计算机认识的语言只有机械语言（二进制）。所以要将高级语言转换为机械语言，转化的形式分为两种。解释型和编译型 解释型：程序一行一行的去执行。一直执行有错误的一行。 编译型：将所有的程序转化为机械语言，如果有错误，则不会执
Js中数据类型的转换和运算符
weixin_54015270的博客
03-17 353
数据类型转换 var str="abc"; str=Number(str); // 如果字符串是由数字构成，强转后变为数值，否则变成NaN NaN是非数值类型 parseInt转换数值时候，如果字符串是纯数字构成，或者第一个字符是数字，则转换时候从头开始转换到字母之前 parseInt为取整 根据字符串的进制来转换为十进制的数值 要求参数为字符串，自动隐式转换为字符串 str=parseInt(str); console.log(str); `str=parseInt(str,16)` str
js中的parseInt（）用法
热门推荐
qq_43059674的博客
02-04 1万+
parse 是转化，Int 是整型，整数，目的是把里面转换成整数 var num = parseInt(demo ,radix); //demo 是你要转换的那个数 传一个参数的用法 var demo =”123”; var num = parseInt(demo); console.log(typeof(num) + “:” + num);//number:123 var demo =...
parseInt与Math.floor区别
popping_Sun的博客
07-01 573
当我们想要取整数的时候在js中parentInt与Math.floor用起来都很方便，但有些时候转换成ts就会保错，比如这个例子ParentInt((1+Math.random())*10)在js中没有问题，放到ts中就会出错，变成Math.floor((1+Math.random())*10)就可以了 ...
JavaScript - 数据类型及类型转换
weixin_46022982的博客
05-11 358
2 数据类型 2.1 数据类型的划分 ① 原始类型 number 数值类型 string 字符串类型 boolean 布尔类型 undefined 未定义类型 null 空类型 ② 对象类型 Array 数组类型 Object 对象类型 Function 函数类型 .... 2.2 判断数据的类型 typeof() 注意（特殊现象）： 使用 typeof 判断 null 的数据类型，返回的是 object。 2.3 number 数值类型 ① 整型 整型就是整数的数字。 数字直接
js类型转换与运算符（最核心）
weixin_47080785的博客
08-19 236
类型转换与运算符的联系 类型转换分为：显示转换和隐式转换 显示转换（强制类型转换）： 使用String( ) , Number( ), Boolean( ) 或者Object( )函数进行转换 隐式转换： (当js遇到某些运算符或者语句条件时会做隐式转换） 转换规则，如下表所示：（图来自js权威指南） 通常我们开发处理更多的是原始值之间的转换（下面一点讲到），那对象转换为原始值，这里面的过程又是怎样的呢？ 对象转换为原始值 下面代码，思考一下输出过程： 对象---》布尔值，都转换
JavaScript中if的表达式自动转换为false的情况
chaplinlong的博客
04-12 979
JavaScript中，if条件表达式中，出现0，null，undefined，”时，则结果自动转为false。见代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>if条件下自动转化为false</title> <script type="text/javascript"> if(0){ alert(true); }e
js方------将字符串转换成算术表达式,并计算出结果,例如(‘92-4*5/3‘)
weixin_46611729的博客
11-12 5141
// 计算当前字符串是否是数字 const isNumber = (val) => { const regPos = /^\d+(\.\d+)?$/ // 非负浮点数 const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/ // 负浮点数 if (regPos.test(val) || regNeg.test(v..
JavaScript数据类型转换与逻辑运算符详解
本文档主要关注数据类型之间的转换，分为隐式数据类型转换和强制数据类型转换两种情况。 **隐式数据类型转换**通常发生在无需程序员显式干预时。例如，当进行算术运算时，JavaScript引擎会自动将非数字值转换为适合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值