跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 国内电商 > JavaScript 之 toString()方法详解

JavaScript 之 toString()方法详解

时间:2024-04-14 18:20:24 来源:网络cs 作者:康由 栏目:国内电商 阅读:

标签: 方法 
阅读本书更多章节>>>>

一、简介

​ 在 JavaScript 中,toString() 方法是很多数据类型内置的方法,它被用于将特定的数据类型转换为字符串。但是在不同的数据类型中的作用并非完全相同,下面就来详细讲解一下 toString() 方法在各种数据类型中的使用和作用。

二、详细内容

1、Object

Object类型的toString()方法,用于返回一个表示该对象的字符串,该字符串并不是将对象的所有键值对变成字符串,而是生成一个原始值,返回 "[object Type]"Type表示对象的类型,其属性值取决于调用对象是否有 Symbol.toStringTag 属性,其值是一个字符串,则它的值将被作为 Type的值。

​ 所有继承自 Object.prototype 的对象(即,除了 null-prototype 对象之外的对象)都继承 toString() 方法。

​ 除此之外,我们也可以通过原型链来改写Object.prototype.toString()方法,从而实现特定的功能。

    let o = new Object();    let o2 = {      a: 1,      b: 2    };    console.log(o.toString()); // 输出:[object Object]    console.log(o2.toString()); // 输出:[object Object]    // 重写toString方法    Object.prototype.toString = function () {      // this指向调用该方法的对象      // 返回对象的JSON字符串      return JSON.stringify(this);    }    // 调用重写后的toString方法    console.log(o.toString()); // 输出:{}    console.log(o2.toString()); // 输出:{"a":1,"b":2}
2、String

String继承并重写了ObjecttoString()方法,使其返回字符串本身(如果它是原始值)或 String 对象封装的字符串。它的实现与 String.prototype.valueOf() 完全相同。

​ 在模板字符串等期望字符串的上下文中使用String对象时,会隐式的调用其toString方法,将其变为一个字符串,而字面量就不会调用toString方法。

​ 同样,我们也可以通过原型链来改写String.prototype.toString()方法,从而实现特定的功能。

案例代码:
    // 利用构造函数传建一个字符串    let s = new String('hello');    // 通过字面量创建一个字符串    let s2 = 'hello2';    // 调用默认的toString方法    console.log(s.toString()); // 输出:hello    console.log(s2.toString()); // 输出:hello2    // 重写toString方法    String.prototype.toString = function () {      // this指向调用该方法的对象字符串      // 返回对象字符串的长度      return this.length;    }    // 调用重写后的toString方法    console.log(s.toString()); // 输出:5    console.log(s2.toString()); // 输出:6    // 在模板字符串等期望字符串的上下文中使用String对象时,会自动调用toString方法    console.log(`你好 ${s}`); // 输出:你好 5    console.log(`你好 ${new String('zzq')}`); // 输出:你好 3    // 字面量就不会自动调用toString方法    console.log(`你好 ${s2}`); // 输出:你好 hello2
3、Number

Number类型继承并重写了ObjecttoString()方法,使 toString([radix])方法返回表示该数字值的字符串,可选参数radix表示数字值的基数,也就是数字的进制,参数范围在[2,36],默认基数为10,即十进制。

​ 对于 10 以上的基数,会用小写字母表示大于 9 的数字。例如,对于十六进制数(基数为 16),af 用于表示大于 9 的数字。如果要转换的Number数字为负数,则负号会被保留,成为字符串的第一个字符。但-0是个例外 转换为字符串后,会变成0Infinity 返回 "Infinity",而 NaN 返回 "NaN"

​ 在模板字符串等期望字符串的上下文中使用String对象时,会隐式的调用其toString方法,将其变为一个字符串,而字面量就不会调用toString方法。

​ 同样,我们也可以通过原型链来改写Number.prototype.toString()方法,从而实现特定的功能。

​ 我们还可以通过parseInt()toString() 方法,将一个非十进制的数字字符串转换成制定进制的字符串。如果原始数字字符串太大(比如大于 Number.MAX_SAFE_INTEGER ),则应使用 BigInt 来替代。然而,BigInt 的构造函数仅支持表示数字字面量的字符串(即以 0b0o0x 开头的字符串)。

