面试题 | toString()的几种用法及与string()方法的区别_tostring方法和string方法区别-优快云博客

本文链接：https://blog.youkuaiyun.com/sunyctf/article/details/140964040

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