前端百题斩【006】——js中三类字符串转数字的方式

简介: 前端百题斩【006】——js中三类字符串转数字的方式

js中字符串转数字主要有三种方式:利用转换函数、强制类型转换、利用js变量弱类型转换,下面就从这三个方面来阐述一下该转换方式:


6.1 转换函数


js中字符串转数字的转换函数有两个:parseInt、parseFloat。


  1. parseInt


parseInt() 函数可解析一个字符串,并返回一个整数。


parseInt(string, radix)

radix为可选参数,表示要解析的数字的基数。该值介于 2 ~ 36 之间,超出该范围将返回NaN。


console.log(parseInt('123abc', 10)); // 123
console.log(parseInt('123abc', 2)); // 1
console.log(parseInt('123abc', 8)); // 83
console.log(parseInt('123abc', 16)); // 1194684
console.log(parseInt('abc', 10)); // NaN
  1. parseFloat


parseFloat() 函数可解析一个字符串,并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。如果字符串的第一个字符不能被转换为数字,那么 parseFloat() 会返回 NaN。


parseFloat(string)
console.log(parseFloat('123.4d')); // 123.4
console.log(parseFloat('123abc')); // 123
console.log(parseFloat('abc')); // NaN

6.2 强制类型转换


js中提供了一些强制类型转换函数,将字符串强制转换为数字的转换函数是Number()。以这种方式调用 Number() 时,它会把自己的参数转化成一个数字,然后返回转换后的原始数值(或 NaN)。(注:其转换的为整个值,部分值为数字并不能完成转换,将返回NaN)


console.log(Number('123.456')); // 123.456
console.log(Number('123abc')); // NaN
console.log(Number('1.2.3')); // NaN

6.3 弱类型转换


  1. 按位非


可以将字符串转换为整数,其原理是按位非运算符(~)会先将所有值转换为整数,再以二进制表示,最后执行按位取反操作。(注意:该方法转换的也是整个值,部分值为数字也不能完成转换)


console.log(~~'123'); // 123
console.log(~~'123.456'); // 123
console.log(~~'abc'); // 0
console.log(~~'123abc'); // 0
console.log(~~'0'); // 0
console.log(~~'-123'); // -123
  1. 正号运算符


该方法转换的也是整个值,部分值为数字也不能完成转换


console.log(+'123'); // 123
console.log(+'123.456'); // 123.456
console.log(+'abc'); // NaN
console.log(+'123abc'); // NaN
console.log(+'0'); // 0
console.log(+'-123'); // -123
  1. 四则运算符中的-、*、/


该方法转换的也是整个值,部分值为数字也不能完成转换


console.log('123' - 0); // 123
console.log('123.456' * 1); // 123.456
console.log('abc' * 1); // NaN
console.log('123abc' - 0); // NaN
console.log('0' * 1); // 0
console.log('-123' * 1); // -123
console.log('0XFF' / 1); // 255
相关文章
|
3天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
13 1
|
3天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
9 1
|
5天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
6天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
29 0
|
8天前
|
前端开发 JavaScript
前端 JS 经典:函数管道
前端 JS 经典:函数管道
5 0
|
8天前
|
前端开发 JavaScript
前端 JS 经典:数组去重万能方法
前端 JS 经典:数组去重万能方法
12 0
|
8天前
|
缓存 JavaScript 前端开发
前端 JS 经典:CommonJs 规范
前端 JS 经典:CommonJs 规范
19 0
|
11天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
14天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
45 1
|
14天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
12 0