案例代码:
    // 利用构造函数传建一个数字    let n = new Number(123);    // 通过字面量创建一个数字    let n2 = 321;    // 调用默认的toString方法    console.log(n.toString()); // 输出:123    console.log(n2.toString()); // 输出:321    // 传入参数2,表示转换为二进制    console.log(n.toString(2)); // 输出:1111011    // 传入参数16,表示转换为十六进制    console.log(n.toString(16)); // 输出:7b    // 负数转换为二进制    console.log((-n).toString(2)); // 输出:-1111011    // 负数转换为十六进制    console.log((-n).toString(16)); // 输出:-7b    // -0是个例外 转换为字符串后,会变成0    n = -0;    console.log(n.toString()); // 输出:0    // parseInt和toString方法 结合使用,可以实现进制转换    // 十六进制转换为二进制    n = '7ba1';    console.log(parseInt(n, 16).toString(2)); // 输出:11110111010001    // 重写toString方法    Number.prototype.toString = function () {      // this指向调用该方法的对象数字      // 返回对象数字的平方      return this * this;    }    n = 2;    // 调用重写后的toString方法    console.log(n.toString()); // 输出:4    // 在模板字符串等期望字符串的上下文中使用Number对象时,会自动调用toString方法    console.log(`你好 ${n}`); // 输出:你好 4    console.log(`你好 ${new Number(3)}`); // 输出:你好 9    // 字面量就不会自动调用toString方法    console.log(`你好 ${n2}`); // 输出:你好 321
4、Array

Array类型的toString()方法,用于返回一个由该数组所有元素以,拼接成的字符串,该方法其实是在内部调用了Array.join(',')方法。

​ 如果数组的join()方法被改写,则toString()方法也会受到影响。如果join()方法不可用或者被改写为非函数属性,则会按照原型链去调用ObjecttoString()方法。

​ 同样,我们也可以通过原型链来改写Array.prototype.toString()方法,从而实现特定的功能。

案例代码:
    let arr1 = [1, 2, 3];    let arr2 = new Array(1, 2, 3);    console.log(arr1.toString()); // 输出:1,2,3    console.log(arr2.toString()); // 输出:1,2,3    // 改写join()方法为另外的函数    arr1.join = function () {      // this指向调用该方法的数组      // 返回数组的JSON字符串      return JSON.stringify(this);    }    // 调用重写后的join方法    console.log(arr1.join()); // 输出:[1,2,3]    // 调用toString方法 其内部隐式调用了join方法    console.log(arr1.toString()); // 输出:[1,2,3]    // 改写join()方法为非函数    arr2.join = 1;    // 调用重写后的join方法    console.log(arr2.join); // 输出:1    // 调用toString方法 其内部隐式调用了join方法    // 由于join不是函数,所以会按原型链调用Object的toString方法    console.log(arr2.toString()); // 输出:[object Array]// 重写toString方法    Array.prototype.toString = function () {      // this指向调用该方法的数组      // 返回数组的JSON字符串      return JSON.stringify(this);    }    // 调用重写后的toString方法    console.log(arr1.toString()); // 输出:[1,2,3]    console.log(arr2.toString()); // 输出:[1,2,3]
5、Date

Date类型的toString()方法,用于返回一个表示本地时区的日期和时间的字符串,其格式相当于将toDateString()toTimeString()方法的返回值通过一个空格拼接起来,但重写这两个方法并不会影响到toString()方法,因为方法内部并没有调用这两个方法。

​ 当Date类型的数据被转换为字符串时,例如:字符串拼接('string'+date),会自动调用toString()方法。

​ 如果只想获取日期,建议使用 toDateString()。如果只想获取时间,建议使用 toTimeString()。如果想要获取UTC时间,建议使用 toUTCString()。如果想要获取可读性友好的时间格式,建议使用toLocaleString()

​ 同样,我们也可以通过原型链来改写Date.prototype.toString()方法,从而实现特定的功能。

