当前位置: 首页 > news >正文

JavaScript强制类型转换

强制类型转换:

强制类型转换:指将其他的数据类型转换为string、number、boolean

将其他数据类型转换为字符串String():

方法一:

- 可以通过调用被转换值的toString()方法来将其转换为字符串

- 调用xxx的yyy方法 --> xxx.yyy()

- 转换的原理:实际上根据原来的值创建出一个新值

- toString()只是根据原来的值,创建一个新的字符串并返回,

不会改变原来的值

- 要改变变量中存储的值,必须要对变量进行重新赋值

- 注意:由于在null和undefined中,不存在toString()方法,

所以如果对null和undefined调用toString()会报错

方法二:

- 可以通过调用String()函数,来将其他类型的值转换为字符串

- 调用xxx函数,--> xxx()

- String()的原理:

对于具有toString()方法的值来说,String()会直接调用它们的

toString()来将其转换为字符串

对于没有toString()方法的null和undefined来说,

null 会直接 转换为 'null'

undefined 会直接 转换为 'undefined'

方法二函数方法更加实用,建议实用String()函数方法!

var a = 123; // 123 --> '123'

a = a.toString(); // 调用a的toString()来将其转换为字符串

// a = NaN;

// a = undefined; // 'undefined'

// a = true; // 'true'

// a = null;

// console.log(a, typeof a);

// a = a.toString();

// console.log(a, typeof a);

var b = false; // 'false'

b = null; // "null"

b = undefined; // "undefined"

console.log(b, typeof b);

//调用String()函数来将b转换为字符串

b = String(b);

console.log(b, typeof b);

其他的数据类型,转换为数值(Number)

方式一:使用Number()函数来将其他类型转换为数字

- 转换的情况:

string -> number

- 如果字符串是一个合法的数字,则直接转换为对应的数字

'123' --> 123

'123.45' --> 123.45

- 如果字符串是一个非法的数字,则会转换为NaN

'abc' --> NaN

'123.45.46' --> NaN

'100px' --> NaN

- 空串和纯空格组成的字符串,会转换为0

“ '' --> 0

' ' --> 0

boolean -> number

true --> 1

false --> 0

在JS底层,true就是用1来表示的,false就是用0来表示的

null -> number

null --> 0

undefined -> number

undefined --> NaN

var a = '123'; //123

a = 'abc';

a = '123.45';

a = '123.45.46';

a = '100px';

a = ''; // 空串

a = ' ';

a = 'Infinity'; // Infinity

a = true; //1

a = false; //0

a = null; // 0

a = undefined; // NaN

console.log(a, typeof a);

a = Number(a);

console.log(a, typeof a);

方式二:JS专门为我们提供了两个函数,用来将字符串转换为数字

parseInt()

- 将一个字符串转换为一个整数

paresFloat()

- 将一个字符串转换为一个浮点数

- 原理:

- 使用parseXxx()转换一个字符串时,

它们会自左向右依次读取字符串中的内容,

会把字符串中的合法数字提取出来,然后将其转换为数值

parseInt() 只获取合法的整数位

parseFloat() 获取合法的小数位

var a = '10px';

a = '100px12312423445';

a = '123.456.678';

console.log(a, typeof a);// '123.456.678’ string

// a = parseInt(a);

a = parseFloat(a);

console.log(a, typeof a);//123.456 number

方式三使用>>>转换:

let a = '1';

a = a >>> 0

console.log(a, typeof a); // 1 number

在 JavaScript 中,

>>> 是无符号右移运算符,它可以将运算符左边的数字向右移动运算符右边的数字位数,并使用 0 填充左侧空余的位数。无符号右移运算符会把操作数看作是无符号数,因此不管操作数的符号,移动后在最高位补上的都是 0。

当对一个字符串使用无符号右移运算符时,JavaScript 引擎首先将该字符串(如 ‘1’)转换为对应的数字(如 1),然后执行无符号右移位运算。这里的转换涉及到了类型转换。在上述代码中,a = a >>> 0 实际上就是将字符串 ‘1’ 转换为数字 1,再执行 1 >>> 0 操作,返回结果还是 1。

