面试题 | toString()的几种用法及与string()方法的区别

在说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类常用的方法-优快云博客

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

儒雅的烤地瓜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值