案例代码:
    let date1 = new Date();    // 调用默认的toString方法    console.log(date1.toString()); // 输出:Fri Jan 05 2024 15:03:30 GMT+0800 (中国标准时间)    // 调用toDateString()和toTimeString()方法    console.log(date1.toDateString() + ' ' + date1.toTimeString()); // 输出:Fri Jan 05 2024 15:03:30 GMT+0800 (中国标准时间)    // 重写toDateString()方法    Date.prototype.toDateString = function () {      // this指向调用该方法的日期对象      return JSON.stringify(this.getFullYear());    }    // 调用重写后的toDateString方法    console.log(date1.toDateString()); // 输出:2024    // 调用toString方法 并不会收到影响    console.log(date1.toString()); // 输出:Fri Jan 05 2024 15:03:30 GMT+0800 (中国标准时间)    // 获取UTC时间    console.log(date1.toUTCString()); // 输出:Fri, 05 Jan 2024 07:03:30 GMT    // 获取本地时间的字符串    console.log(date1.toLocaleString()); // 输出:2024/1/5 15:04:24    // 改写toString方法    Date.prototype.toString = function () {      // this指向调用该方法的日期对象      // 返回日期对象的年份      return this.getFullYear();    }    // 调用重写后的toString方法    console.log(date1.toString()); // 输出:2024
6、Function

Function类型的toString()方法,用于返回一个表示该函数源码的字符串,从 ES2018 开始,规范要求 toString() 的返回值与声明的源代码完全相同,包括空格和注释。普通函数、匿名函数、箭头函数输出的格式略微有所不同。

​ 当Function类型的数据被转换为字符串时,例如:字符串拼接('string'+ function),会自动调用toString()方法。

​ 同样,我们也可以通过原型链来改写Date.prototype.toString()方法,从而实现特定的功能。

案例代码:
    let f = function (a, b) {      // 返回a+b的值      return a + b;    }    // 利用构造函数传建一个函数 注意a跟+之间没有空格    let f2 = new Function('a', 'b', 'return a+ b;');    let f3 = (a, b) => {      return a + b;    }    // 调用默认的toString方法    console.log(f.toString()); // 输出:function (a, b) { // 返回a+b的值 return a + b; }    console.log(f2.toString()); // 输出:function anonymous(a, b) { return a+ b; }    console.log(f3.toString()); // 输出:(a, b) => { return a + b; }    // 重写toString方法    Function.prototype.toString = function () {      // this指向调用该方法的函数      // 返回函数的参数个数      return this.length;    }    // 调用重写后的toString方法    console.log(f.toString()); // 输出:2    console.log(f2.toString()); // 输出:2    console.log(f3.toString()); // 输出:2
7、Boolean

Boolean类型的toString()方法,用于返回当前布尔值的字符串形式。

​ 同样,我们也可以通过原型链来改写Boolean.prototype.toString()方法,从而实现特定的功能。

案例代码:
    let a = true;    let b = false;    // 调用默认的toString方法    console.log(a.toString()); // 输出:true    console.log(b.toString()); // 输出:false    // 与布尔值进行对比    console.log(a.toString() == true); // 输出:false    console.log(a.toString() === true); // 输出:false    console.log(b.toString() == false); // 输出:false    console.log(b.toString() === false); // 输出:false
8、Symbol

Symbol类型的toString()方法,用于返回当前Symbol的字符串形式。 Symbol数据不能隐式转换为字符串,因此需要toString()方法,将数据转换成字符串。

​ 同样,我们也可以通过原型链来改写Boolean.prototype.toString()方法,从而实现特定的功能。

​ 更多相关内容可查看:JavaScript 之 Symbol 数据类型。

案例代码:
  // 创建一个symbol    const a = Symbol("aaa");    console.log(a.toString()); // Symbol(aaa)    // 创建一个全局symbol    const b = Symbol.for("bbb");    console.log(b.toString()); // Symbol(bbb)    // 重写toString方法    Symbol.prototype.toString = function () {      // this指向调用该方法的symbol      // 返回symbol的描述      return this.description;    }    // 调用重写后的toString方法    console.log(a.toString()); // 输出:aaa    console.log(b.toString()); // 输出:bbb
9、Selection

Selection类型的toString()方法,用于返回一个表示当前Selection对象的字符串。

​ 当Selection类型的数据被转换为字符串时,例如:字符串拼接('string'+ Selection),会自动调用toString()方法。

​ 更多相关内容可查看:Selection对象和Range对象。

10、null 和 undefined

nullundefined 是 JavaScript 中的特殊值,它们没有 toString() 方法。调用一个不存在的方法会导致 TypeError 错误。如果你想将它们转换为字符串,你可以使用其他方法,如使用条件语句或模板字符串来处理它们。

11、其他

HTMLHyperlinkElementUtils.toString()

URLSearchParams.toString()

阅读本书更多章节>>>>

本文链接:https://www.kjpai.cn/guonei/2024-04-14/158663.html,文章来源:网络cs,作者:康由,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论