【JS基础回归】关于parseInt 与 numberObj.toString 中的“raidx”

简介:

一、关于radix的疑问

parseInt以及toString是经常用到的两个方法,如下所示

parseInt (string [, radix])

numberObj.toString ( [ radix ] )

我们通常会这样使用:

parseInt('123abc');  //输出 123

var num = 123;
num.toString();  //输出 '123'

那么,radix这个参数的作用是?神马场景下会用到?有什么注意事项?下文会简单讲解

二、关于parseInt与toString里的radix

parseInt (string [, radix])

作用

讲解可见:http://www.w3school.com.cn/js/jsref_parseInt.asp

常见使用场景

  1. 将字符串转成对应整数
  2. 将2进制数据转成对应的10进制数据,如canvas API里对像素数据的处理时可以用到(比如将读取的10进制像素数据各种处理,比如低位替换,然后再转回10进制)

注意点:

w3school里的解释其实挺详细了,归纳起来要点如下:

  1. radix可选,取值范围为2-36(包含2与36)
  2. 如指定了radix,且radix为合法值,则用radix来解析string;如radix非法,返回NaN
  3. 如无指定radix,且string不以'0x'或者'0X'开头,则radix默认为10;
  4. 如无指定radix,且string以'0x'或者'0X'开头,则radix默认为16;

简单看如下demo,大致可以不同情况下radix对于最终结果的影响。至于对于string的解析,不再这里进行讨论,可参考上面那个链接

parseInt(11);  //输出 11

parseInt(11, 2);  //输出 3
parseInt(11, 36);  //输出 37
parseInt(11, 38);  //输出 NaN

parseInt('0x11');  //输出 17
parseInt('0x11', 10);  //输出 0

numberObj.toString ( [ radix ] )

作用

  将数字numberObj转成其对应radix进制的字符串

常见使用场景

  1. 将10进制数据转成对应的2进制数据。比如canvas里对像素点的低二位数据进行处理,需现将像素点的RGB值转成对应的二进制数据(默认读取到的是10进制的)

参见:

  http://www.w3school.com.cn/js/jsref_tostring_number.asp

注意点

  1. radix可选,默认为10,合法值为2-36(包含2与36)
  2. 当radix不是2-36的整数时,会抛出RangeError错误,而不是想parseInt那样简单返回NaN之类的
  3. “当调用toString方法的对象不是Number时,抛出typeError错误”,这句话略费解。其实这里指的是Number.prototype.toString,即Number对象的原型方法,这个看下demo可能更直观点

demo如下,Number.prototype.toString.call('123')这种调用方式是相当奇怪的,至今没有这种需求的场景,所以知道有这么回事就可以了

var num = 123;

num.toString();  //输出 '123'
num.toString(2);  //输出 '1111011'

num.toString(37);  //输出 'RangeError: toString() radix argument must be between 2 and 36'

'123'.toString(2);  //输出 '123'
Number.prototype.toString.call('123');  //输出 'TypeError: Number.prototype.toString is not generic'

三、关于radix取值范围的限制

看了下EC 5里面对radix的限制,没有说明这个取值范围的原因,于是问了下hax大神,hax大神简单明了地回答

36 = 10数字 + 26字母。

于是仿佛明白了什么。。。0 1 2 3 4 5 ... A B C ... Y Z

有种被鄙视的感觉,羞惭满面。。。

 

四、写在后面

文中示例如有错漏,请指出;如觉得文章对您有用,可点击“推荐” :)

相关文章
|
JavaScript 前端开发
[阿里巴巴最新面试题----JavaScript中map(parseInt)的问题]
[阿里巴巴最新面试题----JavaScript中map(parseInt)的问题]
60 0
|
2月前
|
JavaScript 前端开发 安全
为什么 JavaScript 的 parseInt(0.0000005) 打印“5”?
为什么 JavaScript 的 parseInt(0.0000005) 打印“5”?
31 1
为什么 JavaScript 的 parseInt(0.0000005) 打印“5”?
|
JavaScript
JS基础之解构赋值
解构赋值 在js中,我们经常会将对象或者数组里面的一部分数据作为参数传递给函数,如果我们使用传统的.方法会很麻烦。
|
移动开发 JavaScript 前端开发
JavaScript基础知识梳理-上
对JavaScript基础知识梳理-上
229 31
JavaScript基础知识梳理-上
|
存储 JavaScript 前端开发
JavaScript基础(一篇入门)
JavaScript基础(一篇入门)
217 0
JavaScript基础(一篇入门)
|
JavaScript 前端开发
2021琴理工作室JS基础教学(三)
当网页被加载的时候,浏览器就会创建文档对象模型,也就是dom 而dom可以看做一颗树
82 3
2021琴理工作室JS基础教学(三)
|
JavaScript 前端开发
JavaScript 入门基础 - 运算符(三)
文章目录 JavaScript 入门基础 - 运算符(三) 1.什么是运算符 2.表达式和返回值 3.算术运算符概述 4. 赋值运算符 5.递增和递减运算符 5.1 递增和递减运算符概述 5.2 递增运算符 5.2.1 前置递增运算符 5.2.2 后置递增运算符 5.2.3 后置和前置运算符的区别 6. 比较运算符 7. 逻辑运算符 7.1 逻辑运算符概述 7.2 逻辑与 7.3 逻辑或 7.4
154 0
JavaScript 入门基础 - 运算符(三)
|
存储 JSON JavaScript
JavaScript 入门基础 - 变量 / 数据类型(二)
JavaScript 入门基础 - 变量 / 数据类型(二)
108 0
JavaScript 入门基础 - 变量 / 数据类型(二)
|
JavaScript 前端开发 物联网
JavaScript 入门基础 / 概念介绍(一)
JavaScript 入门基础 / 概念介绍(一)
141 0
JavaScript 入门基础 / 概念介绍(一)
|
JavaScript 前端开发 Java
JavaScript的基础使用
JavaScript的基础 一、javascript简介 JavaScript简称js,最初由网景(现在的Mozilla)公司创建,由于商标冲突原因,其标准版本命名为ECMAScript,但是一般人们还是叫JavaScript,只在谈标准的时候说到ECMAScript这个名字。值得注意的是JavaScript与java没有任何关系,就像雷峰塔(神话中镇压白娘子的塔)和雷锋。此外js(JavaScript)和jsp(java servlet pages)也没有关系。   js的工作分为两部分,一部分属于js语言本身的特性,而另一部需要依靠宿主环境(web浏览器)才能完成。 二、javascri
JavaScript的基础使用