首页 > 基础资料博客日记

JavaScript 之 toString()方法详解

2024-04-04 16:00:06基础资料围观252次

本篇文章分享JavaScript 之 toString()方法详解，对你有帮助的话记得收藏一下，看Java资料网收获更多编程知识

一、简介

在 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继承并重写了Object的toString()方法，使其返回字符串本身（如果它是原始值）或 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类型继承并重写了Object的toString()方法，使 toString([radix])方法返回表示该数字值的字符串，可选参数radix表示数字值的基数，也就是数字的进制，参数范围在[2,36]，默认基数为10，即十进制。

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

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

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

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

案例代码：

    // 利用构造函数传建一个数字
    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()方法不可用或者被改写为非函数属性，则会按照原型链去调用Object的toString()方法。

同样，我们也可以通过原型链来改写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

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

11、其他

HTMLHyperlinkElementUtils.toString()

URLSearchParams.toString()

文章来源:https://blog.csdn.net/weixin_45092437/article/details/135412772
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：从零开始学Spring Boot系列-集成MyBatis-Plus
下一篇：家居网购项目--项目总结

首页 > 基础资料博客日记

JavaScript 之 toString()方法详解

一、简介

二、详细内容

1、Object

2、String

案例代码：

3、Number

案例代码：

4、Array

案例代码：

5、Date

案例代码：

6、Function

案例代码：

7、Boolean

案例代码：

8、Symbol

案例代码：

9、Selection

10、null 和 undefined

11、其他

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料 博客日记

JavaScript 之 toString()方法详解

一、简介

二、详细内容

1、Object

2、String

案例代码：

3、Number

案例代码：

4、Array

案例代码：

5、Date

案例代码：

6、Function

案例代码：

7、Boolean

案例代码：

8、Symbol

案例代码：

9、Selection

10、null 和 undefined

11、其他

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料博客日记