需要注意的是,位运算符在 JavaScript 中有符号和无符号之分,有些位运算符在没有必要时会先将操作数转换为数字类型再进行运算,因此需要谨慎使用。

将其他的数据类型转换为布尔值:

方式一: - 使用Boolean()函数

转换的情况:

- 数值:

除了0和NaN,其他值都会转换为true

- 字符串:

除了空串,其他值都会转换为true

- null和undefined和NaN都会转换为false

- 大部分对象都会转换为true

var a = 100; // true

a = -100; // true

a = Infinity; // true

a = NaN; // false

a = 0; // false

a = 'hello'; // true

a = 'false'; // true

a = ''; // false

a = ' '; // true

a = null; // false

a = undefined; // false

console.log(a, typeof a);

a = Boolean(a);

console.log(a, typeof a);

欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

相关文章:

  • TSINGSEE青犀中央厨房视频智能监控监管解决方案
  • SSD基础架构与NAND IO并发问题探讨
  • GeoTools学习笔记
  • 雅典娜Athena-signa音频算法源码与麦克风阵列角度定义互换问题
  • 【uniapp小程序】如何根据开发和发行,自动替换不同环境的baseUrl
  • strings
  • RocketMQ源码 Broker-SubscriptionGroupManager 订阅组管理组件源码分析
  • fastapi-amis-admin快速创建一个后台管理系统增加音乐管理功能(3)
  • 前端接入若依后,页面白屏问题排查
  • 玩转大数据11:数据可视化与交互式分析
  • scala编码
  • 《算法面试宝典》--机器学习常见问题汇总
  • [ndss 2023]确保联邦敏感主题分类免受中毒攻击
  • “新华三杯”第十届成都信息工程大学ACM程序设计竞赛(同步赛)L. 怎么走啊(最短路+二分 分段函数)
  • 视频监控案例分析
  • [iOS]Core Data浅析一 -- 启用Core Data
  • “Material Design”设计规范在 ComponentOne For WinForm 的全新尝试!
  • Angular 2 DI - IoC DI - 1
  • AngularJS指令开发(1)——参数详解
  • CentOS 7 防火墙操作
  • Centos6.8 使用rpm安装mysql5.7
  • Elasticsearch 参考指南(升级前重新索引)
  • ES6--对象的扩展
  • extjs4学习之配置
  • Java面向对象及其三大特征
  • leetcode-27. Remove Element
  • Mac转Windows的拯救指南
  • Node 版本管理
  • php面试题 汇集2
  • Spark RDD学习: aggregate函数
  • vuex 笔记整理
  • weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架
  • 笨办法学C 练习34:动态数组
  • -- 查询加强-- 使用如何where子句进行筛选,% _ like的使用
  • 仿天猫超市收藏抛物线动画工具库
  • 给第三方使用接口的 URL 签名实现
  • 使用iElevator.js模拟segmentfault的文章标题导航
  • 译有关态射的一切
  • 转载:[译] 内容加速黑科技趣谈
  • 字符串匹配基础上
  • Play Store发现SimBad恶意软件,1.5亿Android用户成受害者 ...
  • 积累各种好的链接
  • ​马来语翻译中文去哪比较好?
  • #LLM入门|Prompt#2.3_对查询任务进行分类|意图分析_Classification
  • #鸿蒙生态创新中心#揭幕仪式在深圳湾科技生态园举行
  • #图像处理
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • (翻译)terry crowley: 写给程序员
  • (七)微服务分布式云架构spring cloud - common-service 项目构建过程
  • (一)WLAN定义和基本架构转
  • (转)Linux NTP配置详解 (Network Time Protocol)
  • (转载)利用webkit抓取动态网页和链接
  • .a文件和.so文件
  • .equals()到底是什么意思?
  • .NET Framework 3.5中序列化成JSON数据及JSON数据的反序列化,以及jQuery的调用JSON