在说toString()的几种用法前,我们先来说一下string() 和 toString()有什么区别:
String() 和 toString()都可以转换为字符串类型,但是toString()不可以转换null 和 undefined,因为null 和 undefined 没有自己的包装对象,不能访问对象的toString() 方法,包装对象的属性引用结束,这个新创建的临时对象就会被销毁了。
由此而生的一道面试题:
var s = 'test';
s.length = 4;
var t = s.length; // 试问 t输出什么
注:字符串的len和length在大多数编程语言中是等价的,都用来表示字符串的长度。在编程中,字符串的长度通常可以通过两种方法获取:
len
和length
。
字符串不是对象,那么它怎么能够引用对象的方法呢?
是因为字符串有对应的包装类型,可以把字符串转换成对象,这个对象可以用来处理属性的引用,一旦引用结束,就会销毁这个新创建的对象。 当再次运行var t = s.len的时候,又要重新通过包装对象创建一个新对象,但是新对象是没有给len赋值的,所以上面的这道题输出是 undefined。
番外:关于包装对象
原始类型数据没有属性和方法,只有对象(引用类型数据)才具有属性和方法。包装对象,就是为了让原始类型(基本类型)的数据像引用类型的数据,具有属性和方法
JS中提供了3种包装对象:String Number Boolean
new String():将任意数据转字符串,返回对象;
String():将任意数据转字符串,返回字符串
如果是给引用类型添加一个属性呢?
var a = []
a.len = 4
console.log(a.len) // 还是4
因为引用类型在离开当前作用域之前,是存在内存中的,而包装类型的对象,只存在代码执行期间,执行完立即被销毁。所以,我们不能在运行时为基本类型的数据添加属性和方法。
由toString() 引发的血案: 在项目中,对服务端返回的数据充分信任,并且调用toString()方法,导致页面报错,呜呜呜~ 小伙伴们写代码还是要细心一点呐
toString()的用法:
1、可以转换数字的进制(2-36进制)
var a = 10;
a.toString(2) // "1010"
a.toString(8) // "12"
a.toString(16) // "a"
利用toString()的进制转换,可生成随机验证码
Math.random().toString(36).substring(3,7) //生成四位数的随机验证码
2、判断数据(基础数据和引用数据)的类型
Object.prototype.toString.call(Array) // "[object Function]"
Object.proptotype.toString.call([]) // "[object Array]"
因为如果想要获取一个对象的真实的内置类型,我们需要通过获取对象[[Class]]的属性值,在es5之前,该属性值只能通由Object.prototype.toString来访问,因此,通过Object.prototype.toString.call(arr)改变tostring方法的this指向,从而获得对象的内置类型。
[[Class]]这个内部属性是引擎内部用来判断一个对象是属于哪种类型的值。 所有typeof返回值为“object”的对象(如数组)都包含一个内部属性[[class]]
番外 - 延伸:今后只要一提到"类型",一定包含2部分组成:
a. 构造函数: 专门负责创建这个类型的新的子对象
比如: function Array (){ [native code] }、 function Date (){ [native code ] }
b. 原型对象: 专门负责保存这个类型将来所有子对象共有的方法和属性
比如: 所有数组家孩子可用的函数,都保存在
Array.prototype对象中所有日期家孩子可用的函数,都保存在
Date.prototype对象中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //创建一种类型Student,描述所有学生的统一属性结构和功能 //2部分组成: //构造函数 function Student(sname, sage){ this.sname=sname; this.sage=sage; } //原型对象 Student.prototype.intr=function(){ console.log(`I'm ${this.sname}, I'm ${this.sage}`) } //创建一个学生对象 var lilei=new Student("Li Lei", 11); console.log(lilei); lilei.intr(); </script> </body> </html>
问题:旧js中,构造函数与原型对象是分开写的!不符合"封装"的要求。
解决:今后只要创建一种类型,都要用class包裹构造函数和原型对象方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //创建一种类型Student,描述所有学生的统一属性结构和功能 class Student{ //2部分组成: //构造函数 constructor(sname, sage){ this.sname=sname; this.sage=sage; } //原型对象 intr(){ console.log(`I'm ${this.sname}, I'm ${this.sage}`) } } //创建一个学生对象 var lilei=new Student("Li Lei", 11); console.log(lilei); lilei.intr(); </script> </body> </html>
对于普通函数使用toString()的方法,会得到这个函数的内容,对于内置函数使用toString的时候,会返回 '[native code]' 字符串。
function test(){
alert(1);// test
}
test.toString(); // /* "function test(){ alert(1);//test }" */
Function.toString(); // "function Function() { [native code] }"
那就顺便说一下 typeof 和 instanceof 吧!
1、typeof
typeof 判断数据类型只能准确判断出基本数据类型,对于引用数据类型 就不准确了
typeof 的两种形式:
typeof(表达式)
typeof 变量名
//返回值:string, number, boolean, undefined, object( null 也返回object), function, symbol
例如:
typeof NaN // number
typeof Symbol(1) // "symbol"
2、A instanceof B
[对象] instanceof [构造函数]
原理: 实例A在不在B的构造函数中
左侧的A必须是对象,如果是基础类型数据会直接返回false
对于复杂类型的数据:
let reg = new RegExp(//)
reg instanceof RegExp // true
reg instanceof Object // true
let date = new Date()
date instanceof Date // true
date instanceof Object // true
所以,使用 Object.prototype.toString.call(xxx) 返回数据的类型是最靠谱的,它的返回值代表该对象的[object 数据类型]字符串表示。
等什么呢,靠谱的 Object.prototype.toString.call(xxx) 快用起来吧。
▼相关资料
(最全整理)String类的常用方法_string类常用的方法-优快云博客