JavaScript 之 toString()方法详解

一、简介

​ 在 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()); // 输出：helloconsole.log(s2.toString()); // 输出：hello2// 重写toString方法String.prototype.toString = function () {// this指向调用该方法的对象字符串// 返回对象字符串的长度return this.length;}// 调用重写后的toString方法console.log(s.toString()); // 输出：5console.log(s2.toString()); // 输出：6// 在模板字符串等期望字符串的上下文中使用String对象时，会自动调用toString方法console.log(`你好 ${s}`); // 输出：你好 5console.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()); // 输出：123console.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是个例外 转换为字符串后，会变成0n = -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}`); // 输出：你好 4console.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,3console.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()); // 输出：2console.log(f2.toString()); // 输出：2console.log(f3.toString()); // 输出：2
7、Boolean

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

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

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

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

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

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

案例代码：
  // 创建一个symbolconst a = Symbol("aaa");console.log(a.toString()); // Symbol(aaa)// 创建一个全局symbolconst 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()); // 输出：aaaconsole.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()

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/599016.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

element-ui组件DatePicker日期选择器移动端兼容

element-ui组件DatePicker日期选择器移动端兼容

element-ui组件DatePicker日期选择器移动端兼容 css /** 移动端展示 **/ media screen and (max-width: 500px) {.el-picker-panel__sidebar {width: 100%;}.el-picker-panel {width: 400px!important;}.el-picker-panel__content {width: 100%;}.el-picker-panel__body{marg…
阅读更多...
初识MySQL

初识MySQL

一、什么是数据库 数据库（Database，简称DB）：长期存放在计算机内，有组织、可共享的大量数据的集合，是一个数据“仓库”。 数据库的作用： 可以结构化存储大量的数据，方便检索和访问…
阅读更多...
U盘如何设置密码？U盘数据该怎么加密？

U盘如何设置密码？U盘数据该怎么加密？

U盘等移动储存设备可以存储很多重要文件，方便我们随时使用。为了避免数据泄露，我们需要加密保护U盘数据。那么，U盘数据该怎么加密呢？下面我们就来了解一下。 U盘数据加密保护的必要性 目前，大多数的U盘并不具备数据加…
阅读更多...
rhino犀牛怎么导入和调整背景图?

rhino犀牛怎么导入和调整背景图?

rhino犀牛怎么导入和调整背景图？Rhino建模过程中经常要用到背景图，为了更加方便快捷，我们会直接导入一些图片来当做背景，那么Rhino犀牛如何导入和调整背景图呢，让我们一起来看看吧 打开犀牛软件，进入操作界…
阅读更多...
oracle用户密码过期导致cron失败

oracle用户密码过期导致cron失败

有客户反馈，有个测试环境很久不做自动备份。登录环境查看，发现oracle用户过期导致，如下 [roothydb ~]# su - oracle Last login: Wed Jan 3 10:19:40 CST 2024 on pts/0 orcl:/home/oraclehydb> crontab -l You (oracle) are not allow…
阅读更多...
分布式数据之复制（Replication）

分布式数据之复制（Replication）

1.简介 1.1简介——使用复制的目的 在分布式系统中，数据通常需要被分散在多台机器上，主要为了达到以下目的： 扩展性，数据量因读写负载巨大，一台机器无法承载，数据分散在多台机器 上可以有效地进行负载均衡…
阅读更多...
圣诞节来临，如何用海外云手机给亚马逊店铺引流？

圣诞节来临，如何用海外云手机给亚马逊店铺引流？

马上就要到圣诞节了，这是一年中冲刺销售量的最后一个好机会，对所有亚马逊卖家都十分重要。而无论是亚马逊新手卖家还是老卖家，要想在激烈的竞争中取胜，仅仅靠产品本身是不现实的，通过测评和社媒引流获取更多曝光和流量…
阅读更多...
LLM Agent之再谈RAG的召回信息密度和质量

LLM Agent之再谈RAG的召回信息密度和质量

话接上文的召回多样性优化，多路索引的召回方案可以提供更多的潜在候选内容。但候选越多，如何对这些内容进行筛选和排序就变得更加重要。这一章我们唠唠召回的信息密度和质量。同样参考经典搜索和推荐框架，这一章对应排序重排环节，…
阅读更多...
大白话说区块链和通证

大白话说区块链和通证

1 区块链 简单地说，区块链其实就像是一个不可篡改的分布式数据库，该分布式数据库记录了一系列交易或事件。区块链运行在至少1个以上的节点上，每个节点都有自己的一个分布式数据库，也就是分布式账本。正常情况下，每个节…
阅读更多...
C 练习实例19

C 练习实例19

题目：一个数如果恰好等于它的因子之和，这个数就称为"完数"。例如61＋2＋3.编程找出1000以内的所有完数。 程序分析：请参照：C 练习实例14。 步骤分析： 写一个函数判断是否是完数 找出…
阅读更多...
软文写作三大原则与技巧，媒介盒子分享

软文写作三大原则与技巧，媒介盒子分享

网络技术的快速发展带来传播环境的巨变，软文已经成为各大企业宣传的主要形式之一。而软文广告的核心就是其文案，一个好的软文不仅能够传达品牌理念，还能吸引用户了解品牌，提高转化率，今天媒介盒子就来和大家聊聊软文写…
阅读更多...
二叉树的直径，力扣

二叉树的直径，力扣

目录 题目地址： 题目： 我们直接看题解吧： 审题目事例提示： 解题方法： 难度分析： 解题方法分析： 解题分析： 补充说明： 代码优化： 题目地址： 543. 二…
阅读更多...
Minitab 20安装包下载及安装教程

Minitab 20安装包下载及安装教程

Minitab 20下载链接：https://docs.qq.com/doc/DUmNYVGxtUnZkWUpk 1.选中下载好的安装包，鼠标右键解压到”Minitab 20“文件夹 2.选中Setup，鼠标右击选择“以管理员身份运行” 3.点击“下一步” 4.点击“下一步” 5.勾选我接受许可协议中的条…
阅读更多...
wblogic中间件配置数据源

wblogic中间件配置数据源

配置数据源 1.服务-数据源-配置-新建 2.单机选一般数据源 3.选择源名称、jndi名称、数据库类型 4.选择驱动 5.下一步 6.输入连接串信息 参考&#xff1a; 格式二&#xff1a;jdbc:oracle:thin:<host>:<port>:<SID> 数据库名称配置的sid 7.测试配置&#xff…
阅读更多...
CEC2017（Python）：七种算法（RFO、DBO、HHO、SSA、DE、GWO、OOA）求解CEC2017

CEC2017（Python）：七种算法（RFO、DBO、HHO、SSA、DE、GWO、OOA）求解CEC2017

一、7种算法简介 1、红狐优化算法RFO 2、蜣螂优化算法DBO 3、哈里斯鹰优化算法HHO 4、麻雀搜索算法SSA 5、差分进化算法DE 6、灰狼优化算法GWO 7、鱼鹰优化算法OOA 二、CEC2017简介 参考文献&#xff1a; [1]Awad, N. H., Ali, M. Z., Liang, J. J., Qu, B. Y., &…
阅读更多...
MINCO+汽车

MINCO+汽车

对于环境中的静态障碍物&#xff0c;我们构造几何自由空间来约束自我车辆的完整模型以保证安全。 对于动态障碍物&#xff0c;我们使用凸多边形来覆盖其形状。 然后&#xff0c;我们约束小车与障碍物多边形在每一时刻的符号距离[1]的下界近似&#xff0c;以保证小车的安全。 …
阅读更多...
macOS进程间通信的常用技术汇总

macOS进程间通信的常用技术汇总

macOS进程间通信的常用技术汇总 命令行传参。yyds管道(pipe), 匿名管道&#xff0c; c的技术&#xff0c;可以跨平台使用 只能在父子进程间通信&#xff0c;由于是单向的管道&#xff0c;只能单方面传输数据。 如果需要双向传输&#xff0c;需要建立双向的两条管道才行 匿名管…
阅读更多...
Pointnet++改进注意力机制系列：全网首发CoordAtt注意力机制 |即插即用，实现有效涨点

Pointnet++改进注意力机制系列：全网首发CoordAtt注意力机制 |即插即用，实现有效涨点

简介：1.该教程提供大量的首发改进的方式，降低上手难度，多种结构改进，助力寻找创新点！2.本篇文章对Pointnet++特征提取模块进行改进，加入CoordAtt注意力机制，提升性能。3.专栏持续更新，紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一 2.2 步骤二
阅读更多...
ssm基于BS架构的法律咨询系统的分析与设计论文

ssm基于BS架构的法律咨询系统的分析与设计论文

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统法律咨询信息以及法规信息管理难度大&#xff0c;容错率低…
阅读更多...
MSVCP140_1.dll文件丢失的解决方法指南，MSVCP140_1.dll最快捷的修复手段

MSVCP140_1.dll文件丢失的解决方法指南，MSVCP140_1.dll最快捷的修复手段

在近些年里&#xff0c;随着电脑技术的迅猛进步&#xff0c;我们对操作系统变得越来越依赖。然而&#xff0c;在使用过程中&#xff0c;我们也可能偶遇一些技术挑战&#xff0c;比如遇到 MSVCP140_1.dll 文件丢失的问题。本文旨在深入探讨这个常见的技术难题&#xff0c;并为大…
阅读更多...
最新文章

Copyright @ 2022~2023